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這個值。
相關文章
這篇文章主要介紹了如何實現(xiàn)鼠標滑過出現(xiàn)預覽的大圖提示效果,需要的朋友可以參考下2014-02-02
JMenuTab簡單使用說明參數(shù)2008-03-03
這篇文章主要為大家詳細介紹了微信小程序上傳圖片實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要介紹了如何在 JavaScript 中更好地使用數(shù)組，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了JS實現(xiàn)的簡潔二級導航菜單雛形效果,通過簡單的JavaScript響應鼠標事件遍歷頁面元素實現(xiàn)二級導航菜單切換的效果,非常簡單實用,需要的朋友可以參考下2015-10-10
這篇文章給大家介紹了Bootstrap實現(xiàn)漸變頂部固定自適應導航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
使用Javascript同時提交多個Web表單的方法2009-12-12
這篇文章主要為大家詳細介紹了JavaScript制作頁面倒計時器的實現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-03-03
javascript break指定標簽打破多層循環(huán)示例
break的語法有兩種break; 和 break label;下面為大家介紹下直接break掉整個循環(huán)嵌套示例2014-01-01
這篇文章主要介紹了JS?限時限次數(shù)點擊按鈕,實現(xiàn)方法很簡單需要用一個變量作為計數(shù),點擊一次，計數(shù)加一點擊函數(shù)內(nèi)判斷計數(shù)變量設置定時恢復，對實例代碼感興趣的朋友一起看看吧2022-03-03