JavaScript中this取值機(jī)制的本質(zhì)

很多前端人員對(duì)JavaScript中函數(shù)this的取值感到迷域输虱,感覺沒有一個(gè)簡(jiǎn)單的任何情況都適用的規(guī)則,即使有多年經(jīng)驗(yàn)的JavaScript程序員色难,也只是記住或者總結(jié)了在各種情況下的規(guī)則燎斩,但是仍沒有能統(tǒng)領(lǐng)全景的規(guī)則辖佣,所以,當(dāng)他們遇到本文中第4部分《不容易理解的函數(shù)調(diào)用方式》的代碼時(shí)谴咸,仍然搞不清this的值轮听;

為了弄清this的本質(zhì)機(jī)制,我進(jìn)行了一系列的研究岭佳,并總結(jié)出了一個(gè)萬能的且容易理解的規(guī)則血巍;為了幫助大家理解,現(xiàn)分享研究成果如下:(若想更深入地理解JavaScript的各種特性驼唱,可以參考另一篇文章:《JavaScript的發(fā)現(xiàn)與理解》)

目錄

一. 函數(shù)this的取值機(jī)制
二. 數(shù)組的本質(zhì)
三. 調(diào)用數(shù)組中的函數(shù)時(shí)的this值
四. 不容易理解的函數(shù)調(diào)用方式
五.注意

內(nèi)容


一. 函數(shù)this的取值機(jī)制

經(jīng)過測(cè)試藻茂,總結(jié)得出以下結(jié)論:

結(jié)論1:容易理解的this取值機(jī)制

函數(shù)的this的值取決于函數(shù)的調(diào)用方式;
函數(shù)有2種調(diào)用方式,如下:

  • 直接調(diào)用辨赐;如:fn()优俘;
  • 屬性調(diào)用;如:obj.fn()掀序;
  • 當(dāng)函數(shù)以直接調(diào)用的方式調(diào)用時(shí)帆焕,this的值為全局對(duì)象,如:winodw不恭;
  • 當(dāng)函數(shù)以屬性調(diào)用的方式調(diào)用時(shí)叶雹,this的值為調(diào)用函數(shù)的對(duì)象;

對(duì)象屬性調(diào)用有2種方式:

  • 打點(diǎn)調(diào)用换吧,如:obj.attr折晦;
  • 方括號(hào)調(diào)用,如:obj["attr"]沾瓦;

所有通過這2種屬性調(diào)用方式調(diào)用的函數(shù)的this的值都為調(diào)用函數(shù)的對(duì)象满着;

結(jié)論2:this取值的本質(zhì)機(jī)制

我認(rèn)為,本質(zhì)上贯莺,函數(shù)的this的值取決于函數(shù)對(duì)象的查找方式:

  • 如果函數(shù)對(duì)象在被調(diào)用時(shí)是在作用域鏈上查找到的风喇,則該函數(shù)中this的值為全局對(duì)象;
  • 如果函數(shù)對(duì)象在被調(diào)用時(shí)是在原型鏈上查找到的缕探,則該函數(shù)中this的值為調(diào)用函數(shù)的對(duì)象魂莫;

備注:
關(guān)于標(biāo)識(shí)符查找機(jī)制請(qǐng)參考《JavaScript中訪問屬性和訪問變量的標(biāo)識(shí)符查找規(guī)則

因?yàn)椋?/strong>

  • 當(dāng)函數(shù)以 直接調(diào)用 的方式調(diào)用時(shí),它是在作用域鏈上被查找到的爹耗,所以該函數(shù)中this的值為全局對(duì)象耙考;
  • 當(dāng)函數(shù)以 屬性調(diào)用 的方式調(diào)用時(shí),它是在原型鏈上被查找到的潭兽,所以該函數(shù)中this的值為調(diào)用函數(shù)的對(duì)象琳骡;

所以:

結(jié)論1是正確的,并且結(jié)論1只是結(jié)論2的一個(gè)特例讼溺,即:結(jié)論2包含結(jié)論1;

二. 數(shù)組的本質(zhì)

數(shù)組的本質(zhì)還是對(duì)象最易,數(shù)組是通過對(duì)象實(shí)現(xiàn)的怒坯,它并沒有為索引加入新的機(jī)制,數(shù)組中的索引本質(zhì)是作為數(shù)組對(duì)象的屬性存在的藻懒,因?yàn)榇螯c(diǎn)調(diào)用的屬性不能是數(shù)字剔猿,所以數(shù)組的索引不通過打點(diǎn)調(diào)用,只能通過方括號(hào)的方式調(diào)用嬉荆;

三. 調(diào)用數(shù)組中的函數(shù)時(shí)的this值

因?yàn)閿?shù)組中的索引本質(zhì)是作為數(shù)組對(duì)象的屬性存在的归敬,所以調(diào)用數(shù)組中的函數(shù)(如:array[index]();)時(shí),被調(diào)用的函數(shù)的this的值為該數(shù)組對(duì)象汪茧;

四. 不容易理解的函數(shù)調(diào)用方式

假設(shè)在全局環(huán)境中有以下代碼:

var inWhere = "The Window";
var aObject = {
        inWhere:"The aObject",
        getWhere:function(){
              return this.inWhere
           }
  };

則在全局環(huán)境下椅亚,以下三句代碼及其執(zhí)行結(jié)果如下:
代碼1:

aObject.getWhere();     //結(jié)果:"The aObject"

代碼2:

(aObject.getWhere)();       //結(jié)果:"The aObject"

代碼3:

(aObject.getWhere=aObject.getWhere)();  //結(jié)果:"The Window" 

我認(rèn)為造成以上執(zhí)行結(jié)果的原因是:

  • 因?yàn)閷?duì)于代碼1和代碼2中的函數(shù)在被調(diào)用時(shí),都是在原型鏈上查找到的舱污,所以它們的執(zhí)行結(jié)果均為The aObject呀舔;
  • 因?yàn)橘x值語句=在內(nèi)部本質(zhì)上是作為函數(shù)來實(shí)現(xiàn)的,并且這個(gè)函數(shù)有個(gè)返回值扩灯,會(huì)返回等號(hào)=右邊表達(dá)式的值媚赖,在代碼3中該返回值就是getWhere函數(shù),所以 (aObject.getWhere=aObject.getWhere) 結(jié)果是getWhere函數(shù)珠插,并且這個(gè)函數(shù)是從等號(hào)=函數(shù)的返回值中取得的惧磺;又因?yàn)榉祷刂凳窃谧饔糜蜴溨胁檎业降模栽趃etWhere被執(zhí)行時(shí)捻撑,this的值為全局對(duì)象磨隘,所以代碼3執(zhí)行結(jié)果是The Window

五.注意

  • 計(jì)算屬性的get和set函數(shù)中的this也符合上述規(guī)則布讹;
  • ES6引用了模塊機(jī)制琳拭,對(duì)模塊中頂層的this做了處理,使得在ES6的模塊中描验,頂層的this的值是undefined白嘁,所以,不應(yīng)該在頂層代碼使用this膘流; 所以絮缅,如果在模塊中直接訪問全局對(duì)象(如 window 對(duì)象)的計(jì)算屬性(即:不是通過調(diào)用 window 屬性的方式來訪問,如 window.計(jì)算屬性名呼股,而是直接訪問耕魄,如 全局對(duì)象的計(jì)算屬性名),則該計(jì)算屬性的 set 和 get 函數(shù)的 this 也是 undefined 彭谁;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末吸奴,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子缠局,更是在濱河造成了極大的恐慌则奥,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,454評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件狭园,死亡現(xiàn)場(chǎng)離奇詭異读处,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)唱矛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門罚舱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來井辜,“玉大人,你說我怎么就攤上這事管闷≈嘟牛” “怎么了?”我有些...
    開封第一講書人閱讀 157,921評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵渐北,是天一觀的道長(zhǎng)阿逃。 經(jīng)常有香客問我,道長(zhǎng)赃蛛,這世上最難降的妖魔是什么恃锉? 我笑而不...
    開封第一講書人閱讀 56,648評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮呕臂,結(jié)果婚禮上破托,老公的妹妹穿的比我還像新娘。我一直安慰自己歧蒋,他們只是感情好土砂,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,770評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著谜洽,像睡著了一般萝映。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上阐虚,一...
    開封第一講書人閱讀 49,950評(píng)論 1 291
  • 那天序臂,我揣著相機(jī)與錄音,去河邊找鬼实束。 笑死奥秆,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的咸灿。 我是一名探鬼主播构订,決...
    沈念sama閱讀 39,090評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼避矢!你這毒婦竟也來了悼瘾?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,817評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤审胸,失蹤者是張志新(化名)和其女友劉穎分尸,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體歹嘹,經(jīng)...
    沈念sama閱讀 44,275評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,592評(píng)論 2 327
  • 正文 我和宋清朗相戀三年孔庭,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了尺上。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片材蛛。...
    茶點(diǎn)故事閱讀 38,724評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖怎抛,靈堂內(nèi)的尸體忽然破棺而出卑吭,到底是詐尸還是另有隱情,我是刑警寧澤马绝,帶...
    沈念sama閱讀 34,409評(píng)論 4 333
  • 正文 年R本政府宣布豆赏,位于F島的核電站,受9級(jí)特大地震影響富稻,放射性物質(zhì)發(fā)生泄漏掷邦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,052評(píng)論 3 316
  • 文/蒙蒙 一椭赋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦钉跷、人聲如沸该编。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽胚委。三九已至,卻和暖如春叉信,著一層夾襖步出監(jiān)牢的瞬間亩冬,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工茉盏, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鉴未,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,503評(píng)論 2 361
  • 正文 我出身青樓鸠姨,卻偏偏與公主長(zhǎng)得像铜秆,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子讶迁,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,627評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容

  • 第5章 引用類型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,219評(píng)論 0 4
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理连茧,服務(wù)發(fā)現(xiàn),斷路器巍糯,智...
    卡卡羅2017閱讀 134,637評(píng)論 18 139
  • 它沒有回頭啸驯,它終于沒有回頭,也許它猶豫了一下祟峦,也許它踟躕了一下罚斗,可是,它沒有回頭宅楞,它終究走進(jìn)了它的世界针姿,永遠(yuǎn)走進(jìn)了...
    儲(chǔ)建明閱讀 585評(píng)論 0 1
  • 夜里11點(diǎn)袱吆,收到了閨蜜的短信:我失業(yè)了。 我知道接下來她會(huì)傳圖片給我距淫,果不其然绞绒,她與老板的聊天記錄被截圖發(fā)了過來。...
    車禾閱讀 388評(píng)論 0 1
  • 使用js來實(shí)現(xiàn)瀑布流效果 瀑布流的實(shí)現(xiàn)方法有很多種榕暇,我這次采用的是使用絕對(duì)定位的方法來實(shí)現(xiàn)蓬衡。頁(yè)面中包含一個(gè)容器ul...
    Bookish倩寶閱讀 534評(píng)論 0 0