JavaScript-kysylyttäjä

Esimerkki

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

Kokeile itse

this 是什么？

JavaScript this 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

  • 在方法中，this 指的是所有者对象。
  • 单独的情况下，this 指的是全局对象。
  • 在函数中，this 指的是全局对象。
  • 在函数中，严格模式下，this 是 undefined。
  • 在事件中，this 指的是接收事件的元素。

像 call() ja apply() 这样的方法可以将 this 引用到任何对象。

方法中的 this

在对象方法中，this 指的是此方法的“拥有者”。

在本页最上面的例子中，this 指的是 person 对象。

person 对象是 fullName 方法的拥有者。

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

Kokeile itse

单独的 this

在单独使用时，拥有者是全局对象，因此 this 指的是全局对象。

在浏览器窗口中，全局对象是 [object Window]：

Esimerkki

var x = this;

Kokeile itse

在严格模式中，如果单独使用，那么 this 指的是全局对象 [object Window]：

Esimerkki

"use strict";
var x = this;

Kokeile itse

函数中的 this（默认）

在 JavaScript 函数中，函数的拥有者默认绑定 this。

因此，在函数中，this 指的是全局对象 [object Window]。

Esimerkki

function myFunction() {
  return this;
}

Kokeile itse

函数中的 this（严格模式）

JavaScript 严格模式不允许默认绑定。

因此，在函数中使用时，在严格模式下，this 是未定义的（undefined）。

Esimerkki

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

Kokeile itse

事件处理程序中的 this

在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素：

Esimerkki

Kokeile itse

对象方法绑定

在此例中，this 是 person 对象（person 对象是该函数的“拥有者”）：

Esimerkki

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

Kokeile itse

Esimerkki

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

Kokeile itse

Toisin sanoenthis.firstName tarkoittaa thisolion firstName ominaisuudet.

Explicit function binding

call() ja apply() Metodit ovat JavaScriptin määrittämiä metodeja.

Ne molemmat voidaan käyttää objektimetodin kutsumiseen toisen objektin parametrina.

Voit lukea lisää tästä oppaasta: call() ja apply() Lisätietoja.

Kun käytetään person2:ta parametrina person1.fullName:n kutsumiseen:this viittaa person2:hen, vaikka se on person1:n metodi:

Esimerkki

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

Kokeile itse