深入淺出 JavaScript 中的 this_ZenDei技術網路在線

筆者最近在看你不知道的JavaScript上捲，裡面關於 this 的講解個人覺得非常精彩。JavaScript 中的 this 算是一個核心的概念，有一些同學會對其有點模糊和小恐懼，究其原因，現在對 this 討論的文章很多，讓我們覺得 this 無規律可尋，就像一個幽靈一樣如果你還沒弄懂 t ...

筆者最近在看你不知道的JavaScript上捲，裡面關於 this 的講解個人覺得非常精彩。JavaScript 中的 this 算是一個核心的概念，有一些同學會對其有點模糊和小恐懼，究其原因，現在對 this 討論的文章很多，讓我們覺得 this 無規律可尋，就像一個幽靈一樣

如果你還沒弄懂 this，或者對它比較模糊，這篇文章就是專門為你準備的，如果你相對比較熟悉了，那你也可以當做複習鞏固你的知識點

本篇文章，算是一篇讀書筆記，當然也加上了很多我的個人理解，我覺得肯定對大家有所幫助

執行上下文

在理解 this 之前，我們先來看下什麼是執行上下文

簡而言之，執行上下文是評估和執行 JavaScript 代碼的環境的抽象概念。每當 Javascript 代碼在運行的時候，它都是在執行上下文中運行

JavaScript 中有三種執行上下文類型

全局執行上下文 — 這是預設或者說基礎的上下文，任何不在函數內部的代碼都在全局上下文中。它會執行兩件事：創建一個全局的 window 對象（瀏覽器的情況下），並且設置 this 的值等於這個全局對象。一個程式中只會有一個全局執行上下文
函數執行上下文 — 每當一個函數被調用時, 都會為該函數創建一個新的上下文。每個函數都有它自己的執行上下文，不過是在函數被調用時創建的。函數上下文可以有任意多個
eval 函數執行上下文 — 執行在 eval 函數內部的代碼也會有它屬於自己的執行上下文，但由於 JavaScript 開發者並不經常使用 eval，所以在這裡我不會討論它

這裡我們先得出一個結論，非嚴格模式和嚴格模式中 this 都是指向頂層對象（瀏覽器中是window）

console.log(this === window); // true
'use strict'
console.log(this === window); // true
this.name = 'vnues';
console.log(this.name); // vnues

後面我們的討論更多的是針對函數執行上下文

this 到底是什麼？為什麼要用 this

this 是在運行時進行綁定的，並不是在編寫時綁定，它的上下文取決於函數調用時的各種條件

牢記：this 的綁定和函數聲明的位置沒有任何關係，只取決於函數的調用方式

當一個函數被調用時，會創建一個活動記錄(有時候也稱為執行上下文)。這個記錄會包含函數在哪裡被調用(調用棧)、函數的調用方法、傳入的參數等信息。this 就是記錄的其中一個屬性，會在函數執行的過程中用到

看個實例，理解為什麼要用 this，有時候，我們需要實現類似如下的代碼：

function identify(context) {
  return context.name.toUpperCase();
}
function speak(context) {
  var greeting = "Hello, I'm " + identify(context);
  console.log(greeting);
}
var me = {
  name: "Kyle"
};
speak(me); //hello, 我是 KYLE

這段代碼的問題，在於需要顯示傳遞上下文對象，如果代碼越來越複雜，這種方式會讓你的代碼看起來很混亂，用 this 則更加的優雅

var me = {
  name: "Kyle"
};

function identify() {
  return this.name.toUpperCase();
}
function speak() {
  var greeting = "Hello, I'm " + identify.call(this);
  console.log(greeting);
}
speak.call(me); // Hello, 我是 KYLE

this 的四種綁定規則

下麵我們來看在函數上下文中的綁定規則，有以下四種

預設綁定
隱式綁定
顯式綁定
new 綁定

預設綁定

最常用的函數調用類型：獨立函數調用，這個也是優先順序最低的一個，此事 this 指向全局對象。註意：如果使用嚴格模式(strict mode)，那麼全局對象將無法使用預設綁定，因此 this 會綁定到 undefined，如下所示

var a = 2;  //  變數聲明到全局對象中
function foo() {
  console.log(this.a);   // 輸出 a
}

function bar() {
  'use strict';
  console.log(this); // undefined
}
foo();
bar();

隱式綁定

還可以我們開頭說的：this 的綁定和函數聲明的位置沒有任何關係，只取決於函數的調用方式

先來看一個例子：

  function foo() {
    console.log(this.a);
  }
  var obj = {
    a: 2,
    foo: foo
  };
  obj.foo(); // 2

當調用 obj.foo() 的時候，this 指向 obj 對象。當函數引用有上下文對象時，隱式綁定規則會把函數調用中的 this 綁定到這個上下文對象。因為調用 foo() 時 this 被綁定到 obj，因此 this.a 和 obj.a 是一樣的

記住：對象屬性引用鏈中只有最頂層或者說最後一層會影響調用位置

    function foo() {
      console.log(this.a);
    }
    var obj2 = {
      a: 42,
      foo: foo
    };
    var obj1 = {
      a: 2,
      obj2: obj2
    };
    obj1.obj2.foo(); // 42

間接引用

另一個需要註意的是，你有可能(有意或者無意地)創建一個函數的“間接引用”，在這種情況下，調用這個函數會應用預設綁定規則

function foo() {
  console.log(this.a);
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2

另一個需要註意的是，你有可能(有意或者無意地)創建一個函數的“間接引用”，在這種情況下，調用這個函數會應用預設綁定規則

賦值表達式 p.foo = o.foo 的返回值是目標函數的引用，因此調用位置是 foo() 而不是 p.foo() 或者 o.foo()。根據我們之前說過的，這裡會應用預設綁定

顯示綁定

在分析隱式綁定時，我們必須在一個對象內部包含一個指向函數的屬性，並通過這個屬性間接引用函數，從而把 this 間接(隱式)綁定到這個對象上。那麼如果我們不想在對象內部包含函數引用，而想在某個對象上強制調用函數，該怎麼
做呢?

Javascript 中提供了 apply 、call 和 bind 方法可以讓我們實現

不同之處在於，call() 和 apply() 是立即執行函數，並且接受的參數的形式不同：

call(this, arg1, arg2, ...)
apply(this, [arg1, arg2, ...])

而 bind() 則是創建一個新的包裝函數，並且返回，而不是立刻執行

bind(this, arg1, arg2, ...)

看如下的例子：

  function foo(b) {
    console.log(this.a + '' + b);
  }
  var obj = {
    a: 2,
    foo: foo
  };
  var a = 1;
  foo('Gopal'); // 1Gopal
  obj.foo('Gopal'); // 2Gopal
  foo.call(obj, 'Gopal'); // 2Gopal
  foo.apply(obj, ['Gopal']); // 2Gopal
  let bar = foo.bind(obj, 'Gopal');
  bar(); // 2Gopal

被忽略的 this

如果你把 null 或者 undefined 作為 this 的綁定對象傳入 call、apply 或者 bind，這些值在調用時會被忽略，實際應用的是預設綁定規則

function foo() {
  console.log(this.a);
}
var a = 2;
foo.call(null); // 2

利用這個用法使用 apply(..) 來“展開”一個數組，並當作參數傳入一個函數。
類似地，bind(..) 可以對參數進行柯里化(預先設置一些參數)

  function foo(a, b) {
    console.log("a:" + a + ", b:" + b);
  }
  // 把數組“展開”成參數
  foo.apply(null, [2, 3]); // a:2, b:3
  // 使用 bind(..) 進行柯里化
  var bar = foo.bind(null, 2);
  bar(3); // a:2, b:3

new綁定

當我們使用構造函數 new 一個實例的時候，這個實例的 this 指向是什麼呢？

我們先來看下使用 new 來調用函數，或者說發生構造函數調用時，會執行什麼操作，如下：

創建(或者說構造)一個全新的對象
這個新對象會被執行[[原型]]連接，將對象（實例）的 __proto__ 和構造函數的 prototype 綁定
這個新對象會綁定到函數調用的 this
如果函數沒有返回其他對象，那麼new表達式中的函數調用會自動返回這個新對象

原理實現類似如下：

function create (ctr) {
    // 創建一個空對象
    let obj = new Object()
    // 鏈接到構造函數的原型對象中
    let Con = [].shift.call(arguments)
    obj.__proto__ = Con.prototype
    // 綁定this
    let result = Con.apply(obj, arguments);
    // 如果返回是一個對象，則直接返回這個對象，否則返回實例
    return typeof result === 'object'? result : obj;
}

註意：let result = Con.apply(obj, arguments); 實際上就是指的是新對象會綁定到函數調用的 this

  function Foo(a) {
    this.a = a;
  }
  var bar = new Foo(2);
  console.log(bar.a); // 2

特殊情況——箭頭函數

我們之前介紹的四條規則已經可以包含所有正常的函數。但是 ES6 中介紹了一種無法使用這些規則的特殊函數類型：箭頭函數

箭頭函數不使用 this 的四種標準規則，而是根據定義時候的外層(函數或者全局)作用域來決定 this。也就是說箭頭函數不會創建自己的 this,它只會從自己的作用域鏈的上一層繼承 this

function foo() {
  // 返回一個箭頭函數
  // this 繼承自 foo()
  return (a) => {
    console.log(this.a);
  }
};

var obj1 = {
  a: 2
};
var obj2 = {
  a: 3
};
var bar = foo.call(obj1);
bar.call(obj2); // 2, 不是 3 !

foo() 內部創建的箭頭函數會捕獲調用時 foo() 的 this。由於 foo() 的 this 綁定到 obj1， bar(引用箭頭函數)的 this 也會綁定到 obj1，箭頭函數的綁定無法被修改。(new 也不行!)

總結——this 優先順序

判斷是否為箭頭函數，是則按照箭頭函數的規則

否則如果要判斷一個運行中函數的 this 綁定，就需要找到這個函數的直接調用位置。找到之後就可以順序應用下麵這四條規則來判斷 this 的綁定對象

由 new 調用?綁定到新創建的對象
由 call 或者 apply(或者 bind)調用?綁定到指定的對象
由上下文對象調用?綁定到那個上下文對象
預設:在嚴格模式下綁定到 undefined，否則綁定到全局對象

如下圖所示：

深入淺出 JavaScript 中的 this