完全理解JavaScript关键字this

这是一篇译文。当时看到原文的时候觉得内容非常易懂，是不可多得的好文。所以一开始就扔进草稿箱准备翻译，不过一晃好久过去了，最新发布的博文ID是1190，而这篇的ID是715，可见其在草稿箱里待了有多久。而这期间网络上也已经有了这篇文章的翻译稿，不过传播并不广泛，我搜索了下并没有多少索引和转发量。总体来说，已有的翻译稿总体来说也挺好，但是但从第二节开始，翻译变的有些随意，并且出现了很多偏差，有大有小，虽不影响阅读却多少妨碍理解。比如将“传递函数作为值”译成“传递函数的值”等等，这很容易引起混淆。另外还遗漏了一小部分内容的翻译，不知道是否是原作者后期更新内容所致。

个人挺喜欢这篇文章，所以网上虽已有一版，但还是希望用自己的翻译语言来描述一遍。尽管可能显得多余，但我对自己的翻译水平还是有些自信，特别是斟词酌句的时候特别爱花时间。如果要说特点就是，尽可能保持原来作者的语句不改动。不到万不得已不分句，所以语言上难免定语比较多，读起来可能有些拗口。不过好处就是很少出现意思的偏差，同时尽可能不修改也是对原作者的尊重。

原文：Fully Understanding the this Keyword by Cody Lindley

this的概念性概述

每当一个函数被创建，一个叫做this的关键字(在幕后)也随之被创建出来，它链接着包含函数进行操作的对象。换句话说，this在其所在函数的作用域里可用，是包含那个函数作为属性和方法的对象的引用。

让我们来看看这个对象：

var cody = {
	living:true,
	age:23,
	gender:'male',
	getGender:function(){return cody.gender;} 
};

console.log(cody.getGender()); // logs 'male'

注意里面的getGender函数，我们通过点符号(例如cody.gender)访问cody对象自身的gender属性。这段代码可以被重写，用this来访问cody对象，因为this指向cody对象。

var cody = {
	living:true,
	age:23,
	gender:'male',
	getGender:function(){return this.gender;} 
};
 
console.log(cody.getGender()); // logs 'male'

在this.gender里用到的this简单地指向函数正在操作的cody对象。

关于this的主题会让人感到困惑，但其实未必如此。只要记住，通常，this被用在函数里并指向包含这个函数的对象，而不是这个函数本身(例外情况包括使用new关键字或者call()和apply())。

注意事项

• 关键字this的行为看起来就像其他变量一样，除了你不能改变它。
• 不同于arguments和任何发送给函数的参数，在调用(活动)的对象中，this是一个关键字(而不是属性)。

如何确定this的值?

传递给所有函数的this，其值基于函数被调用的运行时的上下文。请注意下这里，因为这是“那些你需要去记下来的怪异(不同寻常)”之一。

下面的代码里，myObject对象被赋予有一个sayFoo属性,其指向sayFoo函数。当sayFoo函数在全局作用域被调用时，this指向window对象。当它作为myObject对象的方法被调用时，this指向myObject。

myObject还有一个foo属性，这里被一同用到。

var foo = 'foo';
var myObject = {foo: 'I am myObject.foo'};
 
var sayFoo = function() {
  console.log(this['foo']); 
};
 
// give myObject a sayFoo property and have it point to sayFoo function
myObject.sayFoo = sayFoo;
myObject.sayFoo(); // logs 'I am myObject.foo' 12
 
sayFoo(); // logs 'foo'

显然，this的值基于函数被调用的上下文。myObject.sayFoo和sayFoo都指向相同的函数。然而，根据sayFoo()从哪里(即:上下文)被调用，this的值不同。

下面是显式使用全局对象(即window)的相同的代码，或许有用吧。(译注：原文使用 head object 一词，是原作者所著书《JavaScript Enlightenment》里的用语，并不详见于其他地方，其意与全局变量 global object 完全相同。下面的翻译将所有的 head object 译为全局对象)

window.foo = 'foo';
window.myObject = {foo: 'I am myObject.foo'};
window.sayFoo = function() { ! console.log(this.foo); };
window.myObject.sayFoo = window.sayFoo;
window.myObject.sayFoo();
window.sayFoo();

确保你在传递函数时，或者有多个引用指向一个函数时，你明白this的值会随着你调用函数的上下文的不同而改变。

注意事项

• 除了this以外的所有变量以及参数都遵循词法作用域(Lexical Scoping)

嵌套函数里的this指向全局对象

你也许想知道，当this用在被另一个函数包含的函数里会发生什么。糟糕的是在ECMA 3里，this迷失了方向并指向了全局对象(浏览器的window对象)，而不是包含函数定义的对象。

下面的代码中，在func2和func3中的this迷失了方向，不是指向myObject，而是指向了全局对象。

var myObject = {
  func1:function() {
     console.log(this); //logs myObject
     varfunc2=function() {
        console.log(this); //logs window, and will do so from this point on 
        varfunc3=function() {
           console.log(this); //logs window, as it’s the head object
        }();
     }();
  }
};
 
myObject.func1();

好消息是这将会在ECMAScript 5里被修正。现在，你必须意识到这个困境，特别是当你开始将函数作为值传递给其他函数时。

考虑下面的代码，当将一个匿名函数传递到foo.func1时发生了什么。当一个匿名函数在foo.func1的内部调用(函数嵌套在函数中)，这个匿名函数中的this的值将会指向全局对象。

var foo = {
  func1:function(bar){
    bar(); //logs window, not foo
    console.log(this);//the this keyword here will be a reference to foo object
  }
};
 
foo.func1(function(){console.log(this)});

现在你应该不会忘记了：当包含this的函数嵌套在另一个函数中，或者在另一个函数的上下文中被调用时，this的值将总是指向全局对象(再说一次，这将会在ECMAScript 5里被修正)。

解决嵌套函数的问题

为了this的值不丢失，你可以简单地在父函数里使用作用域链来保存this的引用。下面的代码演示了怎么做，用一个叫做that的变量，并利用它的作用域，我们能更好保存上下文的轨迹。

var myObject = {
  myProperty:'Icanseethelight', 
    myMethod:function() {
   var that=this; //store a reference to this (i.e.myObject) in myMethod scope varhelperFunctionfunction(){//childfunction
   var helperFunction function() { //childfunction
      //logs 'I can see the light' via scope chain because that=this
           console.log(that.myProperty); //logs 'I can see the light'
           console.log(this); // logs window object, if we don't use "that"
        }();
    }
}
 
myObject.myMethod(); // invoke myMethod

控制this的值

this的值通常取决于函数被调用处的上下文(除了使用new关键字的情况以外，这方面稍后讨论)，但是你可以使用apply()和call()来定义调用函数时this指向的对象，以此覆盖/控制this的值。使用这些方法，就好像再说：“嘿，调用 X 函数，但是告诉它，用 Z 对象作为this的值”。这么做的话，JavaScript默认决定this值的方式就被覆盖了。

下面，我们创建了一个对象和一个函数。然后我们通过call()调用函数，以便让函数中this的值使用myObject作为其上下文。于是myFunction函数里的语句就会去填充myObject的属性而不是填充全局对象。我们就改变了(myFunction中的)this所指向的对象

var myObject = {};
 
var myFunction = function(param1, param2) {
  //setviacall()'this'points to my Object when function is invoked
  this.foo = param1;
  this.bar = param2;
  console.log(this); //logs Object{foo = 'foo', bar = 'bar'}
};
 
myFunction.call(myObject, 'foo', 'bar'); // invoke function, set this value to myObject
 
console.log(myObject) // logs Object {foo = 'foo', bar = 'bar'}

在上面的例子里，我们使用了call()，但也可以使用apply()。两者的不同之处在于如何将参数传递给函数。使用call()，参数仅使用逗号分隔。使用apply()，参数放在一个数组里传递。下面是相同的思路，但使用的是apply()。

var myObject = {};
 
var myFunction = function(param1, param2) {
  //set via apply(), this points to my Object when function is invoked 
  this.foo=param1;
  this.bar=param2;
  console.log(this); // logs Object{foo='foo', bar='bar'}
};
 
myFunction.apply(myObject, ['foo', 'bar']); // invoke function, set this value
console.log(myObject); // logs Object {foo = 'foo', bar = 'bar'}

这里你需要记住的是，你可以覆盖在一个函数作用域里JavaScript默认决定this值的方式。

在自定义构造函数中使用this关键字

当一个函数联合new关键字一起被调用时，this的值——就如同其在构造函数中的表示——指向对象实例本身。换种说法：在构造函数里，我们可以在对象被实际创建之前就通过this指代(控制)对象。这种情况下，this默认值的变化，与使用call()或apply()并没有什么不同。

下面，我们设置了一个Person的构造函数，并用this来指向将要被创建的对象。当Person的实例被创建，this.name将会指向新创建的对象，并用传递给构造函数的参数(name)的值，给新对象里的name属性赋值。

var Person = function(name) {
  this.name = name || 'johndoe'; // this will refer to the instanc ecreated 
}
 
var cody = new Person('Cody Lindley'); // create an instance, based on Person constructor
 
console.log(cody.name); // logs 'Cody Lindley'

当使用new关键字调用构造函数时this指向“即将被创建的对象”。如果我们没有使用new关键字，那么this的值将会是Person被调用的上下文——这里就是全局对象。让我们检验下这个脚本。

var Person = function(name) {
  this.name=name||'johndoe'; 
}
 
var cody = Person('Cody Lindley'); // notice we did not use 'new'
console.log(cody.name); // undefined, the value is actually set at window.name
console.log(window.name); // logs 'Cody Lindley'

prototype方法中的this指向一个构造实例

当函数被添加为构造函数的prototype属性时，这个函数里的this指向调用这个函数的实例。假设我们有一个自定义的Person()的构造函数，其需要人的全名(full name)作为参数。为了访问人的全名，我们将whatIsMyFullName方法添加到Person.prototype，这样，所有的的Person实例都继承了这个方法。当使用this时，这个方法就可以引用调用它的实例(以及这个实例的属性)。

这里我演示了两个Person对象的创建(cody和lisa)，以及继承来的包含this关键字的whatIsMyFullName方法如何访问实例。

var Person = function(x){
    if(x){this.fullName = x};
};
 
Person.prototype.whatIsMyFullName = function() {
    return this.fullName; // 'this' refers to the instance created from Person()
}
 
var cody = new Person('cody lindley');
var lisa = new Person('lisa lindley');
 
// call the inherited whatIsMyFullName method, which uses this to refer to the instance
console.log(cody.whatIsMyFullName(), lisa.whatIsMyFullName());
 
/* The prototype chain is still in effect, so if the instance does not have a 
fullName property, it will look for it in the prototype chain. 
Below, we add a fullName property to both the Person prototype and the Object 
prototype. See notes. */
 
Object.prototype.fullName = 'John Doe';
var john = new Person(); // no argument is passed so fullName is not added to instance
console.log(john.whatIsMyFullName()); // logs 'John Doe'

这里需要记住的是，当this关键字用在prototype对象的方法里时，其就指向实例。如果实例不包含那个属性，就开始原型查找(搜索查找原型链)。

注意事项

如果this所指向的实例或对象不包含被引用到的属性，那么这里适用任何原型查找都要使用的相同法则，沿着原型链(prototype chain)查找属性。所以在我们的例子里，如果我们的实例中不包含fullName属性，那么就会沿原型链查找fullName，先查找Person.prototype.fullName，然后是Object.prototype.fullName。

译后语

相当花时间，不过，值得~

BGM @ John Adorney - Beckoning