我们现在知道了每个函数的this是在运行的时候进行绑定的，完全取决于函数的调用位置，也就是该函数的调用方法。
关于调用位置
在理解this的绑定过程之前，我们了解一下调用位置，调用位置表示的是函数所被调用的位置，而不是其声明的位置。
如何知道函数的调用位置，最重要的是分析函数的调用栈（即为了到达当前执行位置所调用的所有函数）。那么调用位置就是当前正在执行函数的前一个调用中。
function baz() {
//当前的调用栈是baz
//当前的调用位置是全局作用域，即当前调用栈的前一个调用
console.log('baz');
bar();
}
function bar() {
//当前调用栈是 baz-->bar
//当前的调用位置是：baz
console.log('bar');
foo();
}
function foo() {
//当前的调用栈是baz --> bar --> foo
//当前调用位置是bar
}
baz(); //<-- baz的调用位置就是全局作用域
注意如上，我们是如何分析调用栈和调用位置的，因此这样决定了this的绑定。
关于绑定规则
接下来我们看下在函数的执行过程中，调用位置如何决定this的绑定对象。
-
默认绑定规则
最常见的函数调用类型是独立函数调用，如下：
function foo() {
console.log(this.a);
}
var a = 2;
foo(); //2
在上面的代码中，我们看到了输出的值为2，我们知道在全局作用域中声明的变量会变成是全局对象的一个属性。我们在调用foo()的时候，函数调用应用了this的默认绑定，因此this指向的是的全局对象。
为什么说是默认绑定呢？因为foo()的调用是不带有任何修饰的函数引用进行调用的，因此只能是使用默认绑定规则。
-
隐式绑定
另外一种需要考虑的规则是调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。
function foo() {
console.log(this.a);
}
var obj = {
a: 2,
foo: foo()
}
obj.foo(); //2
看上面的代码，注意无论直接在obj中定义foo函数还是先定义了foo函数，然后添加为obj的引用，这个函数严格来说都不属于obj对象。然而，调用位置会使用obj上下文来引用函数。
当函数引用有上下文对象时，隐式绑定会把函数调用中的this绑定到这个上下文对象中。所以上面的this.a和obj.a是一样的。
有一点值得注意的就是隐式丢失，就是被隐式绑定的函数会丢失其绑定对象而会应用默认绑定，从而将this绑定到全局作用域或者undefined上，这个要取决于是否是严格模式。
function foo() {
console.log(this.a);
}
var obj = {
a: 2,
foo: foo
}
var bar = obj.foo;
var a = 'oops global';
bar(); //'oops global
如上，bar是obj.foo的一个引用，但是实际上其引用的是foo的本身，因此此时的bar是不带有任何修饰符的函数调用，因此引用应用了默认绑定。
function foo() {
console.log(this.a);
}
function doFoo(fn) {
//其实引用的是foo
fn(); //<--调用位置
}
var obj = {
a: 2,
foo: foo
}
var a = 'oops global';
doFoo(obj.foo); //'oops global
参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式的赋值。
看到上面的例子，可以发现在日常使用回调函数丢失this的绑定是非常常见的。
-
显示绑定
前面的隐式绑定我们可以看到，函数的调用是通过一个对象内部的一个属性进行引用的，从而将this绑定到这个对象上。
这里我们先介绍两个方法apply()和call()，他们的第一个参数是一个对象，这个是给this准备的，这样在调用的时候可以将其绑定到this上。
function foo() {
console.log(this.a);
}
var obj = {
a: 2
}
foo.call(obj); //2
这个应该是比较好理解的，在通过call调用的时候，强制的把它的this绑定到obj上。
然而显示绑定仍然无法解决this丢失的问题。
function foo() {
console.log(this.a);
}
var obj = {
a: 2
}
var bar = function() {
foo.call(obj);
}
bar(); //2
setTimeout(bar, 200); //2
//硬绑定的bar不可以再修改它的this
bar.call(window); //2
如上我们用个函数包裹住foo，在函数体内部调用foo，并显示绑定了this到obj对象上，那么后面无论如何调用函数bar，但是foo的调用始终都是在obj上调用，这就是一种显示的硬绑定。
我们常用的Function.prototype.bind就是一种很好的内置方法。硬绑定的场景就是创建一个包裹函数，负责接受参数并返回值：
function foo(something) {
console.log(this.a, something);
return this.a + something;
}
var obj = {
a: 2
}
var bar = function() {
return foo.apply(obj, arguments);
}
var b = bar(3); // 2 3
console.log(b); //5
另一种方法就是创建一个可以重复使用的辅助函数：
function foo(something) {
console.log(this.a, something);
return this.a + something;
}
//简单的辅助绑定函数
function bind(fn, obj) {
return function() {
return fn.apply(obj, arguments);
}
}
var obj = {
a: 2
};
var bar = bind(foo, obj);
var b = bar(3); //2 3
console.log(b); //5
在ES5提供的bind方法中会返回一个硬编码的新函数，它会把你指定的参数设置为this的上下文并调用原始函数。
-API调用的上下文，你可以看到很多第三方库和JavaScript语言和宿主环境中许多新的内置函数，都提供了一个可选的参数，通常叫做'上下文'(context)，它的作用和bind一些样，确保你的回调函数使用指定的this。如下：
function foo(el) {
console.log(el, this.id);
}
var obj = {
id: 'awesome'
}
//调用foo时把this绑定到obj
[1,2,3].forEach(foo, obj);
//这些函数实际上就是通过call或者apply实现了显示的绑定。
-
new绑定
在JavaScript中平常所声明的一些函数其实也就是我们常说的构造函数，没有什么特别的区别。因为在JavaScript中所有的函数都可以通过new操作符进行调用，实际上并不存在什么所谓的构造函数，只有对函数的构造调用。
使用new操作符来调用函数的时候，会有下面的操作：
1. 创建一个全新的对象；
2. 这个新对象会被执行[[Prototype]]连接。
3. 这个新对象会绑定到函数调用的this。
4. 如果函数没有返回其它对象，那么new表达式中的函数调用会自动返回这个全新的对象。
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log(bar.a); //2
如上，使用new调用foo的时候，我们会创造一个新对象并把它绑定到foo调用中的this上。
小结
以上四种this的绑定规则我们已经介绍过了，我们要做的就是找到函数的调用位置并应用对应的调用规则就可以了。
绑定例外
如果将null或者是undefined作为this的绑定对象传入call、apply、bind，这些值在调用的时候会被忽略，实际上应用的是默认绑定规则。
function foo() {
console.log(this.a);
}
var a = 2;
foo.call(null); // 2
一般常见的做法是使用apply(...)来'展开'一个数组，并当做参数传入一个函数。类似的，bind(...)可以对参数进行柯里化（预先设置一些参数），这种方法有时候非常有用。
function foo() {
console.log("a:" + a, "b"+ b);
}
//把数组展开成参数
foo.apply(null, [2, 3]); //a: 2, b: 3
//使用bind进行柯里化
var bar = foo.bind(null, 2);
bar(3); //a: 2, b:3
更安全的this
更安全的this是传入一个空对象，把this绑定到这个对象上，不会对你的代码产生任何的副作用。
在JavaScript中创建一个空对的方法是Object.create(null)。该方法和{}很像，但是不会创建Object.prototype这个委托，所以可以说比{}更空。
function foo(a, b){
console.log('a:'+a, 'b:'+b);
}
//创建个空对象
var ø = Object.create(null);
//把数组展开成参数
foo.apply(ø, [2,3]); //a: 2, b:3
//使用bind进行柯里化
var bar = foo.bind(ø, 2);
bar(3); //a:2, b:3
间接引用
有的时候可能会创建一个函数的间接引用，那么在这种情况下，调用这个函数会应用默认规则。这种情况容易发生在赋值时候。
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;
p.foo(); //2
上面的赋值表达式返回的是目标函数的引用，因此调用位置是foo()而不是p.foo()或者o.foo()。
this词法
在ES6中，我们使用了更为简便的方法来实现函数，那就是箭头函数，它是根据外层函数或者全局作用域来实现this的绑定。
function foo() {
return (a) => {
console.log(this.a); //this继承自foo()
}
}
var obj1 = {
a: 2
}
var obj2 = {
a: 3
}
var bar = foo.call(obj1);
bar.call(obj2); //2 ,不是3
foo()内部创建的箭头函数会捕获调用foo()的this，由于foo()的this绑定到了obj1，bar的this也会绑定到obj1，箭头函数的绑定无法被修改。
网友评论