而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這個值。