JavaScript this 深入理解

最近一段時間看了很多JavaScript 的庫源碼， 如 prototype, Ext core 等。這些庫中大量應用到了這一概念。直到昨天翻了一下《JavaScript王者歸來》這本書才算對this有一個深刻的理解。
大至歸結一下：
1. 函數調用者與所有者
JavaScript 中函數(function) 存在調用者 與 所有者這兩個概念，調用者是指調用函數的對象，通常是一個指向調用了當前函數的函數的引用，如果是頂層調用，那麼caller=null， 大部分瀏覽器的JavaScript實現 可以用 caller 這個屬性獲得（這不是 ECMAScript 規範的一部分，所有還是慎用）。 從以下的代碼能夠很好的理解這點：

複製代碼 代碼如下:function a(){
alert('fun a caller=' + a.caller);
}
function b(){
a();
}
a();
b();

-----------
運行結果可以看到兩個對話方塊：
1.
fun a caller=null;
2.
fun a caller=function b(){
a();
}
--------------------------
而對於所有者，則是指調用函數的對象(一個動態概念), 在函數體中的this就是指向了函數的所有者。在這裡的this 與 Java 以及 C++ 中的 this指標是完全不同的兩個概念，很多人忽略了這一點，這也是導致 JavaScript中的this無法很好理解的原因之一。看看以下的例子： 複製代碼 代碼如下:var oa = {
x:1,
y:2
}
var ob = {
x:11,
y:12
}
function a(w){
alert(w + "=" + this.x + "," + this.y)
}
a("?");
oa.fun = a;
oa.fun("a");
ob.fun = a;
ob.fun("b");

---------
一開始的調用 a() 這時未指定所有者，一般這種情況 this 是指向瀏覽器的頂層元素 window 的， 而window中未定義x 與 y 屬性。
所以結果顯示為: ?=undefined,undefined
oa.fun = a; oa.fun("a"); 將函數引用賦值給對像a的屬性fun, 這時再調用函數的所有者變成了a, 則結果顯示為：a=1,2
同理 ob.fun("b")則顯示：b=11,12。
在JavaScript中要改變一個函數的所有者(this)的方法就是將函數引用賦值給一個對象的屬性。
同是在Function對象中也提供了兩個原型函數可以實現這一功能： apply, call， 這兩個函數的第一個參數就是要指定的所有者對象，它們間的唯一區別就是apply將其後的要傳遞給函數的形參封裝到數組中，或者直接用 arguments對象。而call則直接將形參跟在其後。
因此上面的 oa.fun=a; oa.fun("a") 可以改寫成 a.apply(oa, ["a"]) 或 a.call(oa, "a");
ob.fun=b; ob.fun("b") 可以改寫成 a.apply(ob, ["b"]) 或 b.call(ob, "b");
知道了以上這此，對於 this 的範圍及其使用就很好理解了。

下面是一些參考文檔
javascript this用法小結
http://www.jb51.net/article/16863.htm

JavaScript this 深入理解
http://www.jb51.net/article/19425.htm

JAVASCRIPT THIS詳解 物件導向
http://www.jb51.net/article/17584.htm

Javascript this指標
http://www.jb51.net/article/19434.htm

JavaScript中this關鍵字使用方法詳解
http://www.jb51.net/article/7954.htm

Javascript this關鍵字流量分析
http://www.jb51.net/article/16235.htm