Javascript中的this綁定介紹

而this的具體值則取決於其調用模式。
* 方法調用模式：this被綁定到該對象。
* 函數調用模式：this被綁定到全域對象，網頁的情況下綁定到window
* 構造器調用模式：this被綁定到新產生的對象。
* 事件處理調用模式分兩種情況：參照
* 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>

由於函數調用的內容相關的變化導致了this的不確定性。為了更好的明確this上下文，可以使用call和apply兩個方法來明確化this綁定的值。
call和apply的區別僅僅在於參數上的區別：call接受任意參數列表，apply接受一個參數數組對象。這也使得apply可以接受arguments作為其第二參數。 複製代碼 代碼如下:func.call(obj1,var1,var2,var3)
func.apply(obj1, [var1,var2,var3])
func.apply(obj1, arguments)

但是call和apply方式都是立即執行的，如果需要後來使用的話，就不能滿足條件，如下例，其中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方法大顯身手的時候（該方法已經在ECMA-262第五版已經加入），最早出現在Prototype架構中（未確認過）。bind和call，apply一樣，也是變更函數執行的上下文，也即函數執行時this的值。不同的在於，它返回一個函數引用以供後續使用，其簡單實現如下： 複製代碼 代碼如下:Function.prototype.bind = function(object) {
var method = this;
return function() {
method.apply(object, arguments);
}
}

具體實現上利用閉包特性，返回來的函數引用在執行的時候，可以訪問建立該函數引用時的method和object兩個參數，而不是使用this，this在執行的時候會重新被綁定，而不是原來的method這個值。