[译文]深入理解JavaScript的this关键字（二）

原文：Understand JavaScript’s “this” With Clarity, and Master It

上一篇文章：[译文]深入理解JavaScript的this关键字（一）

this关键词最令人误解的场景和相关技巧

this关键字令人误解的场景包括：在borrow method中使用this；将一个使用this的方法赋给变量；在回调函数中使用this;在闭包中使用this。我们会依次查看这些场景，然后为了维护合适的this值提出相应的解决方案。

0 一个重要的笔记

在我们开始正式学习前关于Context(上下文）的一点小知识

JS中的context类似于英语中一个句子的主语：

John is the winner who returned the money.

John是句子中的主语；我们可以说句子的context是John，因为句子的焦点是在他上身。即使who这个代词也是指John,也就是，先行物。正如我们使用分号以切换句子的主语，我们可以有一个对象是当前的context，然后通过另一个对象来调用函数，将上下文切换成另一个对象。

在JS代码中是这样的：

var person = {    firstName: 'hhhha',    lastName: 'wooow',    showFullName: function() {        console.log(this.firstName + ' ' + this.lastName);    }}person.showFullName(); // hhhha wooowvar anotherPerson = {    firstName: 'zyyyy',    lastName: 'hhhhhha'}// change the context person.showFullName.apply(anotherPerson); // zyyyy hhhhhha

1 Fix this when used in a method passed as a callback

当然我们将一个方法（方法内使用this）将作为一个回调函数，事情就变量有些麻烦。比如下面这个例子：

 // We have a simple object with a clickHandler method that we want to use when a button on the page is clicked​    var user = {    data:[    {name:"T. Woods", age:37},    {name:"P. Mickelson", age:43}    ],    clickHandler:function (event) {    var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1​​    // This line is printing a random person's name and age from the data array​    console.log (this.data[randomNum].name + " " + this.data[randomNum].age);    }    }​    // The button is wrapped inside a jQuery $ wrapper, so it is now a jQuery object​    // And the output will be undefined because there is no data property on the button object​    $ ("button").click (user.clickHandler); // Cannot read property '0' of undefined

在上述代码，由于button( $ (“button”))是一个对象，然后我们将user.clickHandler方法传递给它的click方法用作回调函数。我们知道在这个回调函数中，this不会再指向user对象。this现在指向另一个对象（user.clickHandler在这个对象中执行)，因为this在user.clickHandler方法中被调用。调用user.clickHandler的对象的是button: user.clickHandler会在button的click方法中被调用。

即使我们现在通过user.clickHandler调用clickHandler()（我们不得不这么做，因为clickHandler这个方法定义在user上面），现在clickHandler这个方法在button上下文（context）这中被定义，这个context是this指向的对象。所以this现在指向$(“button”)对象。

在这个代码中，很明显，context改变了——当我们在其他对象上而不是原来对象上执行一个方法时，this关键字就不再指向原来的对象了，原来的对象是指this被定义的对象，它反而指向调用方法的对象了。

修复“方法被传递作为回调函数“引发的this问题的解决方案是：因为我们想让this.data指向user对象上的data属性，我们可以使用Bind().Apply(),Call()方法专门指定this的值。

我已经写了篇详细的文章： JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals 关于这些方法，包括如何在这些令人误解的场景使用它们设置this的值。我不会再这里赘述这篇文章的内容，我建议你阅读整篇文章，我认为这篇文章是一个JS开发者必读的。

为了修复之前例子中的这个问题，我们可以这么使用bind方法：

$("button").click (user.clickHandler.bind (user)); // P. Mickelson 43

我们已经将user.clickHandler方法和user对象绑定。

2 Fix this inside closure

另一个this令人误解的例子是当我们使用一个闭包函数时。我们必须记住：闭包不能通过this关键词访问挖不不函数的this变量因为this变量只能通过函数自身访问，不能被内部函数访问。举个例子：

 var user = {    tournament:"The Masters",    data      :[    {name:"T. Woods", age:37},    {name:"P. Mickelson", age:43}    ],​    clickHandler:function () {    // the use of this.data here is fine, because "this" refers to the user object, and data is a property on the user object.​​    this.data.forEach (function (person) {    // But here inside the anonymous function (that we pass to the forEach method), "this" no longer refers to the user object.​    // This inner function cannot access the outer function's "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对象的，前提是严格模式不被使用。

在匿名函数中维护this值的解决方案：
为了解决上述问题，我们使用一种在JS的普遍实践，然后在进入forEach之前，将this值赋给另一个变量。

  var user = {    tournament:"The Masters",    data      :[    {name:"T. Woods", age:37},    {name:"P. Mickelson", age:43}    ],​    clickHandler:function (event) {    // To capture the value of "this" when it refers to the user object, we have to set it to another variable here:​    // We set the value of "this" to theUserObj variable, so we can use it later​    var theUserObj = this;    this.data.forEach (function (person) {    // Instead of using this.tournament, we now use 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的值，像这样：var that = this;用什么变量名指代并不重要。但是，that变量名的使用令我感到尴尬，我尽量用一个名词去指代this指代的对象，所以我在前面的代码中这么使用：var theUserObj = this

3 Fix this when method is assigned to a variable

如果我们将一个使用this的方法赋给一个对象，this的值会超出我们想象：它会绑定另一个对象。让我们看下面的代码：

// This data variable is a global variable​    var data = [    {name:"Samantha", age:12},    {name:"Alexis", age:14}    ];​    var user = {    // this data variable is a property on the user object​    data    :[    {name:"T. Woods", age:37},    {name:"P. Mickelson", age:43}    ],    showData:function (event) {    var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1​​    // This line is adding a random person from the data array to the text field​    console.log (this.data[randomNum].name + " " + this.data[randomNum].age);    }​    }​    // Assign the user.showData to a variable​    var showUserData = user.showData;​    // When we execute the showUserData function, the values printed to the console are from the global data array, not from the data array in the user object​    //​    showUserData (); // Samantha 12 (from the global data array)​

针对上述问题的解决方法是这样的：我们可以在bind方法中专门设定this的值以修复这个问题。

 // Bind the showData method to the user object​    var showUserData = user.showData.bind (user);​    // Now we get the value from the user object, because the <em>this</em> keyword is bound to the user object​    showUserData (); // P. Mickelson 43

4 Fix this when borrowing methods

borrowing methods在JS开发者是一个普遍的实践。作为JS开发者，我们常常会碰到这个实践。偶尔，我们会使用这个节省时间的时间。如果像了解更多关于borrowing methods的知识，可以阅读我的深度文章： JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals

让我们this在borrow methods的context的关联性：

// We have two objects. One of them has a method called avg () that the other doesn't have​    // So we will borrow the (avg()) method​    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;    }    }​    //If we run the code below,​    // the gameController.avgScore property will be set to the average score from the appController object "scores" array​    // Don't run this code, for it is just for illustration; we want the appController.avgScore to remain null​    gameController.avgScore = appController.avg();

avg方法的this关键字不会指向gameController对象，她会指向appController对象，因为它在appController对象中被调用。

解决方案：
为了解决这个问题，确保appController.avg()方法中的this指向gameController,我们能够使用apply()方法,像下面这样：

    // Note that we are using the apply () method, so the 2nd argument has to be an array—the arguments to pass to the appController.avg () method.​    appController.avg.apply (gameController);​    // The avgScore property was successfully set on the gameController object, even though we borrowed the avg () method from the appController object​    console.log (gameController.avgScore); // 46.4​​    // appController.avgScore is still null; it was not updated, only gameController.avgScore was updated​    console.log (appController.avgScore); // null

gameController对象借用appController的avg方法。appController的avg方法的this值会被设为gameController对象，因为我们会传递gameController对象作为第一个参数给apply方法，apply方法的第一个参数总是会显示地设置this的值。

5 最后想说的话

现在你经有工具（bind,apply,call和保存this的值给一个变量）去任何一个场景中去征服JS的this。

当context切换的时候，this这个关键词变得有些麻烦。你需要铭记于心的是：this总是指向调用this函数的对象。

好好学习，天天coding。