JS中this引發(fā)bug分析

在JavaScript中有一個(gè)很特別、很常用又常常讓初學(xué)者很困擾的東西 ─ “this”，在這堂課中會(huì)來談?wù)勥@個(gè)”this”。

this通常會(huì)指向一個(gè)對(duì)象，同時(shí)this會(huì)在不同的情境下指向不同的對(duì)象。讓我們來看幾個(gè)不同的情境，幫助我們更了解”this”。

window object (global object)

這里我們在三種不同情境去打印”this”，分別是在函數(shù)的最外層(outer environment)直接去執(zhí)行；使用fuction statement去執(zhí)行；使用function expression去執(zhí)行（如果還不清楚function statement和function expression的差別，可以參考注1）。

結(jié)果會(huì)發(fā)現(xiàn)，這三個(gè)”this”都會(huì)指向同樣的對(duì)象，也就是global environment的window object (global object)：

這也就是說，我們可以直接利用這個(gè)function和this在window object建立新的屬性：

在這里我們利用this.NewVariable = "..."來在window object建立新的屬性，函數(shù)的最后，我們則可以直接console.log(NewVariable)，這里之所以可以不用打this.NewVariable或window.NewVariable是因?yàn)槿魏卧趃lobal object (window)的屬性，我們都可以直接去使用它，而不用使用”.”。

跑出來的結(jié)果會(huì)像這樣子：

它會(huì)打印出我們的”Create a new property”，同時(shí)，在window這個(gè)大的object中，我們也會(huì)找到NewVariable這個(gè)屬性：

method in object

我們知道，在對(duì)象里的值如果是原生值（primitive type；例如，字串、數(shù)值、邏輯值），我們會(huì)把這個(gè)新建立的東西稱為「屬性（property）」；如果對(duì)象里面的值是函數(shù)（function）的話，我們則會(huì)把這個(gè)新建立的東西稱為「方法（method）」。

在這里，我們就要來建立method：

首先，我們利用object literal的方式創(chuàng)建一個(gè)對(duì)象c，里面包含屬性name和方法log。log是一個(gè)匿名函數(shù)（anonymous function），函數(shù)內(nèi)容很簡單，就是打印this而已（關(guān)于匿名函數(shù)可參考注1）。最后則是使用c.log的方式來執(zhí)行該方法。

讓我們來看看，這時(shí)候的”this”會(huì)是什么呢？

答案是對(duì)象c！

當(dāng)這個(gè)函數(shù)是對(duì)象里面的method時(shí)，這時(shí)候的this就會(huì)指向到包含這個(gè)method的對(duì)象

JavaScript中關(guān)于this的一個(gè)bug

讓我們更進(jìn)一步延伸來看這個(gè)范例：

假設(shè)我們在method log裡面多這一行this.name = "Updated Object C name"

因?yàn)槲覀冎馈眛his”現(xiàn)在指的是對(duì)象c，所以可以想像的，當(dāng)我執(zhí)行這個(gè)method的時(shí)候，它會(huì)去變更c(diǎn).name的值。

這個(gè)部分是沒有什么大問題的，不過讓我們繼續(xù)看下去……。

假設(shè)我在method log裡面在做一些變更，我在這個(gè)method裡面，另外建立一個(gè)函數(shù)叫做setname，一樣是用this.name = newname的方式來修改這個(gè)object c中name屬性的值。

接著執(zhí)行setname這個(gè)函數(shù)，希望把object c中name的屬性值改成”New name for object c”，最后再去打印”this”來看一下。

結(jié)果我們會(huì)發(fā)現(xiàn)，對(duì)象c中name屬性的值并沒有變成”New name for object c”，竟然還是一樣??？怎么會(huì)這樣呢？

仔細(xì)一看，我們回來看一下我們的window object，我們會(huì)發(fā)現(xiàn)，在window object中發(fā)現(xiàn)了一個(gè)新的屬性”name”，而且值是”New name for object c”。

這是什么意思呢？意思是原來我們剛剛在函數(shù)setname里面的this，指向到的是global object (window object)，而不再是剛剛的object C！

我們在setname這個(gè)function中，用console.log(this)來看一下：

在log這個(gè)method中，我們一共執(zhí)行了三次的console.log(this)結(jié)果如下：

第一個(gè)和第三個(gè)”this”指向到的是對(duì)象c，而第二個(gè)在setname中的this，指向的則是window object (global object)，而這也就是為什么setname這個(gè)function沒辦法幫我們修改對(duì)象c中name屬性的名稱，因?yàn)椤眛his”根本沒指向到對(duì)象c。

而許多人都認(rèn)為，這是JavaScript的一個(gè)bug。

那么我們可以怎么做

那么碰到上述的這個(gè)例子時(shí)，我們可以怎么做來避免指向到不同的對(duì)象呢？

許多人的解法是這樣的，因?yàn)槲覀冎缹?duì)象都是用的引用的方式，所以我們可以這樣做

STEP 1

我們在整個(gè)函數(shù)的最上面加上一行var self = this（有些人會(huì)用var that = this）。由于引用的特性，self和this會(huì)指向到同一個(gè)對(duì)象，而this指向?qū)ο骳，所以self一樣會(huì)指向?qū)ο骳。

STEP 2

接著，把方法log內(nèi)原本使用的”this”都改成”self”，這樣做可以確保self指向到的是c對(duì)象而不用擔(dān)心會(huì)像上面的例子一樣指向到錯(cuò)誤的對(duì)象。

結(jié)果也如同我們預(yù)期的，在第二次console.log(self)的時(shí)候，就再次替換了對(duì)象c中name屬性的值。

總結(jié)

讓我們來總結(jié)一下：

如果我們是在全局環(huán)境建立函數(shù)并打印this，這時(shí)候this會(huì)指向到全局對(duì)象，也就是window對(duì)象。

如果我們是在對(duì)象里面創(chuàng)建函數(shù)，也就是方法（method）的情況時(shí)，這時(shí)候的this一般就會(huì)指向到包含這個(gè)方法的對(duì)象（之所以說”一般”是因?yàn)槌松鲜鯾ug的情況之外）。

碰到method中可能會(huì)有不知道this指向到什么的情況時(shí)，為了避免不必要的錯(cuò)誤，我們可以在method中的最上面建立一個(gè)變量，去把它指定成this（var self = this）。

4.如果真的還是不知道那個(gè)情況下的this會(huì)指向到什么，就console.log出來看看吧！

示例代碼

// function statement
function a(){
 console.log(this);
 this.NewVariable = "Create a new property";
}
a();
console.log(NewVariable);
var c = {
 name:"The C object",
 log: function(){
 var self = this;
 self.name = "Updated object C name";
 console.log(self);
 
 var setname = function(newname){
 self.name = newname;
 console.log(self);
 }
 setname("New name for object c");
 console.log(self)
 }
}
c.log();

看完本文之后相信大家對(duì)JS中this引發(fā)的bug，都有所了解，有需要的趕緊收藏起來吧。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com