JavaScript call apply使用 JavaScript對象的方法綁定到DOM事件后this指向問題

更新時間：2011年09月28日 00:33:29 作者：

JavaScript對象與DOM對象進行綁定會遇到一個問題：如果被綁定的對象的方法中包含this關鍵字，當事件被觸發(fā)時this指向的卻是DOM對象，而不是之前的JS對象。

先來看看現(xiàn)象：

 
<html> 
<head> 
<title>apply_and_call</title> 
</head> 
<body onload="init()"> 
<div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px"></div> 
<script type="text/javascript"> 
function init() { 
var el = document.getElementById("testDiv"); 
var a = new classA(el); 
} 
function classA(el) { 
this.a = 1; 
this.container = el; 
//綁定單擊事件 
this.container.onclick = this.click; 
} 
classA.prototype = { 
click:function() { 
alert(this.a); 
} 
} 
</script> 
</body> 
</html> 

當單擊DIV后，彈出框顯示undefined。
原因是當DOM對象響應單擊事件后，事件方法中的this關鍵字指向的是DOM對象，此時DOM對象沒有a屬性，所以彈出undefined。
而程序員本意是響應事件方法中this指向的是classA的對象a，如何才能達到此目的？這就需要使用到call或apply方法。
下面再來熟悉下call方法：
摘要：
function.call(thisobj, args…)
參數(shù)：
thisobj
　　調用function的對象。在函數(shù)主體中，thisobj是關鍵字this的值。
args…
　　任意多個參數(shù)，這些參數(shù)將傳遞給函數(shù)function。
返回值：
調用函數(shù)function的返回值。
拋出：
TypeError
　　如果調用該函數(shù)的對象不是函數(shù)，則拋出該異常。
描述：
call()將指定的函數(shù)function作為對象thisobj的方法來調用，把參數(shù)列表中thisobj后的參數(shù)傳遞給它，返回值是調用函數(shù)后的返回值。在函數(shù)體內，關鍵字this引用thisobj對象。
如果將指定數(shù)組作為傳遞給函數(shù)的參數(shù)，請使用Function.apply()方法。
熟悉call()方法后，將代碼1修改如下：
代碼2：

復制代碼代碼如下:

 
<html> 
<head> 
<title>apply_and_call</title> 
</head> 
<body onload="init()"> 
<div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px"></div> 
<script type="text/javascript"> 
function init() { 
var el = document.getElementById("testDiv"); 
var a = new classA(el); 
} 
function classA(el) { 
this.t = 1; 
this.clickDele = createDele(this.click, this); 
el.onclick = this.clickDele; 
} 
classA.prototype = { 
click:function() { 
alert(this.t); 
} 
} 
function createDele(fun, obj, arg) { 
return function() { 
return fun.call(obj, arg); 
} 
} 
</script> 
</body> 
</html> 

代碼2 25行：主要添加了createDele方法，該方法包含三個參數(shù)：fun、obj、arg，分別是“要執(zhí)行的方法”、“fun中this需要指向的對象”、“傳入fun中的參數(shù)”。該方法返回一個匿名方法。
匿名方法負責執(zhí)行fun方法，同時將fun中的this指向obj，并使用作為arg傳入參數(shù)，處理結果返回。
當程序執(zhí)行走到第15行調用createDele方法，傳入對象的方法和對象本身，createDele接收參數(shù)后返回一個匿名方法，this.clickDele被設置成為返回的匿名方法，16行代碼將this.clickDele(匿名方法)綁定到DOM事件上，程序執(zhí)行完畢，點擊DOM(DIV)觸發(fā)匿名方法，些時匿名方法中fun為之前傳入的this.click(即：方法a.click)，obj為之前傳入的this(即：對象a)，所以此時使用call方法使得this.click(即：方法a.click)中的this指向obj(即：對象a)，最終彈出結果為1。結果正確，達到了程序的本意。
回顧匿名方法多少會讓人感到有些怪異：調用匿名方法時fun為什么會是this.click(即：方法a.click)、obj什么為是this(即：對象a)。這個問題就需要用JavaScript的閉包來解釋了，這里暫不介紹閉包，后面會有介紹JavaScript閉包的文章發(fā)表，歡迎有興趣的朋友持續(xù)關注！
不管各位看官信還是不信，反正道理和程序是沒有問題的?。海?

您可能感興趣的文章: