《高性能JavaScript》讀書總結(jié)——作用域鏈

數(shù)據(jù)存取

JS中有如下四種基本數(shù)據(jù)的存燃癖椤:

  • 字面量:字符串锌订、數(shù)字、布爾值画株、對(duì)象瀑志、數(shù)組涩搓、函數(shù)、正則表達(dá)式劈猪、null和undefined。
  • 本地變量:var/let 定義的數(shù)據(jù)存儲(chǔ)單元良拼。
  • 數(shù)組元素
  • 對(duì)象成員
    通常情況下战得,訪問速度排序:字面量 > 本地變量 > 數(shù)組元素 > 對(duì)象成員。個(gè)別瀏覽器的版本庸推,可能有細(xì)微差別常侦。

作用域

執(zhí)行環(huán)境/運(yùn)行期上下文(execution context): 是指當(dāng)前變量或函數(shù)有權(quán)訪問的其它數(shù)據(jù)。每個(gè)執(zhí)行環(huán)境都有一個(gè)與之關(guān)聯(lián)的變量對(duì)象(variable object, VO)贬媒,VO是不能直接訪問的聋亡,執(zhí)行環(huán)境中定義的所有變量和函數(shù)都會(huì)保存在這個(gè)對(duì)象中,解析器在處理數(shù)據(jù)的時(shí)候就會(huì)訪問這個(gè)內(nèi)部對(duì)象际乘。
全局執(zhí)行環(huán)境是最外層的一個(gè)執(zhí)行環(huán)境坡倔,在web瀏覽器中全局執(zhí)行環(huán)境是window對(duì)象,因此所有全局變量和函數(shù)都是作為window對(duì)象的屬性和成員函數(shù)創(chuàng)建的脖含。每個(gè)函數(shù)都有自己的執(zhí)行環(huán)境罪塔,當(dāng)執(zhí)行流進(jìn)入一個(gè)函數(shù)的時(shí)候,函數(shù)的環(huán)境會(huì)被推入一個(gè)函數(shù)棧中养葵,而在函數(shù)執(zhí)行完畢后執(zhí)行環(huán)境出棧并被銷毀征堪,保存在其中的所有變量和函數(shù)定義隨之銷毀,控制權(quán)返回到之前的執(zhí)行環(huán)境中关拒,全局的執(zhí)行環(huán)境在應(yīng)用程序退出(瀏覽器關(guān)閉)才會(huì)被銷毀佃蚜。
每一個(gè)JS函數(shù)可以看做是Function對(duì)象的一個(gè)實(shí)例,并且含有一個(gè)內(nèi)部屬性[[Scopes]],[[Scopes]]包含了一個(gè)函數(shù)被創(chuàng)建的作用域中對(duì)象的集合着绊。這個(gè)集合被稱為作用域鏈谐算,它決定哪些數(shù)據(jù)能被函數(shù)訪問。函數(shù)作用域中的每個(gè)對(duì)象被稱為一個(gè)可變對(duì)象畔柔,每個(gè)可變對(duì)象都是以“key-value”形式存在氯夷。
典型的作用域鏈:

  1. 函數(shù)創(chuàng)建時(shí)
    此時(shí)函數(shù)的作用域鏈會(huì)壓入第一個(gè)作用域?qū)ο螅磩?chuàng)建此函數(shù)的作用域中可訪問的數(shù)據(jù)對(duì)象填充靶擦。如下圖所示:
scope1.png

注意:這個(gè)作用域?qū)ο笫强勺兊娜迹梢岳斫鉃檫@個(gè)對(duì)象是引用的。
具體對(duì)象信息可以在chrome dev tool中查看玄捕,如下圖:

scope1-tool.png
  1. 函數(shù)執(zhí)行時(shí)
    每次執(zhí)行函數(shù)時(shí)都會(huì)創(chuàng)建一個(gè)執(zhí)行環(huán)境踩蔚,每個(gè)執(zhí)行環(huán)境都是獨(dú)一無(wú)二的,多次調(diào)用函數(shù)就會(huì)導(dǎo)致創(chuàng)建多個(gè)執(zhí)行環(huán)境枚粘。此時(shí)會(huì)將會(huì)將一個(gè)被稱為“活動(dòng)對(duì)象”(activation object,AO)的新對(duì)象作為第二個(gè)作用域?qū)ο髩喝胱饔糜蜴溝诿觥H缦聢D所示:
scope2.png

在函數(shù)的執(zhí)行過程中,每遇到一個(gè)變量或者函數(shù),都會(huì)在作用域鏈中按照順序進(jìn)行查找福也,直到遍歷所有的作用域局骤,此過程會(huì)影響運(yùn)行性能。

  1. 閉包時(shí)的作用域
    如下一段代碼中暴凑,包含了閉包
functionassignEvents(){
    var id= "xdi9592";
    document.getElementById("save-btn").onclick =function(event){
        saveDocument(id);
    };
}   
scope3.png
scope3-tool.png
  1. 其他改變作用域的情況
    一般作用域鏈的順序是按照調(diào)用的順序排列的峦甩,但是特殊情況下會(huì)改變。
  • with
    執(zhí)行with語(yǔ)句時(shí)现喳,會(huì)將with帶入的對(duì)象壓入作用域鏈凯傲,導(dǎo)致調(diào)用深度發(fā)生變化。
functioninitUI(){
    with(document){
        var bd= body,
        links=getElementsByTagName_r("a"),
        i=0,
        len= links.length;
        while(i<len){
        update(links[i++]);
        }
        getElementById("go-btn").onclick=function(){
        start();
        };
        bd.className ="active";
    }
}
with.png
  • try-catch
    類似with嗦篱,當(dāng)try塊發(fā)生異常時(shí)冰单,程序跳轉(zhuǎn)到catch子句,并且把異常對(duì)象壓入作用域首位灸促。catch子句執(zhí)行完作用域鏈恢復(fù)之前的狀態(tài)诫欠。由于加深了調(diào)用深度,如果在catch子句執(zhí)行操作會(huì)造成性能問題腿宰∨凰撸可以采用錯(cuò)誤處理函數(shù)的方式瞳别,改變作用域鏈的狀態(tài)揖盘,從而減少調(diào)用深度。
try{
    methodThatMightCauseAnError();
}catch (ex){
    handleError(ex);//delegate tohandlermethod
}

標(biāo)識(shí)符解析的性能

在執(zhí)行環(huán)境的作用域鏈中炮障,一個(gè)標(biāo)識(shí)符的位置越深椿每,他的讀寫速度就越慢伊者,因此函數(shù)中讀寫局部變量是最快的,讀寫全局變量通常是最慢的间护。
改進(jìn)辦法亦渗,通過賦值給局部變量,改變標(biāo)識(shí)符的深度汁尺,從而提高讀寫速度法精。

for(var i = 0; i < document.getElementsByTagName("a").length; i++){
    document.getElementsByTagName("a")[i].class = 'active'
}
//改進(jìn)后
var list = document.getElementsByTagName("a");
for(var i = 0; i < list.length; i++){
    list[i].class = 'active'
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市痴突,隨后出現(xiàn)的幾起案子搂蜓,更是在濱河造成了極大的恐慌,老刑警劉巖辽装,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件帮碰,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡拾积,警方通過查閱死者的電腦和手機(jī)殉挽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門丰涉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人斯碌,你說我怎么就攤上這事一死。” “怎么了傻唾?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵摘符,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我策吠,道長(zhǎng),這世上最難降的妖魔是什么瘩绒? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任猴抹,我火速辦了婚禮,結(jié)果婚禮上锁荔,老公的妹妹穿的比我還像新娘蟀给。我一直安慰自己,他們只是感情好阳堕,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布跋理。 她就那樣靜靜地躺著,像睡著了一般恬总。 火紅的嫁衣襯著肌膚如雪前普。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天壹堰,我揣著相機(jī)與錄音拭卿,去河邊找鬼。 笑死贱纠,一個(gè)胖子當(dāng)著我的面吹牛峻厚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播谆焊,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼惠桃,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了辖试?” 一聲冷哼從身側(cè)響起辜王,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎剃执,沒想到半個(gè)月后誓禁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡肾档,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年摹恰,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了辫继。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡俗慈,死狀恐怖姑宽,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情闺阱,我是刑警寧澤炮车,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布,位于F島的核電站酣溃,受9級(jí)特大地震影響瘦穆,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜赊豌,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一扛或、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧碘饼,春花似錦熙兔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至钠绍,卻和暖如春舆声,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背五慈。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工纳寂, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人泻拦。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓毙芜,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親争拐。 傳聞我的和親對(duì)象是個(gè)殘疾皇子腋粥,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355

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

  • 目錄 1.靜態(tài)作用域與動(dòng)態(tài)作用域 2.變量的作用域 3.JavaScript 中變量的作用域 4.JavaScri...
    一縷殤流化隱半邊冰霜閱讀 7,094評(píng)論 37 113
  • 任何程序設(shè)計(jì)語(yǔ)言都有作用域的概念,簡(jiǎn)單的說架曹,作用域控制著變量與函數(shù)的可見性和生命周期隘冲。ES6之前,JS變量的作用域...
    卓三陽(yáng)閱讀 609評(píng)論 0 2
  • 寒風(fēng)掃蕩原野深處 土地消瘦绑雄,變了模樣 天空也被清掃得空空蕩蕩 月兒像一只孤魂在流浪 莊稼歸了倉(cāng)房 牛羊回了圈場(chǎng) 父...
    心海安瀾閱讀 271評(píng)論 2 14
  • 今天在群里看到一個(gè)人問怎么實(shí)現(xiàn)有序輸出服務(wù)器傳過來(lái)的數(shù)據(jù)展辞,感覺有興趣,就大致說了自己的思路万牺,寫了個(gè)偽碼罗珍。大部分應(yīng)用...
    終于閱讀 2,757評(píng)論 0 0
  • 小草很微弱洽腺,可是它們卻可以推倒壓在自己身上的巨石;遠(yuǎn)行千里覓食的鳥兒們覆旱,總會(huì)找到自己的故鄉(xiāng)……這是不離不棄的...
    漫漫無(wú)憂閱讀 1,376評(píng)論 2 0