快捷導(dǎo)航

Javascript中的this綁定介紹

更新時(shí)間：2011年09月22日 23:25:24 作者：

在Javascript里，函數(shù)被調(diào)用的時(shí)候，除了接受聲明是定義的形式參數(shù)，每一個(gè)函數(shù)還接受兩個(gè)附加的參數(shù)：this和arguments。

而this的具體值則取決于其調(diào)用模式。
* 方法調(diào)用模式：this被綁定到該對(duì)象。
* 函數(shù)調(diào)用模式：this被綁定到全局對(duì)象，網(wǎng)頁(yè)的情況下綁定到window
* 構(gòu)造器調(diào)用模式：this被綁定到新生成的對(duì)象。
* 事件處理調(diào)用模式分兩種情況：參照
* this被綁定到全局對(duì)象

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function click_handler() { 
alert(this); // alerts the window object 
} 
</script> 
... 
<button id='thebutton' onclick='click_handler()'>Click me!</button> 

* this被綁定到DOM對(duì)象

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function click_handler() { 
alert(this); // alerts the button DOM node 
} 
function addhandler() { 
document.getElementById('thebutton').onclick = click_handler; 
} 
window.onload = addhandler; 
</script> 
... 
<button id='thebutton'>Click me!</button> 

由于函數(shù)調(diào)用的上下文的變化導(dǎo)致了this的不確定性。為了更好的明確this上下文，可以使用call和apply兩個(gè)方法來明確化this綁定的值。
call和apply的區(qū)別僅僅在于參數(shù)上的區(qū)別：call接受任意參數(shù)列表，apply接受一個(gè)參數(shù)數(shù)組對(duì)象。這也使得apply可以接受arguments作為其第二參數(shù)。

復(fù)制代碼代碼如下:

 
func.call(obj1,var1,var2,var3) 
func.apply(obj1, [var1,var2,var3]) 
func.apply(obj1, arguments) 

但是call和apply方式都是立即執(zhí)行的，如果需要后來使用的話，就不能滿足條件，如下例，其中13行和14行無論是否使用call都無法得到我們需要的值(42)。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function BigComputer(answer) { 
this.the_answer = answer; 
this.ask_question = function () { 
alert(this.the_answer); 
} 
} 
function addhandler() { 
var deep_thought = new BigComputer(42), 
the_button = document.getElementById('thebutton'); 
//the_button.onclick = deep_thought.ask_question; 
the_button.onclick = deep_thought.ask_question.call(deep_thought); 
} 
window.onload = addhandler; 
</script> 

這個(gè)時(shí)候就是bind方法大顯身手的時(shí)候（該方法已經(jīng)在ECMA-262第五版已經(jīng)加入），最早出現(xiàn)在Prototype框架中（未確認(rèn)過）。bind和call，apply一樣，也是變更函數(shù)執(zhí)行的上下文，也即函數(shù)執(zhí)行時(shí)this的值。不同的在于，它返回一個(gè)函數(shù)引用以供后續(xù)使用，其簡(jiǎn)單實(shí)現(xiàn)如下：

復(fù)制代碼代碼如下:

 
Function.prototype.bind = function(object) { 
var method = this; 
return function() { 
method.apply(object, arguments); 
} 
} 

具體實(shí)現(xiàn)上利用閉包特性，返回來的函數(shù)引用在執(zhí)行的時(shí)候，可以訪問創(chuàng)建該函數(shù)引用時(shí)的method和object兩個(gè)參數(shù)，而不是使用this，this在執(zhí)行的時(shí)候會(huì)重新被綁定，而不是原來的method這個(gè)值。

您可能感興趣的文章: