一個對于js this關鍵字的問題
2019-11-21 02:22:32
供稿：網友
所以拿出來與大家共勉：
先運行以下的js代碼
<script>
foo = {
'bar': function () {
alert(this);
},
'toString': function () {
return 'foo';
}
};
foo.bar();//返回的是"foo"
(foo.bar)();//返回的是"[object Window]"
(foo.bar || null)();//返回的是"[object Window]"
bar = foo.bar; bar();//返回的是"[object Window]"
</script>
我對這里的代碼的解釋：
foo.bar(); //打印foo
//1. alert隱式調用toString方法，轉型成字符串，在foo里重寫了toString方法，因此為foo
(foo.bar)();//打印foo
//2. 這里的執行同上
(foo.bar || null)();
/*
3. 這里在IE6.0，Mozilla Firefox1.5.0.7和Opera9.0里有不同的效果，IE和Opera都是object，Mozilla的為foo
暫且不談這幾個的JS對||的解釋方法，這與bar方法中的this還有和||運算符是有關的。經過||之后
這里的this已經不再為window了，this關鍵字的作用，如果按照C++的理解，應該為動態聯編，而非靜態聯編，我們平常的例子中
<script>
(function (){
this.div = document.createElement("div");div.innerHTML="never-online";
document.body.appendChild(div);
this.div.onclick = function(){
alert(this.tagName);//這里的this就是div而非匿名函數中的this
}
})()
</script>
也就是說，這里this的作用域不再是foo對象，而是一個全局的作用域。因此alert(this)相當于alert(window);
所以為object
BTW：有可能是||運算符是要把兩個表達式的執行轉換為全局范圍的比較，所以在IE和Opera中，這里(foo.bar || null)返回的是一個全局引用，即：
'bar': function () {
alert(this);//這里的this已經為全局this，全局的this，即為window
},
詳細的，我將在篇末加入一段代碼，以示說明
*/
bar = foo.bar; bar();//返回的是"[object Window]"
/*4.
這里在IE6.0，Mozilla Firefox1.5.0.7和Opera9.0里都為相同的object，如果理解上面的執行，理解這句顯然會比較簡單
理由同上，這里把foo.bar的引用給到一個全局變量bar，而全局變量都隸屬于window的引用，看下面代碼：
var a = 'never-online';
alert(this.a); //never-online
alert(window.a); //never-online
如果你嘗試著把bar = foo.bar; bar();改成以下代碼，或許就可以明白了
foo.alert = foo.bar; foo.alert ();
這里的foo.alert依然為foo對象的引用，因此foo對象里的this，在這里依然有效，并沒有成為window object
因為很明顯的bar屬性window，因此引用foo.bar里雖然有this，但是this引用為window
*/
再看看我們把這個例子改成這樣：
<script>
foo = {
'bar': function () {
var oSelf = this;
alert(this.toString);
if (oSelf==window) {
oSelf = foo;
}
alert(oSelf);
},
'toString': function () {
return 'foo';
}
};
window.toString = function () {
alert("引用全局this --- window");
}
foo.bar();
(foo.bar)();
(foo.bar || null)();
bar = foo.bar; bar();
</script>
這樣應該明白原因了。
從這個例中(foo.bar || null)(); 可以看出Mozilla的解釋器會更“標準”一些，而Opera和IE的解釋方法則與Mozilla的不一樣。||運算符的作用，出現了不同的效果。同我上面所說的， 有可能是||運算符是要把兩個表達式的執行轉換為全局范圍的比較，所以在IE和Opera中，這里(foo.bar || null)返回的是一個全局引用
