"this" of JavaScript你理解有多少？
			
          
 			Posted on 2006-11-27 16:48 Jaunt 閱讀(251) 評(píng)論(0)  編輯  收藏  所屬分類: JavaScript 
			
			


		
          
		
          
		譯者：Flyingis
          編輯：Jaunt
          原載：http://www.aygfsteel.com/flyingis/archive/2006/09/15/69888.html

          this是JavaScript中功能最強(qiáng)大的關(guān)鍵字之一。
          
		
          
				Owner
		
          
		
          
				接下來(lái)文章中我們將要討論的問(wèn)題是：在函數(shù)doSomething()中this所指的是什么？
          
				
          
		
          
		
          
				
						
								
								function
								?doSomething()?
								
						
				
				
						
								
										{
          ??          
										this
										.style.color?
										=
								          
						          
						
								
										?'#cc0000';
          }          
								          
						          
				          
		
          
		
          
		在JavaScript中，this通常指向的是我們正在執(zhí)行的函數(shù)本身，或者是，指向該函數(shù)所屬的對(duì)象。當(dāng)我們?cè)陧?yè)面中定義了函數(shù)doSomething()的時(shí)候，或者是JavaScript中的window對(duì)象（或global對(duì)象）。對(duì)于一個(gè)onclick屬性，它為它所屬的HTML元素所擁有，this應(yīng)該指向該HTML元素。

          這種“所有權(quán)”就是JavaScript中面向?qū)ο蟮囊环N方式。?
          
		
          
		
          
		
          
				
						this1.gif
				
		
          
		如果我們?cè)跊](méi)有任何更多準(zhǔn)備情況下執(zhí)行doSomething()，this關(guān)鍵字會(huì)指向window，并且該函數(shù)試圖改變window的 style.color。因?yàn)閣indow并沒(méi)有style對(duì)象，這個(gè)函數(shù)將非常不幸的運(yùn)行失敗，并產(chǎn)生JavaScript錯(cuò)誤。

          
		
				
						Copying
          ??
          因此如果我們想充分利用this，我們不得不注意使用this的函數(shù)應(yīng)該被正確的HTML元素所擁有。換句話說(shuō)，我們應(yīng)該復(fù)制這個(gè)函數(shù)到我們的onclick屬性。          
		          
		
				
          
		          
		
				
          
		          
		
          
				
						
				
				element.onclick?
				=
				?doSomething;
		
          
		
				
          這個(gè)函數(shù)被完整復(fù)制到onclick屬性（現(xiàn)在成為了函數(shù)）。因此如果這個(gè)event handler被執(zhí)行，this將指向HTML元素，并且該元素的顏色得以改變。

          this2.gif
          這種方法使得我們能夠復(fù)制這個(gè)函數(shù)到多個(gè)event handler。每次this都將指向正確的HTML元素：

          this3.gif

          這樣你就可以最大限度使用this。每當(dāng)執(zhí)行該函數(shù)，this所指向的HTML元素都正確響應(yīng)事件，這些HTML元素?fù)碛衐oSomething()的一個(gè)拷貝。

          Referring

          然而，如果你使用inline event registration(內(nèi)聯(lián)事件注冊(cè))

          <element?onclick="doSomething()">

          你將不能拷貝該函數(shù)！反而這種差異是非常關(guān)鍵的。onclick屬性并不包含實(shí)際的函數(shù)，僅僅是一個(gè)函數(shù)調(diào)用。

          doSomething();

          因此，它將聲明“轉(zhuǎn)到doSomething()并且執(zhí)行它”。當(dāng)我們到達(dá)doSomething()，this關(guān)鍵字又重新指向了全局的window對(duì)象，函數(shù)返回錯(cuò)誤信息。

          this4.gif
          The difference

          如果你想使用this來(lái)指向HTML元素響應(yīng)的事件，你必須確保this關(guān)鍵字被寫(xiě)在onclick屬性里。只有在這種情況下它才指向event handler所注冊(cè)的HTML元素。
          ? 
          element.onclick?=?doSomething;
          alert(element.onclick)

          你將得到

          function?doSomething()?{
          ??          this.style.color?=?'#cc0000';
          }

          正如你所見(jiàn)，this關(guān)鍵字被展現(xiàn)在onclick函數(shù)中，因此它指向HTML元素。
          但是如果執(zhí)行

          <element?onclick="doSomething()">
          alert(element.onclick)

          你將得到

          function?onclick()?{
          ??doSomething()
          }

          這僅僅是到doSomething()函數(shù)的一個(gè)引用。this關(guān)鍵字并沒(méi)有出現(xiàn)在onclick函數(shù)中，因此它不指向HTML元素。          

          
	
          


          
	    
    




          








          

				
	
          
	
	
	

          

    







          
        
	




主站蜘蛛池模板：
乐平市|
松溪县|
赤城县|
阳东县|
调兵山市|
沛县|
什邡市|
清流县|
枣阳市|
宜宾市|
万全县|
福海县|
和林格尔县|
南汇区|
西平县|
沙坪坝区|
阿荣旗|
治县。|
林州市|
鲁山县|
临江市|
胶南市|
庆安县|
沂源县|
迭部县|
衡山县|
葵青区|
承德县|
石棉县|
延津县|
武定县|
抚远县|
遵义县|
永修县|
墨竹工卡县|
苍溪县|
桃园市|
民丰县|
乌拉特前旗|
攀枝花市|
石家庄市|