共计 4232 个字符，预计需要花费 11 分钟才能阅读完成。
前言：名字取得可能有点大，this 关键字是 JavaScript 中最复杂的机制之一。笔者也困扰已久，但自从阅读了《你不知道的 Javascript》以后豁然开朗，整理成文。如需更更详细的解释，请阅读《你不知道的 Javascript》第二部分第 1 章第 2 章。
绑定规则
默认绑定
最常用的函数调用类型：独立函数调用。可以把这条规则看作是无法应用 其他规则时的默认规则。
function foo() {
console.log(this.a);
}
var a = 2;
foo(); // 2
foo() 是直接使用不带任何修饰的函数引用进行调用的，因此只能使用 默认绑定，无法应用其他规则。ps: 不带任何修饰的函数的描述如果有疑惑的话请不要纠结，继续看下去就就会明白。
需要说明的一点是：如果使用严格模式（strict mode），那么全局对象将无法使用默认绑定，因此 this 会绑定 到 undefined：
function foo() {
“use strict”;
console.log(this.a);
}
var a = 2;
foo(); // TypeError: this is undefined
隐式绑定
另一条需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包 含，不过这种说法可能会造成一些误导。
function foo() {
console.log(this.a);
}
var obj = {
a: 2,
foo: foo
};
obj.foo(); // 2 此处 foo 里的 this 就是指的. 前面的对象
ps: 啰嗦两句，为什么 obj.foo() 可以执行, 这是一种属性的引用链的写法，因为 obj 和 foo 都挂在全局作用域上。如果还不明白再举一个例子。
function foo() {
console.log(this.a);
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42
对象属性引用链中只有最顶层或者说最后一层会影响调用位置. 此处也就是 obj2
这里说一个比较容易出错的地方:
function foo() {
console.log(this.a);
}
var obj = {
a: 2,
foo: foo
};
var a = “oops, global”; // a 是全局对象的属性
setTimeout(obj.foo, 100); // “oops, global
JavaScript 环境中内置的 setTimeout() 函数实现和下面的伪代码类似：
function setTimeout(fn,delay) {// 等待 delay 毫秒
fn(); // <– 调用位置！}
setTimeout 的参数 fn 可以看做调用时候传入的函数复制给 fn, 这个是挂在全局作用域上的 (此处的说法不严谨，很多时候框架的不同此处的 this 被绑定到哪儿很不确定). 所以，回调函数丢失 this 绑定是非常常见的。es6 的 => 很好的解决了这个问题。
显式绑定
JavaScript 提供的绝大多数函数以及你自 己创建的所有函数都可以使用 call(..) 和 apply(..) 方法。它们会把这个对象绑定到 this，接着在调用函数时指定这个 this。因为你可以直接指定 this 的绑定对象，因此我 们称之为显式绑定。
function foo() {
console.log(this.a);
}
var obj = {
a:2
};
foo.call(obj); // 2
通过 foo.call(..)，我们可以在调用 foo 时强制把它的 this 绑定到 obj 上。如果你传入了一个原始值（字符串类型、布尔类型或者数字类型）来当作 this 的绑定对 象，这个原始值会被转换成它的对象形式（也就是 new String(..)、new Boolean(..) 或者 new Number(..)）。这通常被称为“装箱”。
ps: 硬绑定只能执行一次，之后再绑别的都是绑不上去的。
由于硬绑定是一种非常常用的模式，所以在 ES5 中提供了内置的方法 Function.prototype. bind，它的用法如下：
function foo(something) {
console.log(this.a, something);
return this.a + something;
}
var obj = {
a:2
};
var bar = foo.bind(obj);
var b = bar(3); // 2 3
console.log(b); // 5
bind(..) 会返回一个硬编码的新函数，它会把参数设置为 this 的上下文并调用原始函数。
new 绑定
对于 js 的 new 初学者可能会把它和 JAVA 类的语言混淆首先我们重新定义一下 JavaScript 中的“构造函数”。在 JavaScript 中，构造函数只是一些 使用 new 操作符时被调用的函数。它们并不会属于某个类，也不会实例化一个类。实际上，它们甚至都不能说是一种特殊的函数类型，它们只是被 new 操作符调用的普通函数而已。
创建（或者说构造）一个全新的对象。
这个新对象会被执行 [[原型]] 连接。
这个新对象会绑定到函数调用的 this。
如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。
2 涉及到原型链的知识，本篇可忽视。
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2
使用 new 来调用 foo(..) 时，我们会构造一个新对象并把它绑定到 foo(..) 调用中的 this 上。new 是最后一种可以影响函数调用时 this 绑定行为的方法，我们称之为 new 绑定。
ps: 此处可能看得比较费解，请阅读《你不知道的 js》第二部的关于类与原型链的章节，还是比较复杂的，在此就不展开了。此处你可以理解为用函数 new 了一个新对象，然后绑定到 函数的 this 上使用。
在 new 中使用硬绑定函数的一般用处
主要目的是预先设置函数的一些参数，这样在使用 new 进行初始化时就可以只传入其余的参数。bind(..) 的功能之一就是可以把除了第一个 参数（第一个参数用于绑定 this）之外的其他参数都传给下层的函数（这种技术称为“部 分应用”，是“柯里化”的一种）。举例来说：
function foo(p1,p2) {
this.val = p1 + p2;
}
// 之所以使用 null 是因为在本例中我们并不关心硬绑定的 this 是什么
// 反正使用 new 时 this 会被修改
var bar = foo.bind(null, “p1”);
var baz = new bar(“p2”);
baz.val; // p1p2
优先级
我们可以根据优先级来判断函数在某个调用位置应用的是哪条规则。可以按照下面的 顺序来进行判断：(数值越小优先级越高)
1 函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。
var bar = new foo()
2 函数是否通过 call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是 指定的对象。
var bar = foo.call(obj2)
3 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上 下文对象。
var bar = obj1.foo()
4 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到 全局对象。
var bar = foo()
绑定例外
在某些场景下 this 的绑定行为会出乎意料，你认为应当应用其他绑定规则时，实际上应用 的可能是默认绑定规则。
被忽略的 this
如果你把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind，这些值 在调用时会被忽略，实际应用的是默认绑定规则.
间接引用
另一个需要注意的是，你有可能（有意或者无意地）创建一个函数的“间接引用”，在这 种情况下，调用这个函数会应用默认绑定规则。
function foo() {
console.log(this.a);
}
var a = 2;
var o = {a: 3, foo: foo};
var p = {a: 4};
o.foo(); // 3
(p.foo = o.foo)(); // 2
赋值表达式 p.foo = o.foo 的返回值是目标函数的引用，因此调用位置是 foo() 而不是 p.foo() 或者 o.foo()。
1
软绑定
用硬绑定之后就无法使用隐式绑定或者显式绑定来修改 this。如果可以给默认绑定指定一个全局对象和 undefined 以外的值，那就可以实现和硬绑定相 同的效果，同时保留隐式绑定或者显式绑定修改 this 的能力。
if (!Function.prototype.softBind) {
Function.prototype.softBind = function(obj) {
var fn = this; // 捕获所有 curried 参数
var curried = [].slice.call( arguments, 1);
var bound = function() {
return fn.apply(
(!this || this === (window || global)) ?obj : this
curried.concat.apply(curried, arguments)
);
};
bound.prototype = Object.create(fn.prototype);
return bound;
}; }
关于 => 有话说
箭头函数并不是使用 function 关键字定义的，而是使用被称为“胖箭头”的操作符 => 定 义的。箭头函数不使用 this 的四种标准规则，而是根据外层（函数或者全局）作用域来决 定 this。之前我们有说过 setTimeout 的 this 绑定丢失的问题 es6 和 es6 以前的解决办法如下，可以比较着看 es6：
function foo() {
setTimeout(() => { // 这里的 this 在此法上继承自 foo()
console.log(this.a); },100); }
var obj = {
a:2
};
foo.call(obj); // 2
es5
function foo() {
var self = this; // lexical capture of this
setTimeout(function(){console.log( self.a); }, 100 ); }
var obj = {
a: 2
};
foo.call(obj); // 2
ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定 this，具体来说，箭头函数会继承外层函数调用的 this 绑定（无论 this 绑定到什么）。这 其实和 ES6 之前代码中的 self = this 机制一样。
