揭祕JavaScript中謎一樣的this

在這篇文章裡我想闡明JavaScript中的this，希望對你理解this的工作機制有一些幫助。作為JavaScript程式設計師學習this對於你的發展有很大幫助，可以說利大於弊。這篇文章的靈感來自於我最近的工作——我即將完成的書的最後章節——JavaScript 應用程式設計（JavaScript Application Design）（注意:現在你可以購買早期版本），我寫的是關於scope工作原理的方面。

似是而非，這可能是你對this的感覺：

很瘋狂，不是嗎?在這篇短文，我旨在揭開它的神祕面紗。

this的工作原理

如果一個函式被作為一個物件的方法呼叫，那麼this將被指派為這個物件。

var parent = {
    method: function () {
        console.log(this);
    }
};

parent.method();
// <- parent

注意這種行為非常“脆弱”，如果你獲取一個方法的引用並且呼叫它，那麼this的值不會是parent了，而是window全域性物件。這讓大多數開發者迷惑。

var parentless = parent.method;

parentless();
// <- Window

底線是你應該檢視呼叫鏈去理解被呼叫函式是一個物件的屬性還是它自己。如果它被作為屬性呼叫，那麼this的值將變成該屬性的物件，否則this的值將被指派為全域性物件或window。如果在嚴格模式下，this的值將是undefined。

在被當作建構函式的情況下，當使用new關鍵字時，this將被指派為被建立的例項物件。

function ThisClownCar () {
  console.log(this);
}

new ThisClownCar();
// <- ThisClownCar {}

注意在這種情況下沒有辦法識別出一個函式是否應該被用作建構函式，從而省略new關鍵字this的結果將是全域性物件，就像我們上面看到的沒有用parent呼叫的例子。

ThisClownCar();
// <- Window

篡改this

.call，.apply和.bind方法被用來操作呼叫函式的方式，幫我們定義this的值和傳遞給函式的引數值。

Function.prototype.call 可以有任意數量的引數，第一個引數被分配給this，剩下的被傳遞給呼叫函式。

Array.prototype.slice.call([1, 2, 3], 1, 2)
// <- [2]

Function.prototype.apply 的行為和.call類似，但它傳遞給函式的引數是一個陣列而不是任意引數。

String.prototype.split.apply('13.12.02', ['.'])
// <- ['13', '12', '02']

Function.prototype.bind 建立一個特殊的函式，該函式將永遠使用傳遞給.bind的引數作為this的值，以及能夠分配部分引數，建立原函式的珂里化（currided)版本。

var arr = [1, 2];
var add = Array.prototype.push.bind(arr, 3);

// effectively the same as arr.push(3)
add();

// effectively the same as arr.push(3, 4)
add(4);

console.log(arr);
// <- [1, 2, 3, 3, 4]

作用域鏈中的this

在下面的例子，this將無法在作用域鏈中保持不變。這是規則的缺陷，並且常常會給業餘開發者帶來困惑。

function scoping () {
  console.log(this);

  return function () {
    console.log(this);
  };
}

scoping()();
// <- Window
// <- Window

一個常見的方法是建立一個區域性變數保持對this的引用，並且在子作用域中不能有同命變數。子作用域中的同名變數將覆蓋父作用域中對this的引用。

function retaining () {
  var self = this;

  return function () {
    console.log(self);
  };
}

retaining()();
// <- Window

除非你真的想同時使用父作用域的this,以及當前this值，由於某些莫名其妙的原因,我更喜歡是使用的方法.bind函式。這可以用來將父作用域的this指定給子作用域。

function bound () {
  return function () {
    console.log(this);
  }.bind(this);
}

bound()();
// <- Window

其他問題？

你是否有任何關於this的問題？關於this怎樣？請讓我知道如果你認為我錯過了任何其他邊界情況或優雅的解決方案。

如果你喜歡這篇文章,一定要看看我即將到來的書JavaScript應用程式設計:構建第一種方法（ JavaScript Application Design: A Build First Approach）,您可以訪問購買早期版本的連結。

譯者注

本文為翻譯文章，原文“Demystifying this in JavaScript”

支援我繼續工作下去吧。

我的部落格 更多內容請點選這裡。