在這篇文章里我想闡明JavaScript中的this,希望對你理解this的工作機制有一些幫助。作為JavaScript程序員學(xué)習(xí)this對于你的發(fā)展有很大幫助,可以說利大于弊。這篇文章的靈感來自于我最近的工作——我即將完成的書的最后章節(jié)——JavaScript 應(yīng)用程序設(shè)計(JavaScript Application Design)(注意:現(xiàn)在你可以購買早期版本),我寫的是關(guān)于scope工作原理的方面。
似是而非,這可能是你對this的感覺:
很瘋狂,不是嗎?在這篇短文,我旨在揭開它的神秘面紗。
如果一個函數(shù)被作為一個對象的方法調(diào)用,那么this將被指派為這個對象。
var parent = {
method: function () {
console.log(this);
}
};
parent.method();
// <- parent
注意這種行為非?!按嗳酢?,如果你獲取一個方法的引用并且調(diào)用它,那么this的值不會是parent了,而是window全局對象。這讓大多數(shù)開發(fā)者迷惑。
var parentless = parent.method;
parentless();
// <- Window
底線是你應(yīng)該查看調(diào)用鏈去理解被調(diào)用函數(shù)是一個對象的屬性還是它自己。如果它被作為屬性調(diào)用,那么this的值將變成該屬性的對象,否則this的值將被指派為全局對象或window。如果在嚴格模式下,this的值將是undefined
。
在被當作構(gòu)造函數(shù)的情況下,當使用new關(guān)鍵字時,this將被指派為被創(chuàng)建的實例對象。
function ThisClownCar () {
console.log(this);
}
new ThisClownCar();
// <- ThisClownCar {}
注意在這種情況下沒有辦法識別出一個函數(shù)是否應(yīng)該被用作構(gòu)造函數(shù),從而省略new關(guān)鍵字this的結(jié)果將是全局對象,就像我們上面看到的沒有用parent調(diào)用的例子。
ThisClownCar();
// <- Window
.call
,.apply
和.bind
方法被用來操作調(diào)用函數(shù)的方式,幫我們定義this的值和傳遞給函數(shù)的參數(shù)值。
Function.prototype.call
可以有任意數(shù)量的參數(shù),第一個參數(shù)被分配給this,剩下的被傳遞給調(diào)用函數(shù)。
Array.prototype.slice.call([1, 2, 3], 1, 2)
// <- [2]
Function.prototype.apply
的行為和.call
類似,但它傳遞給函數(shù)的參數(shù)是一個數(shù)組而不是任意參數(shù)。
String.prototype.split.apply('13.12.02', ['.'])
// <- ['13', '12', '02']
Function.prototype.bind
創(chuàng)建一個特殊的函數(shù),該函數(shù)將永遠使用傳遞給.bind
的參數(shù)作為this的值,以及能夠分配部分參數(shù),創(chuàng)建原函數(shù)的珂里化(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將無法在作用域鏈中保持不變。這是規(guī)則的缺陷,并且常常會給業(yè)余開發(fā)者帶來困惑。
function scoping () {
console.log(this);
return function () {
console.log(this);
};
}
scoping()();
// <- Window
// <- Window
一個常見的方法是創(chuàng)建一個局部變量保持對this的引用,并且在子作用域中不能有同命變量。子作用域中的同名變量將覆蓋父作用域中對this的引用。
function retaining () {
var self = this;
return function () {
console.log(self);
};
}
retaining()();
// <- Window
除非你真的想同時使用父作用域的this,以及當前this值,由于某些莫名其妙的原因,我更喜歡是使用的方法.bind
函數(shù)。這可以用來將父作用域的this指定給子作用域。
function bound () {
return function () {
console.log(this);
}.bind(this);
}
bound()();
// <- Window
你是否有任何關(guān)于this的問題?關(guān)于this怎樣?請讓我知道如果你認為我錯過了任何其他邊界情況或優(yōu)雅的解決方案。
如果你喜歡這篇文章,一定要看看我即將到來的書JavaScript應(yīng)用程序設(shè)計:構(gòu)建第一種方法( JavaScript Application Design: A Build First Approach),您可以訪問購買早期版本的鏈接。
本文為翻譯文章,原文“Demystifying this in JavaScript”
更多建議: