加深对 JavaScript This 的理解

欢迎来个人博客阅读：《加深对 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 来调用函数，会自动执行下面操做：

1. 建立一个全新的对象。
2. 这个新对象会被执行 [[Prototype]] 链接。
3. 这个新对象会绑定到函数调用的 this。
4. 若是函数没有返回其余对象，那么 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 就是这个记录的一个属性，会在函数执行的过程当中用到。

参考

《You Dont Know JS》- this & Object Prototypes