揭秘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”

來自：http://blogread.cn/it/article/7319?f=hot1