加深對 JavaScript This 的理解

JerryC發表於2017-07-15
JavaScript

歡迎來我的部落格閱讀：《加深對 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

相關文章