Beherrschen Sie dieses Schlüsselwort in JavaScript_Javascript-Tipps

Das Schlüsselwort this in JS verwirrt viele neue und alte JS-Entwickler. In diesem Artikel wird dieses Schlüsselwort ausführlich erläutert. Nachdem Sie diesen Artikel gelesen haben, werden alle Ihre Verwirrungen beseitigt sein. Sie erfahren, wie Sie dies in verschiedenen Situationen richtig anwenden.

Wir verwenden dies auf die gleiche Weise wie Substantive in natürlichen Sprachen wie Englisch und Französisch. Zum Beispiel: „John rannte schnell, weil er den Zug einholen wollte.“ Bitte beachten Sie das Pronomen „er“, das in diesem Satz für John verwendet wird. Wir hätten es so ausdrücken können: „John rannte schnell, weil John den Zug einholen wollte.“ Gemäß den normalen Sprachgewohnheiten drücken wir uns nicht auf die zweite Art aus. Wenn wir auf die zweite Art sprechen würden, würden unsere Familie und schwulen Freunde uns für Spinner halten. Vielleicht bleiben nicht nur unsere Familienmitglieder, sondern auch unsere Schönwetterfreunde und Kollegen von uns fern. In ähnlicher Weise behandeln wir in JS das Schlüsselwort this als Abkürzung oder Referent. Das Schlüsselwort this verweist auf das Subjekt des aktuellen Kontexts (Kontext, der weiter unten erläutert wird) oder auf das Subjekt des Codeblocks, der gerade ausgeführt wird.

Bedenken Sie den folgenden Code:

var person = {
   firstName: "Penelope",
   lastName: "Barrymore",
   fullName: function () {
   // 正如我们在文中提到的使用“他”作为代名词一样，我们在这里使用this

   console.log(this.firstName + " " + this.lastName);
   //我们其实也可以这样写：
   console.log(person.firstName + " " + person.lastName);
   }
  }

Wenn wir person.firstName und person.lastName verwenden, wird der Code in einigen Fällen mehrdeutig. Beispielsweise gibt es in der globalen Variablen einen Variablennamen mit demselben Namen wie „person“. Wenn wir in diesem Fall den Wert von person.firstName lesen möchten, liest das System wahrscheinlich die Eigenschaft firstName (Eigenschaft) aus der Variablen person der globalen Variablen. Auf diese Weise ist es schwierig, beim Debuggen des Codes Fehler zu finden. Dies trägt also nicht nur zur Verschönerung des Codes bei, sondern stellt auch die Genauigkeit des Programms sicher. Dieser Ansatz ist tatsächlich derselbe wie die zuvor erwähnte Verwendung von „he“, wodurch unser Code klarer wird. „Er“ bezieht sich auf das „Johannes“ am Satzanfang.

So wie das Pronomen „er“ verwendet wird, um auf den Antezedens im Satz zu verweisen (der Antezedens ist das durch das Pronomen angegebene Substantiv), wird das Schlüsselwort this auf die gleiche Weise verwendet, um auf die aktuelle Methode zu verweisen (Funktion, (was auch als Funktion bezeichnet werden kann). Das gebundene Objekt. Dies bezieht sich nicht nur auf das Objekt, sondern enthält auch den Wert des Objekts. Wie der Antezedens kann dies auch als eine Abkürzung (oder ein Ersatz, der die Mehrdeutigkeit moderat reduziert) verstanden werden, der verwendet wird, um auf das aktuelle Objekt (auch „Antezedensobjekt“ genannt) im Kontext zu verweisen. Wir werden den „Kontext“ später genauer erläutern.

Diese grundlegende Theorie der Schlüsselwörter

Zunächst müssen wir wissen, dass Objekte (Objekt) Eigenschaftssätze (Eigenschaften) haben und alle Methoden (Funktionen) auch Eigenschaftssätze haben. Wenn eine Methode ausgeführt wird, gibt es ein this-Attribut – eine Variable, die den Wert des Objekts speichert, das die Methode aufruft (genauer gesagt, die Methode, die das Schlüsselwort this verwendet).

Das Schlüsselwort this zeigt immer auf ein Objekt und enthält den Wert dieses Objekts. Obwohl es außerhalb der globalen Gültigkeitsbereichsmethode (Funktion) erscheinen kann, erscheint es normalerweise im Methodenkörper. Es ist erwähnenswert, dass, wenn wir den strikten Modus verwenden und das Schlüsselwort this in globalen Funktionen oder anonymen Methoden verwenden, die an kein Objekt gebunden sind, dies auf undefiniert verweist.

Dies wird im Methodenkörper verwendet, z. B. Methode A, und zeigt auf den Wert des Objekts, das Methode A aufruft. Auf keinen Fall können wir den Namen des Objekts finden, das Methode A aufruft. In diesem Fall verwenden wir ihn, um auf die Methoden und Eigenschaften zuzugreifen, die dem Objekt gehören, das Methode A aufruft. Dies ist eigentlich nur eine Abkürzung für den Verweis auf das Vorgängerobjekt – das Objekt, für das die Methode aufgerufen wird.

Sehen wir uns den folgenden Code genauer an, der dies verwendet.

var person = {
  firstName: "Penelope",
  lastName: "Barrymore",
  //this用在showFullName方法中，而showFullName定义在person对象中，由于调用showFullName的是person这个对象，所以this拥有person的值

  showFullName: function() {
    console.log(this.firstName + " " + this.lastName);
  }
}
person.showFullName(); // 结果：Penelope Barrymore

Betrachten Sie dazu das folgende jQuery-Beispiel.

//这是一段很简单的jQuery代码

$("button").click(function(event) {
  // $(this) 会指向$("button")对象
  // 因为$("button")对象调用click方法
  console.log($(this).prop("name"));
});

我想详细地说一下上面这个jQuery示例:$(this)的使用，这是this的jQuery版本，它用于匿名方法中，这个匿名方法在button的单击事件里执行。这里之所以说$(this)被绑定到button对象，是因为jQuery库把$(this)绑定到调用click方法的对象上。因此，尽管$(this)被定义在一个自身无法访问“自身”变量的匿名方法里，$(this)仍会指向button对象。

请注意，button是一个HTML页面的DOM元素，它同时是一个对象：在上面的例子中，因为我们把它包装在了jQuery的$()方法里，所以它是一个jQuery对象。

this关键字的核心

下面这条规则可以帮助你彻底搞懂this关键字：如果一个方法内部使用了this关键字，仅当对象调用该方法时this关键字才会被赋值。我们估且把使用了this关键字的方法称为“this方法”。

尽管看上去this引用了它在代码中所存在于的对向，事实上在方法被调用之前它并没有被赋值，而赋给它的值又严格地依赖于实际调用“this方法”的对象。this通常会被赋予调用对象的值，下面有一些特殊情况。

全局范围里的this

在全局域中，代码在浏览器里执行，所有变量和方法都属于window对象。因而当我们在全局域中使用this关键字的时候，它会被指向（并拥有）全局变量window对象。如前所述，严格模式除外。window对象是JS一个程序或一张网页的主容器。

因而：

var firstName = "Peter",
lastName = "Ally";

function showFullName() {
  //在这个方法中，this将指向window对象。因为showFullName()出现在全局域里。

  console.log(this.firstName + " " + this.lastName);
}

var person = {
  firstName: "Penelope",
  lastName: "Barrymore",
  showFullName: function() {
    //下面这行代码，this指向person对象，因为showFullName方法会被person对象调用。
    console.log(this.firstName + " " + this.lastName);
  }
}

showFullName(); // Peter Ally

//window对象包含了所有的全局变量和方法，因而会有以下输出
window.showFullName(); // Peter Ally

//使用了this关键字的showFullName方法定义在person对象里，this关键字指向person对象，因以会有以下输出
person.showFullName(); // Penelope Barrymore

对付this有绝招

当方法内使用了this关键字时，这几种情况最容易引起误解：方法被借用；把方法赋值给某个变量；方法被用作回调函数（callback），被作为参数传递；this所在的方法是个闭包（该方法是一个内部方法）。针对这几种情况，我们将逐一攻破。在此之前，我们先简单介绍一下“上下文”(context)。

JS当中的上下文跟这句话中的主语(subject)类似：“John是赢家，他还了钱”。这句话的主语是John。我们也可以说这句话的上下文是John，因为我们在这句话中关注的是John，即使这里有一个“他”字来代指John这个先行词。正如我们可以使用分号来切换句子的主语一样，通过使用不同的对象来对方法进行调用，当前的上下文对象同样可以被切换。

类似地，以下JS代码：

var person = {
  firstName: "Penelope",
  lastName: "Barrymore",
  showFullName: function() {
    // 上下文
    console.log(this.firstName + " " + this.lastName);
  }
}

//使用person对象调用showFullName的时候，上下文是person对象
//showFullName内部的this指向person对象
person.showFullName(); // Penelope Barrymore
//如果我们用不同的对象来调用showFullName
var anotherPerson = {
  firstName: "Rohit",
  lastName: "Khan"
};

//我们可以使用apply方法来显式设置this的值—迟些我们会讲到apply方法
//this会指向任何一个调用了this方法的对象，因此会有以下输出结果
person.showFullName.apply(anotherPerson); // Rohit Khan
//所以现在的上下文是anotherPerson，因为anotherPerson通过借助使用apply方法间接调用了person的showFullName方法

现在我们开始正式讨论应付this关键字的绝招，例子里包含了this所引发的错误以及解决方案。

1.当this被用作回调函数传入其它方法

当我们把一个使用了this关键字的方法当成参数作为回函数的时候，麻烦就来了。例如：

//以下是一个简单的对象，我们定义了一个clickHandler方法。我们想让这个方法在页面上某个button被单击时执行。
var user = {
  data: [{
    name: "T. Woods",
    age: 37
  },
  {
    name: "P. Mickelson",
    age: 43
  }],
  clickHandler: function(event) {
    var randomNum = ((Math.random() * 2 | 0) + 1) - 1; // 随机返回0或1
    //下面这行代码会从数组data里随机打印姓名和年龄
    console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
  }
}

//button对象被jQuery的$方法包装，现在变成一个jQuery对象
//所以输出结果是undefined，因为button对象没有data这个属性
$("button").click(user.clickHandler); // 无法读取未定义的属性

上面的代码中，我们把user.clickHandler当成回调函数传入$(“button”)对象的click事件，user.clickHandler中的this将不再指向user对象转。谁调用了这个包含this的方法this就会指向谁。真正调用user.clickHandler的对象是button对象—user.clickHandler会在button对象的单击方法里执行。

注意，尽管我们使用user.clickHandler来调用clickHander方法（我们也只能这么做，因为clickHandler是定义在user对象上的），clickHandler方法本身会被现在被this所指向的上下文对象所调用。所以this现在指向的是$(“button”)对象。

当上下文改变时—当我们在其它对象而非原对象上执行某个方法的时候，显然this关键字不再指向定义了this关键字的原对象。

解决方案：

由于我们真的很想让this.data指向user对象的data属性，我们可以使用Bind/ Apply/ Call等方法来强制改变this所指向的对象。本系列的其它篇目将专门对Bind/ Apply/ Call进行讲解，文中介绍了如何在不同的情况强制改变this的值的方法。与其在本文大篇幅讨论，我强烈建议大家直接去读另外的篇目（译者注：晚些时候放出这里所说的“其它篇目”）。

为了解决前面代码中的问题，我们可以使用bind方法。

针对下面这行代码：

$ ("button").click (user.clickHandler);
我们可以用bind方法把clickHandler绑定的user对象上：

$("button").click (user.clickHandler.bind (user)); // P. Mickelson 43
2.闭包中的this

在内部方法中，或者说闭包中使用this，是另一个很容易被误解的例子。我们必须注意的是，内部方法不能直接通过使用this关键字来访问外部方法的this变量，因为this变量 只能被特定的方法本身使用。例如：

var user = {
  tournament: "The Masters",
  data: [{
    name: "T. Woods",
    age: 37
  },
  {
    name: "P. Mickelson",
    age: 43
  }],

  clickHandler: function() {
    //在里用this.data没有太大问题，因为this指向的是user对象，data是user的一个属性
    this.data.forEach(function(person) {
      //但是在这个匿名方法（作为参数被传进forEach方法的这个方法）里，this不再指向user对象
      //内部方法无法访问外部方法的this
      console.log("What is This referring to? " + this); //输出结果为：[object Window]
      console.log(person.name + " is playing at " + this.tournament);
      // T. Woods is playing at undefined
      // P. Mickelson is playing at undefined
    })
  }

}

user.clickHandler(); // What is "this" referring to? [object Window]

因为匿名方法中的this不能访问外部方法的this，所以在非严格模式下，this指向了全局的window对象

解决方案：

在进入forEach方法之前，额外使用一个变量来引用this。

var user = {
  tournament: "The Masters",
  data: [{
    name: "T. Woods",
    age: 37
  },
  {
    name: "P. Mickelson",
    age: 43
  }],

  clickHandler: function(event) {
    //为了捕获this指向user对象时的值，我们把它赋值给另外一个变量theUserObj，后面我们可以使用theUserObj
    var theUserObj = this;
    this.data.forEach(function(person) {
      //现在我们不用this.tournament了，我们用theUserObj.tournament
      console.log(person.name + " is playing at " + theUserObj.tournament);
    })
  }

}

user.clickHandler();
// T. Woods is playing at The Masters
// P. Mickelson is playing at The Masters

正如下面的代码，很多JS开发人员喜欢使用变量that来设置this的值。但我个人不太喜欢用that这个名字，我喜欢使用让人一眼就能看懂this到底指向谁的那种名字，所以上面的代码中我使用了theUserObj = this。

 // 这句代码对大多数JS开发人员来说再常见不过了
var that = this;

3.方法被赋值给某个变量

this关键字有时候很调皮，如果我们把一个使用了this关键字的方法赋值给一个变量，我们来看会有什么有趣的事发生：

// data变量是一个全局变量
var data = [{
name: "Samantha",
age: 12
},
{
name: "Alexis",
age: 14
}];

var user = {
// 而这里的data是user的一个属性
data: [{
name: "T. Woods",
age: 37
},
{
name: "P. Mickelson",
age: 43
}],
showData: function(event) {
var randomNum = ((Math.random() * 2 | 0) + 1) - 1; // 随机生成1或0
//这句话会从数组data里随机显示人名和岁数
console.log(this.data[randomNum].name + " " + this.data[randomNum].age);
}

}

// 把user.showData方法赋值给变量 showUserData
var showUserData = user.showData;

//执行showUserData方法，结果将 来自全局的data数组而非user对象的data属性
showUserData(); // Samantha 12 (来自全局变量data)
//解决方案：通过使用bind方法来显式设置this的值
//把showData方法绑定到user对象上
var showUserData = user.showData.bind(user);

//现在结果将来自user对象，因为this关键字已经被强制绑定到user对象上了
showUserData(); // P. Mickelson 43

4.借用方法带来的问题

JS开发中，借用方法（borrowing methods）很常见。

我们来看下面的代码：

//下面代码中有两个对象。其中一个定义了avg方法，另一个不包含avg的定义。我们用另一个对象来借用前一对象的avg方法。
var gameController = {
  scores: [20, 34, 55, 46, 77],
  avgScore: null,
  players: [{
    name: "Tommy",
    playerID: 987,
    age: 23
  },
  {
    name: "Pau",
    playerID: 87,
    age: 33
  }]
}

var appController = {
  scores: [900, 845, 809, 950],
  avgScore: null,
  avg: function() {

    var sumOfScores = this.scores.reduce(function(prev, cur, index, array) {
      return prev + cur;
    });

    this.avgScore = sumOfScores / this.scores.length;
  }
}

//如果执行下面的代码，gameController.avgScore属性的实际取值将由appController的scores而来
//不要执行下面的代码，我们只是为了对这种情况进行说明。实际上我们想让appController.avgScore仍然为null。
gameController.avgScore = appController.avg();

avg方法的this关键字指向的是gameController对象，如果使用appController调用该方法，this将会指向appController(但事实上这并不是我们期望的结果，因为我们只想借用方法的实现逻辑而非具体的数据来源)。

解决方案：

为了保证gameController只借用appController的avg方法的逻辑，我们使用apply方法：

// 我们要使用apply方法，注意这里传入appController.avg方法的第二个参数
appController.avg.apply(gameController, gameController.scores);

//尽管avg方法是借来的，但是现在avgScore属性已经被成功地应用到gameController上了。
console.log(gameController.avgScore); // 46.4
//appController.avgScore仍然是null，只有gameController的avgScore被更新了
console.log(appController.avgScore); // null

gameController只借用了appController的avg方法，这时this将指向gameController，因为我们把gameController作为apply方法的第一个参数进行传递。apply方法的第一个参数将会显式设置this的取值。

结语

希望您在文中有所收获。现在你可以使用文中介绍的绝招（bind方法，apply方法，call方法，以及把this赋值给 一个变量）来对付跟this相关的任何问题。

正如已经了解到的，this在上下文改变、被作为回调函数使用、被不同的对象调用、或者方法被借用的情况下，this将一直指向调用当前方法的对象。