本文解釋JavaScript中的this,希望有助你理解this的工作機制。作為JavaScript程序員,學習this對于你的發展有很大幫助,可以說利大于弊。
this的工作原理
如果一個函數被作為一個對象的方法調用,那么this將被指派為這個對象。
var parent = { method: function () { console.log(this); } }; parent.method(); //
注意這種行為非常“脆弱”,如果你獲取一個方法的引用并且調用,那么this的值不會是parent了,而是window全局對象。這讓大多數開發者迷惑。
var parentless = parent.method; parentless(); //
底線是你應該查看調用鏈,以理解被調用函數是一個對象的屬性還是它自己。如果它被作為屬性調用,那么this的值將變成該屬性的對象,否則this的值將被指派為全局對象或window。如果在嚴格模式下,this的值將是undefined。
在被當作構造函數的情況下,當使用new關鍵字時,this將被指派為被創建的實例對象。
function ThisClownCar () { console.log(this); } new ThisClownCar(); //
注意,在這種情況下沒有辦法識別出一個函數是否應該被用作構造函數,因此省略new關鍵字導致this的結果將是全局對象,就像我們上面看到的沒有用parent調用的例子。
ThisClownCar(); //
改動this
.call
、?.apply?
和.bind
?方法用來操作調用函數的方式,幫我們定義this的值和傳遞給函數的參數值。
Function.prototype.call 可以有任意數量的參數,第一個參數被分配給this,剩下的被傳遞給調用函數。
Array.prototype.slice.call([1, 2, 3], 1, 2) //
Function.prototype.apply 的行為和.call類似,但它傳遞給函數的參數是一個數組,而不是任意參數。
String.prototype.split.apply('13.12.02', ['.']) //
Function.prototype.bind 創建一個特殊的函數,該函數將永遠使用傳遞給.bind的參數作為this的值,以及能夠分配部分參數,創建原函數的珂里化(curride)版本。
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); //
作用域鏈中的this
在下面的例子,this將無法在作用域鏈中保持不變。這是規則的缺陷,并且常常會給業余開發者帶來困惑。
function scoping () { console.log(this); return function () { console.log(this); }; } scoping()(); //
有一個常見的方法,創建一個局部變量保持對this的引用,并且在子作用域中不能有同命變量。子作用域中的同名變量將覆蓋父作用域中對this的引用。
function retaining () { var self = this; return function () { console.log(self); }; } retaining()(); //
除非你真的想同時使用父作用域的this,以及當前this值,由于某些莫名其妙的原因,我更喜歡是使用的方法.bind函數。這可以用來將父作用域的this指定給子作用域。
function bound () { return function () { console.log(this); }.bind(this); } bound()(); //
其他問題?
你是否有任何關于this的問題?關于this怎樣?如果你認為我錯過了任何其他邊界情況,或優雅的解決方案,請讓我知道