加深對 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