<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        

    
	
    
		
			

    

    Flyingis
    

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

    

    

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

    


    		
	
    

    

    
	
    
		
			
    
				數據加載中……
			
    
		    		
		
			
    
				
					
	
    
		
    
			[翻譯] "this" of JavaScript
		
    
		
    
		
		
				??? 譯者：Flyingis

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

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

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

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

    ??? 這種“所有權”就是JavaScript中面向對象的一種方式。在Objects as associative arrays中可以查看一些更多的信息。

    this1.gif

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

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

    element.onclick?=?doSomething;

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

    this2.gif

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

    this3.gif

    ??? 這樣你就可以最大限度使用this。每當執行該函數，this所指向的HTML元素都正確響應事件，這些HTML元素擁有doSomething()的一個拷貝。

    ??? Referring

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

    <element?onclick="doSomething()">

    ??? 你將不能拷貝該函數！反而這種差異是非常關鍵的。onclick屬性并不包含實際的函數，僅僅是一個函數調用。

    doSomething();

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

    this4.gif

    ??? The difference

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

    ??? 你將得到

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

    ??? 正如你所見，this關鍵字被展現在onclick函數中，因此它指向HTML元素。

    ??? 但是如果執行

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

    你將得到

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

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

    ??? 例子--拷貝

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

    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()的出現。Microsoft event registration model最主要的弊端是attachEvent()創建了一個指向函數的引用，而不是復制它。因此有時不可能知道哪個HTML正在處理該事件。

    ??? 組合使用

    ??? 當使用內聯事件注冊時，你可以將this發送到函數以至于可以正常使用：

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

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

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


	


    
	    
    


    

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

    HTMLElement.onclick();

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

    





    








    

				
			
    
		    		
	
    
	
    
		
			

		
	
    

    


    







    
        
	



主站蜘蛛池模板：
av永久免费网站在线观看
|
a成人毛片免费观看|
精品剧情v国产在免费线观看|
亚洲一区二区三区精品视频|
久久久久久曰本AV免费免费|
亚洲日韩图片专区第1页|
免费在线看黄网站|
亚洲日本在线看片|
18勿入网站免费永久|
亚洲youjizz|
成人免费在线观看网站|
亚洲av无码专区青青草原|
四虎www免费人成|
亚洲6080yy久久无码产自国产|
精品少妇人妻AV免费久久洗澡
|
亚洲视频免费观看|
国产精品免费观看|
亚洲精品中文字幕无码A片老|
免费永久在线观看黄网站|
新最免费影视大全在线播放|
国产自偷亚洲精品页65页|
精品亚洲永久免费精品|
亚洲精品中文字幕无码AV|
久久精品网站免费观看|
亚洲av无码成人精品区一本二本|
亚洲AⅤ优女AV综合久久久|
GOGOGO高清免费看韩国|
老司机亚洲精品影院无码|
野花高清在线电影观看免费视频
|
亚洲色精品VR一区区三区|
日产国产精品亚洲系列|
中国一级特黄高清免费的大片中国一级黄色片
|
四虎一区二区成人免费影院网址
|
59pao成国产成视频永久免费|
亚洲a级成人片在线观看|
国产国产人免费人成免费视频|
黄色大片免费网站|
亚洲成在人天堂在线|
成年女人喷潮毛片免费播放|
人妖系列免费网站观看|
亚洲精品国产专区91在线|