Keyword na this ng JavaScript

实例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

亲自试一试

Ano ang this?

JavaScript this Ang keyword ay tumutukoy sa object na ito.

Ito ay may magkakaibang halaga, depende sa lugar nito sa paggamit:

  • Sa method,this Ito ay tumutukoy sa object na may-ari.
  • Sa mag-isa,this Ito ay tumutukoy sa global na object.
  • Sa function,this Ito ay tumutukoy sa global na object.
  • Sa function, sa mode na strict,this Ito ay undefined.
  • Sa event,this Ito ay tumutukoy sa element na tumanggap ng event.

Paano, call() 和 apply() Ang mga ganitong method ay maaaring ilagay ang this sa anumang object.

Ang this sa method

Sa mga method ng object,this Ito ay tumutukoy sa "may-ari" ng method na ito.

Sa halimbawa sa itaas ng pahina,this Ito ay tumutukoy sa object ng person.

Ang object ng person ay ang may-ari ng method na fullName.

fullName : function() {
  return this.firstName + " " + this.lastName;
}

亲自试一试

Mag-isa na this

Sa paggamit nang mag-isa, ang may-ari ay ang global na object, kaya this Ito ay tumutukoy sa global na object.

Ang global na object sa window na browser ay [object Window]:

实例

var x = this;

亲自试一试

Sa strict mode, kapag ginagamit nang mag-isa, this Ito ay tumutukoy sa global na object [object Window]:

实例

"use strict";
var x = this;

亲自试一试

Ang this sa function (default)

Ang default na binding ng may-ari ng function sa JavaScript function ay this.

Kaya, sa function,this Ito ay tumutukoy sa global na object [object Window].

实例

function myFunction() {
  return this;
}

亲自试一试

Ang this sa function (strict mode)

Ang strict mode ng JavaScript ay hindi pinapayagan ang default binding.

Kaya, kapag ginagamit sa function, sa mode na strict,this Ito ay wala sa kahulugan (undefined)}

实例

"use strict";
function myFunction() {
  return this;
}

亲自试一试

Ang this sa event handler

Sa HTML event handler,this Ito ay tumutukoy sa HTML element na tumanggap ng event:

实例

<button onclick="this.style.display='none'">
  I-click upang alisin ako!
</button>

亲自试一试

Pagsasakop ng Method sa Object

Sa kasong ito,this Ang siya ay isang object ng person (ang object ng person ay ang "may-ari" ng function):

实例

var person = {
  firstName  : "Bill",
  lastName   : "Gates",
  id         : 678,
  myFunction : function() {
    return this;
  }
};

亲自试一试

实例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

亲自试一试

换句话说，this.firstName 意味着 this（person）对象的 firstName 属性。

显式函数绑定

call() 和 apply() 方法是预定义的 JavaScript 方法。

它们都可以用于将另一个对象作为参数调用对象方法。

您可以在本教程后面阅读有关 call() 和 apply() 的更多内容。

在下面的例子中，当使用 person2 作为参数调用 person1.fullName 时，this 将引用 person2，即使它是 person1 的方法：

实例

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"Bill",
  lastName: "Gates",
}
person1.fullName.call(person2);  // 会返回 "Bill Gates"

亲自试一试