this

语法

this

talk about “this”

方法和this关键字是面向对象编程范例的核心。任何函数只要作为方法调用实际上都会传入一个隐式的实参——这个实参是一个对象，方法调用的母体就是这个对象，这个对象就可以用this表示，基于这个对象的方法可以执行多种操作，函数中的所有操作都将基于这个对象。

与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别，绝大多数情况下在函数内部，函数的调用方式决定了this关键字的值。

this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值，而不用考虑函数如何被调用的，ES2015 引入了支持this词法解析的箭头函数（它在闭合的执行环境内设置this的值）。

全局环境

无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指代全局对象。

函数（运行内）环境

前面说过在函数内部，函数的调用方式决定了this关键字的值，下面来一个个看看。

简单调用

不在严格模式下，this 的值不是由该调用设置的，所以 this 的值默认指向全局对象 window。然而，在严格模式"function b（）下"，如果 this 没有被执行环境（execution context）定义，那它将保持为 undefined，this将保持他进入执行环境时的值，所以下面的this将会默认为undefined。

如果要想把 this 的值从一个环境传到另一个，就要用 call 或者apply 方法。

当一个函数在其主体中使用 this 关键字时，可以通过使用函数继承自Function.prototype 的 call 或 apply 方法将 this 值绑定到调用中的特定对象。

使用 call 和 apply 函数的时候要注意，如果传递给 this 的值不是一个对象，JavaScript 会尝试使用内部 ToObject 操作将其转换为对象。因此，如果传递的值是一个原始值比如 7 或 ‘烤串’，那么就会使用相关构造函数将它转换为对象，所以原始值 7 会被转换为对象，像 new Number(7) 这样，而字符串 ‘烤串’ 转化成 new String(‘烤串’) 这样，例如：

bind方法

ECMAScript 5 引入了 Function.prototype.bind。调用e.bind(someObject)会创建一个与e具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

箭头函数

在箭头函数中，this与封闭词法环境的this保持一致。在全局代码中，它将被设置为全局对象：

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true

// 接着上面的代码
// 作为对象的一个方法调用
var obj = {foo: foo};
console.log(obj.foo() === globalObject); // true

// 尝试使用call来设定this
console.log(foo.call(obj) === globalObject); // true

// 尝试使用bind来设定this
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

无论如何，foo 的 this 被设置为他被创建时的环境（在上面的例子中，就是全局对象）。这同样适用于在其他函数内创建的箭头函数：这些箭头函数的this被设置为封闭的词法环境的。

// 创建一个含有bar方法的obj对象，
// bar返回一个函数，
// 这个函数返回this，
// 这个返回的函数是以箭头函数创建的，
// 所以它的this被永久绑定到了它外层函数的this。
// bar的值可以在调用中设置，这反过来又设置了返回函数的值。
var obj = {
  bar: function() {
    var x = (() => this);
    return x;
  }
};

// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。
// 将返回的函数的引用赋值给fn。
var fn = obj.bar();

// 直接调用fn而不设置this，
// 通常(即不使用箭头函数的情况)默认为全局对象
// 若在严格模式则为undefined
console.log(fn() === obj); // true

// 但是注意，如果你只是引用obj的方法，
// 而没有调用它
var fn2 = obj.bar;
// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
console.log(fn2()() == window); // true

在上面的例子中，一个赋值给了 obj.bar的函数（称为匿名函数 A），返回了另一个箭头函数（称为匿名函数 B）。因此，在 A 调用时，函数B的this被永久设置为obj.bar（函数A）的this。当返回的函数（函数B）被调用时，它this始终是最初设置的。在上面的代码示例中，函数B的this被设置为函数A的this，即obj，所以即使被调用的方式通常将其设置为 undefined 或全局对象（或者如前面示例中的其他全局执行环境中的方法），它的 this 也仍然是 obj 。#

作为对象的方法

当函数作为对象里的方法被调用时，它们的 this 是调用该函数的对象。

请注意，这样的行为，根本不受函数定义方式或位置的影响。在前面的例子中，我们在定义对象e的同时，将函数内联定义为成员 f 。但是，我们也可以先定义函数，然后再将其附属到e.f。这样做会导致相同的行为, 如下：

var e = {prop: 37};

function independent() {
  return this.prop;
}

e.f = independent;

console.log(e.f()); // logs 37

这表明函数是从e的f成员调用的才是重点。

e.b = {g: independent, prop: 42};
console.log(e.b.g()); // 42

同样，this 的绑定只受最靠近的成员引用的影响。在上面的这个例子中，我们把一个方法g当作对象e.b的函数调用。在这次执行期间，函数中的this将指向e.b。事实证明，这与他是对象 e的成员没有多大关系，最靠近的引用才是最重要的，所以得到的结果是42。

原型链中的 this

对于在对象原型链上某处定义的方法，同样的概念也适用。如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象，就像该方法在对象上一样。

在这个例子中，对象p没有属于它自己的f属性，它的f属性继承自它的原型。虽然在对 f 的查找过程中，最终是在 e 中找到 f 属性的，这并没有关系；查找过程首先从 p.f 的引用开始，所以函数中的 this 指向p。也就是说，因为f是作为p的方法调用的，所以它的this指向了p。这是 JavaScript 的原型继承中的一个有趣的特性。

getter 与 setter 中的 this

同样，用作 getter 或 setter 的函数会把 this 绑定到设置或获取属性的对象。

作为构造函数

当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。

声明：虽然构造器返回的默认值是this所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回this对象）。

构造函数这样工作:
function e(){
函数实体
根据需要在this上创建属性，然后赋值给它们，比如：
this.f = “mark”;
…

如果函数具有返回对象的return语句，
则该对象将是 new 表达式的结果。
否则，表达式的结果是当前绑定到 this 的对象。
（即通常看到的常见情况）。
}

在上面的例子中（f），因为在调用构造函数的过程中，手动的设置了返回对象，与this绑定的默认对象被丢弃了。（这基本上使得语句 “this.a = 22;”成了“僵尸”代码，实际上并不是真正的“僵尸”，这条语句执行了，但是对于外部没有任何影响，因此完全可以忽略它）。

作为一个DOM事件处理函数

当函数被用作事件处理函数时，它的this指向触发事件的元素（部分浏览器在使用非addEventListener的函数动态添加监听函数时不遵守这个约定）。

// 被调用时，将关联的元素变成蓝色
function bluify(e){
  console.log(this === e.currentTarget); // 总是 true

  // 当 currentTarget 和 target 是同一个对象时为 true
  console.log(this === e.target);        
  this.style.backgroundColor = 'blue';
}

// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');

// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
  elements[i].addEventListener('click', bluify, false);
}

作为一个内联事件处理函数

当代码被内联on-event 处理函数调用时，它的this指向监听器所在的DOM元素：

<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>

屌不屌？
上面的 alert 会显示button。注意只有外层代码中的this是这样设置的：

<button onclick="alert((function(){return this})());">
  Show inner this
</button>

在这种情况下，没有设置内部函数的this，所以它指向 global/window 对象（即非严格模式下调用的函数未设置this时指向的默认对象）。