JavaScript之this指針深入詳解

1、JavaScript之this指針深入詳解中的含義非常豐富，它可以是全局對(duì)象，當(dāng)前對(duì)象或者是任意對(duì)象，這都取決于函數(shù)的調(diào)用方式。函數(shù)有以下幾種調(diào)用方式：作為對(duì)象方法調(diào)用、作為函數(shù)調(diào)用、作為構(gòu)造函數(shù)調(diào)用、或調(diào)用。對(duì)象方法調(diào)用作為對(duì)象方法調(diào)用的時(shí)候，會(huì)被綁定到該對(duì)象。varpoint=x:0,y:0,moveTo:function(x,y)this.x=this.x+x;this.y=this.y+y;綁定到當(dāng)前對(duì)象，即對(duì)象這里我想強(qiáng)調(diào)一點(diǎn)內(nèi)容，就是是在函數(shù)執(zhí)行的時(shí)候去獲取對(duì)應(yīng)的值，而不是函數(shù)定義時(shí)。即使是對(duì)象方法調(diào)用，如果該方法的函數(shù)屬性以函數(shù)名的形式傳入別的作用域，也會(huì)改變的指向。我舉一個(gè)例子

2、：vara=aa:0,bb:0,fun:function(x,y)this.aa=this.aa+x;this.bb=this.bb+y;varaa=1;varb=aa:0,bb:0,fun:function()returnthis.aa;a.fun(3,2);document.write(a.aa);3,this指向?qū)ο蟊旧韉ocument.write(b.fun();/0,this指向?qū)ο蟊旧?function(aa)注意傳入的是函數(shù)，而不是函數(shù)執(zhí)行的結(jié)果varc=aa();document.write(c);/1,由于fun在該處執(zhí)行，導(dǎo)致this不再指向?qū)ο蟊旧?，而是這里的window

3、)(b.fun);這樣就明白了吧。這是一個(gè)容易混淆的地方。函數(shù)調(diào)用函數(shù)也可以直接被調(diào)用，這個(gè)時(shí)候被綁定到了全局對(duì)象。varx=1;functiontest()this.x=0;test();alert(x);/0但這樣就會(huì)出現(xiàn)一些問(wèn)題，就是在函數(shù)內(nèi)部定義的函數(shù)，其也會(huì)指向全局，而和我們希望的恰恰相反。代碼如下：varpoint=x:0,y:0,moveTo:function(x,y)/內(nèi)部函數(shù)6.varmoveXfunction(x)6.varmoveXfunction(x)this.x=x;/this綁定到了全局TOC o 1-5 h z;/內(nèi)部函數(shù)varmoveY=function(y)t

4、his.y=y;/this綁定到了全局;moveX(x);moveY(y);point.moveTo(1,1);point.x;/=0point.y;/=0 x;/=1y;/=1我們會(huì)發(fā)現(xiàn)不但我們希望的移動(dòng)呢效果沒(méi)有完成，反而會(huì)多出兩個(gè)全局變量。那么如何解決呢？只要要進(jìn)入函數(shù)中的函數(shù)時(shí)將保存到一個(gè)變量中，再運(yùn)用該變量即可。代碼如下：1.varpoint=2.x:0,3.y:0,4.moveTo:function(x,y)5.varthat=this;6./內(nèi)部函數(shù)7.varmoveX=function(x)8.that.x=x;9.;10./內(nèi)部函數(shù)11.varmoveY=function(y

5、)12.that.y=y;13.14.moveX(x);15.moveY(y);16.17.;18.point.moveTo(1,1);point.x;/=1point.y;/=1構(gòu)造函數(shù)調(diào)用在中自己創(chuàng)建構(gòu)造函數(shù)時(shí)可以利用來(lái)指向新創(chuàng)建的對(duì)象上。這樣就可以避免函數(shù)中的指向全局了。varx=2;functiontest()this.x=1;varo=newtest();alert(x);/2或調(diào)用這兩個(gè)方法可以切換函數(shù)執(zhí)行的上下文環(huán)境，也就是改變綁定的對(duì)象。和比較類(lèi)似，區(qū)別在于傳入?yún)?shù)時(shí)一個(gè)要求是數(shù)組，一個(gè)要求是分開(kāi)傳入。所以我們以為例：varname=window;varsomeone=name

6、:Bob,showName:function()alert();varother=name:Tom;someone.showName();/Bobsomeone.showName.apply();/windowsomeone.showName.apply(other);/Tom可以看到，正常訪問(wèn)對(duì)象中方法時(shí)，指向?qū)ο蟆Ｊ褂昧撕?，無(wú)參數(shù)時(shí)，的當(dāng)前對(duì)象是全局，有參數(shù)時(shí)，的當(dāng)前對(duì)象就是該參數(shù)。箭頭函數(shù)調(diào)用這里需要補(bǔ)充一點(diǎn)內(nèi)容，就是在下一代標(biāo)準(zhǔn)中的箭頭函數(shù)的始終指向函數(shù)定義時(shí)的，而非執(zhí)行時(shí)。我們通過(guò)一個(gè)例子來(lái)理解varo=x:1,func:function()console.log(

7、this.x),test:function()setTimeout(function()this.func();,100);o.test();/TypeError:this.funcisnotafunction上面的代碼會(huì)出現(xiàn)錯(cuò)誤，因?yàn)榈闹赶驈淖優(yōu)榱巳帧Ｎ覀冃枰薷纳厦娴拇a如下：varo=x:1,func:function()console.log(this.x),TOC o 1-5 h ztest:function()var_this=this;setTimeout(function()_this.func();,100);o.test();通過(guò)使用外部事先保存的就行了。這里就可以利用到箭頭函數(shù)了，我們剛才說(shuō)過(guò)，箭頭函數(shù)的始終指向函數(shù)定義時(shí)的，而非執(zhí)行時(shí)。所以我們將上面的代碼修改如下：varo=x:1,func:function()console.log(this.x),test:function()setTimeout()=this.func(),100);o.test();這回就指向了，我們還需要注意一點(diǎn)的就是這個(gè)是不會(huì)改變指向?qū)ο蟮?，我們知道和可以改變的指向，但是在箭頭函數(shù)中是無(wú)效的。TOC o 1-5 h zvarx=1,o=x:10,test