Flyingis
          

          Talking and thinking freely !
          
Flying in the world of GIS !
          

          

          

          隨筆 - 156, 文章 - 16, 評論 - 589, 引用 - 0
          

          


          		
	
          

          

          
	
          
		
			
          
				數(shù)據(jù)加載中……
			
          
		          		
		
			
          
				
					
	
          
		
          
			[翻譯] "this" of JavaScript
		
          
		
          
		
		
				??? 譯者：Flyingis

          ??? this是JavaScript中功能最強(qiáng)大的關(guān)鍵字之一。不幸的是，如果你不知道它具體怎么工作，你將很難正確使用它。

          ??? 下面我來闡述如何在事件處理中來使用this，之后我會附加一些this相關(guān)的例子。

          ??? Owner
          ??
          ????接下來文章中我們將要討論的問題是：在函數(shù)doSomething()中this所指的是什么？
          ? 
          function?doSomething()?{
          ??          this.style.color?=?'#cc0000';
          }

          ??? 在JavaScript中，this通常指向的是我們正在執(zhí)行的函數(shù)本身（譯者注：用owner代表this所指向的內(nèi)容），或者是，指向該函數(shù)所屬的對象。當(dāng)我們在頁面中定義了函數(shù)doSomething()的時候，它的owner是頁面，或者是JavaScript中的window對象（或global對象）。對于一個onclick屬性，它為它所屬的HTML元素所擁有，this應(yīng)該指向該HTML元素。

          ??? 這種“所有權(quán)”就是JavaScript中面向?qū)ο蟮囊环N方式。在Objects as associative arrays中可以查看一些更多的信息。

          this1.gif

          ??? 如果我們在沒有任何更多準(zhǔn)備情況下執(zhí)行doSomething()，this關(guān)鍵字會指向window，并且該函數(shù)試圖改變window的style.color。因?yàn)閣indow并沒有style對象，這個函數(shù)將非常不幸的運(yùn)行失敗，并產(chǎn)生JavaScript錯誤。

          ??? Copying
          ??
          ??? 因此如果我們想充分利用this，我們不得不注意使用this的函數(shù)應(yīng)該被正確的HTML元素所擁有。換句話說，我們應(yīng)該復(fù)制這個函數(shù)到我們的onclick屬性。Traditional event registration會關(guān)心它。

          element.onclick?=?doSomething;

          ??? 這個函數(shù)被完整復(fù)制到onclick屬性（現(xiàn)在成為了函數(shù)）。因此如果這個event handler被執(zhí)行，this將指向HTML元素，并且該元素的顏色得以改變。

          this2.gif

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

          this3.gif

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

          ??? Referring

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

          <element?onclick="doSomething()">

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

          doSomething();

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

          this4.gif

          ??? The difference

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

          ??? 你將得到

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

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

          ??? 但是如果執(zhí)行

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

          你將得到

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

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

          ??? 例子--拷貝

          ??? 下面的例子中，this被寫入onclick函數(shù)里：

          element.onclick?=?doSomething
          element.addEventListener('click',?doSomething,?          false)
          element.onclick?          =?function()?{this.style.color?=?'#cc0000';}
          <element?onclick="this.sytle.color?=?'#cc0000';">

          ??? 例子--引用

          ??? 下述情況中，this指向window：

          element.onclick?=?function()?{doSomething()}
          element.attachEvent('onclick',?doSomething)
          <element?onclick="doSomething()">

          ??? 注意attachEvent()的出現(xiàn)。Microsoft event registration model最主要的弊端是attachEvent()創(chuàng)建了一個指向函數(shù)的引用，而不是復(fù)制它。因此有時不可能知道哪個HTML正在處理該事件。

          ??? 組合使用

          ??? 當(dāng)使用內(nèi)聯(lián)事件注冊時，你可以將this發(fā)送到函數(shù)以至于可以正常使用：

          <element?onclick="doSomething(this)">
          function?doSomething(obj)?{
          ??          //this出現(xiàn)在event?handler中并被發(fā)送到函數(shù)
          ??//obj指向HTML元素，因此可以這樣：
          ??obj.style.color?=?'#cc0000';
          }

          ??? 原文鏈接：http://www.quirksmode.org/js/this.html          
		          

		
          
		
          
			posted on 2006-09-15 15:02 Flyingis 閱讀(3538) 評論(3)  編輯  收藏  所屬分類: Web 客戶端技術(shù) 
		
          
	
          
	
	


	


          
	    
    


          

          評論
          
	
	
			
          
				
          
					# re: "this" of JavaScript [翻譯]  回復(fù)  更多評論
					  
				
          
				對這個東西只要注意一點(diǎn)就足夠了，拿click事件來說，瀏覽器會執(zhí)行下面這條語句：

          HTMLElement.onclick();

          如果你通過HTMLElement.onclick = someFunction來注冊一個事件處理函數(shù)，那么這個someFunction函數(shù)里面的this當(dāng)然會指向HTMLElement，如果你是通過在html代碼里面用onclick="someFunction()"來注冊事件處理，效果就是HTMLElement.onclick = function() {someFunction()},也就是說引號里面的內(nèi)容是事件處理函數(shù)的函數(shù)體部分，someFunction函數(shù)里面的this指向了window對象，這就是兩者之間的差異，當(dāng)然你也可以寫成這樣onclick="this.someFunction()"，這回HTMLElement就又取代了window
				
          
					2006-09-16 13:37 | hahahehe
				
          
			
          
		
			
          
				
          
					# re: "this" of JavaScript [翻譯]  回復(fù)  更多評論
					  
				
          
				好文章。。。。。。。。。。。。。
				
          
					2006-09-18 20:20 | 陳琪
				
          
			
          
		
			
          
				
          
					# re: [翻譯] "this" of JavaScript  回復(fù)  更多評論
					  
				
          
				我用文章中的示例代碼測試不成功呀
				
          
					2006-11-13 21:38 | jaying
				
          
			
          
		

          





          








          

				
			
          
		          		
	
          
	
          
		
			

		
	
          

          


    







          
        
	




主站蜘蛛池模板：
清涧县|
青河县|
陵水|
留坝县|
洛南县|
临夏县|
浑源县|
达尔|
镇康县|
镇江市|
临桂县|
五寨县|
县级市|
西城区|
兴仁县|
周口市|
南丹县|
麦盖提县|
林州市|
江西省|
兴和县|
东港市|
肥城市|
泰来县|
神池县|
静安区|
正定县|
读书|
盈江县|
扶绥县|
宜州市|
巢湖市|
南开区|
攀枝花市|
永春县|
澄迈县|
乌审旗|
奉贤区|
浪卡子县|
连云港市|
徐水县|