前言
前段时间，看了《你不知道的JavaScript》中this的全面解析，讲的特别好，还没看过的小伙伴抓紧去学习，在这边特意整理总结了一波，一起分享学习。在这之前可以先理解一下关于this、call、applay和bind这篇文章。
调用栈
在了解this绑定原理之前，首页要先了解JavaScript的执行栈。（执行栈也叫做调用栈）如果对调用栈还不了解，可以先详细了解深入浅出JavaScript执行上下文和执行栈。
JavaScript是单线程的，所有这决定了同一时间只能做一件事情，其他的活动或事情只能排队等候了，于是就生成出一个等候队列的执行栈（Execution Stack）。简单来说，执行栈就是为了到达当前执行位置所调用的所有函数。而调用位置就在当前正在执行的函数的前一个调用中。
function baz() {
// 当前执行栈是：baz
// 调用位置是baz前一个调用中，因此是全局作用域
console.log('baz');
bar();
}
function bar() {
// 当前执行栈是：bar
// 调用位置是bar前一个调用中，因此是baz
onsole.log('bar');
}
baz() // baz的调用位置
根据上面的规则，则不难判断出上述代码的调用栈和调用位置。而调用栈和调用位置则决定了this的绑定对象。其绑定规则有四种，只有找到调用位置，才能判断需要应用四条规则中的哪一条。
默认绑定
在非严格模式下，this指向全局对象，严格模式下this则会指向undefined
function foo() {
console.log(this.a); // this指向全局对象
}
var a = 2;
foo(); // 2
function foo2() {
"use strict"; // 严格模式this绑定到undefined
console.log(this.a);
}
foo2(); // TypeError:a undefined
但是如果在严格模式下调用其他函数，则不影响默认绑定。
function foo() {
console.log(this.a); // foo函数不是严格模式 默认绑定全局对象
}
var a = 2;
function foo2(){
"use strict";
foo(); // 严格模式下调用其他函数，不影响默认绑定
}
foo2();
上述为独立的函数调用，其调位位置为全局作用域，所有this绑定在全局作用域上。
隐式绑定
函数在调用位置，是否有上下文对象，如果有，那么this就会隐式绑定到这个对象上。
也可以简单理解为是否被某个对象包含了。
function foo() {
console.log(this.a);
}
var a = "Oops, global";
let obj2 = {
a: 2,
foo: foo
};
let obj1 = {
a: 22,
obj2: obj2
};
obj2.foo(); // 2 this指向调用函数的对象
obj1.obj2.foo(); // 2 this指向最后一层调用函数的对象
// 隐式绑定丢失
let bar = obj2.foo; // bar只是一个函数别名 是obj2.foo的一个引用
bar(); // "Oops, global" - 指向全局
上述代码中函数foo调用位置在obj2上下文中，所有this绑定在obj2作用域中,所以obj2.foo()、obj1.obj2.foo()最终都为2，而let bar = obj2.foo实际上就是函数的引用赋给变量bar，调用时，并没有上下文对象，所以会导致隐式绑定丢失。
显式绑定
通过apply、call、bind将函数中的this强制绑定到指定对象上。
function foo() {
console.log(this.a);
}
let obj = {
a: 2
};
foo.call(obj); // 2
需要注意的是：
- 如果传入了一个原始值(字符串,布尔类型，数字类型)，来当做
this的绑定对象，这个原始值会转换成它的对象形式。 - 如果把
null或者undefined作为this的绑定对象传入call、apply、bind，这些值会在调用时被忽略，实际应用的是默认绑定规则。
new绑定
如果对
new关键字不太了解，可以先看这篇关于new命令。
使用构造调用的时候，this会自动绑定在new期间创建的对象上。
function foo(a) {
this.a = a; // this绑定到bar上
}
let bar = new foo(2);
console.log(bar.a); // 2
四种绑定规则的优先级
- 显式绑定 > 隐式绑定 > 默认绑定
- new绑定 > 隐式绑定 > 默认绑定
function foo() {
this.a = 100;
}
var obj1 ={
foo: foo;
}
var obj2 = {}
obj1.foo.call(obj2, 2); // 2 this指向obj2 显式绑定比隐式绑定优先级高。
new obj1.foo(4); // thsi指向new新创建的对象 new绑定比隐式绑定优先级高。
显式绑定和new绑定无法直接比较(会报错),默认绑定是不应用其他规则之后的兜底绑定所以优先级最低。
箭头函数this指向
箭头函数this不会使用这四条绑定规则。
function foo() {
return (a) => {
// this继承自foo
console.log(this.a);
};
}
let obj1 = {
a: 2
};
let obj2 = {
a: 3
};
let bar = foo.call(obj1); // foo this指向obj1
bar.call(obj2); // 输出2 这里执行箭头函数 并试图绑定this指向到obj2
从上述可以得出，箭头函数的this规则：
- 箭头函数中的
this继承于它外面第一个不是箭头函数的函数的this指向。如果没有则指向全局。 - 箭头函数的
this一旦绑定了上下文，就不会被任何代码改变。
小结
如果要判断一个运行中函数this绑定，就需要找到这个函数直接调用位置。找到之后就可以顺序应用下面四条规则来判读this绑定对象。
- 有
new调用，绑定到新创建对象。 - 由
call或者apply、bind调用，绑定到指定对象。 - 由上下文对象调用，绑定到那个上下文对象。
- 默认：在严格模式绑定到
undefined，否则绑定到全局
箭头并不适用与上述四条规则，而是由他的外层函数继承而来。
更多优质文章可以访问GitHub博客，欢迎帅哥美女前来Star！！！
