欢迎来我的博客浏览：《加深对 JavaScript This 的邃晓》
我相信你已看过许多关于 JavaScript 的 this 的议论了，既然你点进来了，无妨继承看下去，看是否能帮你加深对 this 的邃晓。
近来在看 《You Dont Know JS》 这本书，不得叹息，就算用了 JS 许多年的老前端来看这本书，我以为照样会有不少的收成。
个中关于 this 的解说，更是加深了我对 this 的邃晓，故整顿学问点，再加上本身的邃晓，以本身的言语来形貌。
对读者来讲，算是二手学问，这本书是开源的，能够到本书的 Github 项目地点进修一手的学问。
起首有一句人人都邃晓的话，我照样要强调一遍：
「this 是在函数被挪用时发作的绑定，它指向什么完整取决于函数在那里被挪用。」
这句话很重要，这是邃晓 this 道理的基本。
而在解说 this 之前，先要邃晓一下作用域的相干观点。
「词法作用域」与「动态作用域」
平常来讲，作用域一共有两种重要的事情模子。
- 词法作用域
- 动态作用域
词法作用域是大多数编程言语所采纳的情势，而动态作用域仍有一些编程言语在用，比方 Bash 剧本。
而 JavaScript 就是采纳的词法作用域，也就是在编程阶段，作用域就已明白下来了。
思索下面代码：
function foo(){
console.log(a); // 输出 2
}
function bar(){
let a = 3;
foo();
}
let a = 2;
bar()由于 JavaScript 所用的是词法作用域，天然 foo() 声明的阶段，就已肯定了变量 a 的作用域了。
倘使，JavaScript 是采纳的动态作用域，foo() 中打印的将是 3
function foo(){
console.log(a); // 输出 3 （不是 2）
}
function bar(){
let a = 3;
foo();
}
let a = 2;
bar()而 JavaScript 的 this 机制跟动态作用域很类似，是在运行时在被挪用的处所动态绑定的。
this 的四种绑定划定规矩
在 JavaScript 中，影响 this 指向的绑定划定规矩有四种：
- 默许绑定
- 隐式绑定
- 显式绑定
- new 绑定
默许绑定
这是最直接的一种体式格局，就是不加任何的修饰符直接挪用函数，如：
function foo() {
console.log(this.a) // 输出 a
}
var a = 2; // 变量声明到全局对象中
foo();运用 var 声明的变量 a，被绑定到全局对象中，假如是浏览器，则是在 window 对象。foo() 挪用时，引用了默许绑定，this 指向了全局对象。
隐式绑定
这类状况会发作在挪用位置存在「上下文对象」的状况，如：
function foo() {
console.log(this.a);
}
let obj1 = {
a: 1,
foo,
};
let obj2 = {
a: 2,
foo,
}
obj1.foo(); // 输出 1
obj2.foo(); // 输出 2当函数挪用的时刻，具有上下文对象的时刻，this 会被绑定到该上下文对象。
正如上面的代码，obj1.foo() 被挪用时，this 绑定到了 obj1,
而 obj2.foo() 被挪用时，this 绑定到了 obj2。
显式绑定
这类就是运用 Function.prototype 中的三个要领 call(), apply(), bind() 了。
这三个函数，都能够转变函数的 this 指向到指定的对象，
差别之处在于，call() 和 apply() 是马上实行函数，而且吸收的参数的情势差别：
call(this, arg1, arg2, ...)apply(this, [arg1, arg2, ...])
而 bind() 则是建立一个新的包装函数，而且返回，而不是马上实行。
bind(this, arg1, arg2, ...)
apply() 吸收参数的情势，有助于函数嵌套函数的时刻，把 arguments 变量通报到下一层函数中。
思索下面代码：
function foo() {
console.log(this.a); // 输出 1
bar.apply({a: 2}, arguments);
}
function bar(b) {
console.log(this.a + b); // 输出 5
}
var a = 1;
foo(3);上面代码中， foo() 内部的 this 遵照默许绑定划定规矩，绑定到全局变量中。
而 bar() 在挪用的时刻，挪用了 apply() 函数，把 this 绑定到了一个新的对象中 {a: 2}，而且一成不变的吸收 foo() 吸收的函数。
new 绑定
末了一种，则是运用 new 操纵符会发生 this 的绑定。
在邃晓 new 操纵符对 this 的影响，起首要邃晓 new 的道理。
在 JavaScript 中，new 操纵符并不像其他面向对象的言语一样，而是一种模仿出来的机制。
在 JavaScript 中，一切的函数都能够被 new 挪用，这时刻这个函数平常会被称为「组织函数」，实际上并不存在所谓「组织函数」，更确实的邃晓应该是关于函数的「组织挪用」。
运用 new 来挪用函数，会自动实行下面操纵：
- 建立一个全新的对象。
- 这个新对象会被实行 [[Prototype]] 衔接。
- 这个新对象会绑定到函数挪用的 this。
- 假如函数没有返回其他对象，那末 new 表达式中的函数挪用会自动返回这个新对象。
所以假如 new 是一个函数的话，会是这模样的：
function New(Constructor, ...args){
let obj = {}; // 建立一个新对象
Object.setPrototypeOf(obj, Constructor.prototype); // 衔接新对象与函数的原型
return Constructor.apply(obj, args) || obj; // 实行函数，转变 this 指向新的对象
}
function Foo(a){
this.a = a;
}
New(Foo, 1); // Foo { a: 1 }所以，在运用 new 来挪用函数时刻，我们会组织一个新对象并把它绑定到函数挪用中的 this 上。
优先级
假如一个位置发作了多条转变 this 的划定规矩，那末优先级是怎样的呢？
看几段代码：
// 显式绑定 > 隐式绑定
function foo() {
console.log(this.a);
}
let obj1 = {
a: 2,
foo,
}
obj1.foo(); // 输出 2
obj1.foo.call({a: 1}); // 输出 1这说明「显式绑定」的优先级大于「隐式绑定」
// new 绑定 > 显式绑定
function foo(a) {
this.a = a;
}
let obj1 = {};
let bar = foo.bind(obj1);
bar(2);
console.log(obj1); // 输出 {a:2}
let obj2 = new bar(3);
console.log(obj1); // 输出 {a:2}
console.log(obj2); // 输出 foo { a: 3 }这说明「new 绑定」的优先级大于「显式绑定」
而「默许绑定」，毫无疑问是优先级最低的。
所以优先级递次为：
「new 绑定」 > 「显式绑定」 > 「隐式绑定」 > 「默许绑定。」
所以，this 究竟是什么
this 并非在编写的时刻绑定的，而是在运行时绑定的。它的上下文取决于函数挪用时的种种前提。this 的绑定和函数声明的位置没有任何关系，只取决于函数的挪用体式格局。
当一个函数被挪用时，会建立一个「实行上下文」，这个上下文会包括函数在那里被挪用（挪用栈）、函数的挪用体式格局、传入的参数等信息。this 就是这个纪录的一个属性，会在函数实行的过程当中用到。
