Javascript中的this綁定介紹
更新時間：2011年09月22日 23:25:24 作者：
在Javascript里，函數(shù)被調(diào)用的時候，除了接受聲明是定義的形式參數(shù)，每一個函數(shù)還接受兩個附加的參數(shù)：this和arguments。
而this的具體值則取決于其調(diào)用模式。
* 方法調(diào)用模式：this被綁定到該對象。
* 函數(shù)調(diào)用模式：this被綁定到全局對象，網(wǎng)頁的情況下綁定到window
* 構造器調(diào)用模式：this被綁定到新生成的對象。
* 事件處理調(diào)用模式分兩種情況：參照
* this被綁定到全局對象
<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對象
<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)用的上下文的變化導致了this的不確定性。為了更好的明確this上下文，可以使用call和apply兩個方法來明確化this綁定的值。
call和apply的區(qū)別僅僅在于參數(shù)上的區(qū)別：call接受任意參數(shù)列表，apply接受一個參數(shù)數(shù)組對象。這也使得apply可以接受arguments作為其第二參數(shù)。
func.call(obj1,var1,var2,var3)
func.apply(obj1, [var1,var2,var3])
func.apply(obj1, arguments)
但是call和apply方式都是立即執(zhí)行的，如果需要后來使用的話，就不能滿足條件，如下例，其中13行和14行無論是否使用call都無法得到我們需要的值(42)。
<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>
這個時候就是bind方法大顯身手的時候（該方法已經(jīng)在ECMA-262第五版已經(jīng)加入），最早出現(xiàn)在Prototype框架中（未確認過）。bind和call，apply一樣，也是變更函數(shù)執(zhí)行的上下文，也即函數(shù)執(zhí)行時this的值。不同的在于，它返回一個函數(shù)引用以供后續(xù)使用，其簡單實現(xiàn)如下：
Function.prototype.bind = function(object) {
var method = this;
return function() {
method.apply(object, arguments);
}
}
具體實現(xiàn)上利用閉包特性，返回來的函數(shù)引用在執(zhí)行的時候，可以訪問創(chuàng)建該函數(shù)引用時的method和object兩個參數(shù)，而不是使用this，this在執(zhí)行的時候會重新被綁定，而不是原來的method這個值。
* 方法調(diào)用模式：this被綁定到該對象。
* 函數(shù)調(diào)用模式：this被綁定到全局對象，網(wǎng)頁的情況下綁定到window
* 構造器調(diào)用模式：this被綁定到新生成的對象。
* 事件處理調(diào)用模式分兩種情況：參照
* this被綁定到全局對象
復制代碼 代碼如下:
<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對象
復制代碼 代碼如下:
<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)用的上下文的變化導致了this的不確定性。為了更好的明確this上下文，可以使用call和apply兩個方法來明確化this綁定的值。
call和apply的區(qū)別僅僅在于參數(shù)上的區(qū)別：call接受任意參數(shù)列表，apply接受一個參數(shù)數(shù)組對象。這也使得apply可以接受arguments作為其第二參數(shù)。
復制代碼 代碼如下:
func.call(obj1,var1,var2,var3)
func.apply(obj1, [var1,var2,var3])
func.apply(obj1, arguments)
但是call和apply方式都是立即執(zhí)行的，如果需要后來使用的話，就不能滿足條件，如下例，其中13行和14行無論是否使用call都無法得到我們需要的值(42)。
復制代碼 代碼如下:
<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>
這個時候就是bind方法大顯身手的時候（該方法已經(jīng)在ECMA-262第五版已經(jīng)加入），最早出現(xiàn)在Prototype框架中（未確認過）。bind和call，apply一樣，也是變更函數(shù)執(zhí)行的上下文，也即函數(shù)執(zhí)行時this的值。不同的在于，它返回一個函數(shù)引用以供后續(xù)使用，其簡單實現(xiàn)如下：
復制代碼 代碼如下:
Function.prototype.bind = function(object) {
var method = this;
return function() {
method.apply(object, arguments);
}
}
具體實現(xiàn)上利用閉包特性，返回來的函數(shù)引用在執(zhí)行的時候，可以訪問創(chuàng)建該函數(shù)引用時的method和object兩個參數(shù)，而不是使用this，this在執(zhí)行的時候會重新被綁定，而不是原來的method這個值。
相關文章
這篇文章主要為大家詳細介紹了原生js實現(xiàn)抽獎小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了針對BootStrap中tabs控件的美化和完善的相關資料，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-07-07
全局數(shù)據(jù)共享是為了解決組件之間數(shù)據(jù)共享的問題,下面這篇文章主要給大家介紹了關于微信小程序全局數(shù)據(jù)共享和分包的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了iframe高度自適應及隱藏滾動條的實例詳解的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
顯然，當N≥1時，6N，6N+2，6N+3，6N+4都不是素數(shù)，只有形如6N+1和6N+5的自然數(shù)有可能是素數(shù)。所以，除了2和3之外，所有的素數(shù)都可以表示成6N±1的形式(N為自然數(shù))。2009-10-10
這篇文章主要介紹了javascript中關于去重操作的，在JS中關于數(shù)據(jù)去重操作的使用是非常常用，也是非常重要的點，一般情況下關于對數(shù)組去重點操作是最常用的，下文我們就來介紹js去重相關內(nèi)容,需要的朋友可以參考下2022-04-04
關于__defineGetter__ 和__defineSetter__的說明
關于__defineGetter__ 和__defineSetter__的說明...2007-05-05
在javascript中javascript:void(0)經(jīng)常會用到，大家知道此含有嗎，在Javascript中void是一個操作符，該操作符指定要計算一個表達式但是不返回值，本文給大家介紹js中javascript:void(0) 真正含義，需要的朋友可以參考下2015-08-08
Ionic 是目前最有潛力的一款 HTML5 手機應用開發(fā)框架。通過 SASS 構建應用程序，它 提供了很多 UI 組件來幫助開發(fā)者開發(fā)強大的應用。接下來小編給大家介紹如何安裝 Ionic 在自己的電腦上搭建一個簡單的小應用，感興趣的朋友一起看看吧2016-06-06
大家在使用微信小程序的時候會有緩存,雖然小程序的緩存數(shù)值相比APP要少的多,下面這篇文章主要給大家介紹了關于如何清除手機上小程序緩存的相關資料,需要的朋友可以參考下2022-08-08