JavaScript this 深入理解
最近一段時(shí)間看了很多JavaScript 的庫源碼, 如 prototype, Ext core 等。這些庫中大量應(yīng)用到了這一概念。直到昨天翻了一下《JavaScript王者歸來》這本書才算對this有一個(gè)深刻的理解。
大至歸結(jié)一下:
1. 函數(shù)調(diào)用者與所有者
JavaScript 中函數(shù)(function) 存在調(diào)用者 與 所有者這兩個(gè)概念,調(diào)用者是指調(diào)用函數(shù)的對象,通常是一個(gè)指向調(diào)用了當(dāng)前函數(shù)的函數(shù)的引用,如果是頂層調(diào)用,那么caller=null, 大部分瀏覽器的JavaScript實(shí)現(xiàn) 可以用 caller 這個(gè)屬性獲得(這不是 ECMAScript 規(guī)范的一部分,所有還是慎用)。 從以下的代碼能夠很好的理解這點(diǎn):
function a(){
alert('fun a caller=' + a.caller);
}
function b(){
a();
}
a();
b();
-----------
運(yùn)行結(jié)果可以看到兩個(gè)對話框:
1.
fun a caller=null;
2.
fun a caller=function b(){
a();
}
--------------------------
而對于所有者,則是指調(diào)用函數(shù)的對象(一個(gè)動(dòng)態(tài)的概念), 在函數(shù)體中的this就是指向了函數(shù)的所有者。在這里的this 與 Java 以及 C++ 中的 this指針是完全不同的兩個(gè)概念,很多人忽略了這一點(diǎn),這也是導(dǎo)致 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");
---------
一開始的調(diào)用 a() 這時(shí)未指定所有者,一般這種情況 this 是指向?yàn)g覽器的頂層元素 window 的, 而window中未定義x 與 y 屬性。
所以結(jié)果顯示為: ?=undefined,undefined
oa.fun = a; oa.fun("a"); 將函數(shù)引用賦值給對像a的屬性fun, 這時(shí)再調(diào)用函數(shù)的所有者變成了a, 則結(jié)果顯示為:a=1,2
同理 ob.fun("b")則顯示:b=11,12。
在JavaScript中要改變一個(gè)函數(shù)的所有者(this)的方法就是將函數(shù)引用賦值給一個(gè)對象的屬性。
同是在Function對象中也提供了兩個(gè)原型函數(shù)可以實(shí)現(xiàn)這一功能: apply, call, 這兩個(gè)函數(shù)的第一個(gè)參數(shù)就是要指定的所有者對象,它們間的唯一區(qū)別就是apply將其后的要傳遞給函數(shù)的形參封裝到數(shù)組中,或者直接用 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用法小結(jié)
http://www.dbjr.com.cn/article/16863.htm
JavaScript this 深入理解
http://www.dbjr.com.cn/article/19425.htm
JAVASCRIPT THIS詳解 面向?qū)ο?BR>http://www.dbjr.com.cn/article/17584.htm
Javascript this指針
http://www.dbjr.com.cn/article/19434.htm
JavaScript中this關(guān)鍵字使用方法詳解
http://www.dbjr.com.cn/article/7954.htm
Javascript this關(guān)鍵字使用分析
http://www.dbjr.com.cn/article/16235.htm
相關(guān)文章
如何使用Bootstrap的modal組件自定義alert,confirm和modal對話框
本文我將為大家介紹Bootstrap中的彈出窗口組件Modal,此組件簡單易用,效果大氣漂亮且很實(shí)用,感興趣的朋友一起學(xué)習(xí)吧2016-03-03JS實(shí)現(xiàn)定時(shí)任務(wù)每隔N秒請求后臺setInterval定時(shí)和ajax請求問題
這篇文章主要介紹了JS實(shí)現(xiàn)定時(shí)任務(wù)每隔N秒請求后臺setInterval定時(shí)和ajax請求 的相關(guān)資料,需要的朋友可以參考下2017-10-10JavaScript實(shí)現(xiàn)星星等級評價(jià)功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)星星等級評價(jià)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03正則表達(dá)式基本語法及表單驗(yàn)證操作詳解【基于JS】
這篇文章主要介紹了正則表達(dá)式基本語法及表單驗(yàn)證操作,較為詳細(xì)的分析了正則表達(dá)式的基本語法以及基于JS實(shí)現(xiàn)的表單正則驗(yàn)證操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04JavaScript中創(chuàng)建字典對象(dictionary)實(shí)例
這篇文章主要介紹了JavaScript中創(chuàng)建字典對象(dictionary)實(shí)例,本文直接給出了實(shí)現(xiàn)的源碼,并給出了使用示例,需要的朋友可以參考下2015-03-03