如何理解JS中的作用域與作用域鏈梧油?

大家好~ ?我是一枚正直純潔的苦逼程序員I凰省!@茉伞M首印!

1.背景介紹

什么是作用域呢迄委,簡(jiǎn)單的說褐筛,作用域就是變量與函數(shù)的可訪問范圍,即作用域控制著變量與函數(shù)的可見性和生命周期叙身。在JavaScript中,變量的作用域有全局作用域和局部作用域兩種硫狞。

2.知識(shí)剖析

1.全局作用域(Global Scope) 在代碼中任何地方都能訪問到的對(duì)象擁有全局作用域信轿,一般來說一下幾種情形擁有全局作用域:

(1)在函數(shù)外面定義的變量擁有全局作用域,例如:

var a ="全局變量";

function tion(){

console.log(a);

}

tion();

(2)所有末定義直接賦值的變量自動(dòng)聲明為擁有全局作用域残吩,例如:

function tion(){

var a="變量";

b="全局變量";

console.log(a);

}

tion();//變量

console.log(b);//全局變量

console.log(a);//腳本錯(cuò)誤

變量b擁有全局作用域财忽,而a在函數(shù)外部無法訪問到。

(3)所有window對(duì)象的屬性擁有全局作用域

一般情況下泣侮,window對(duì)象的內(nèi)置屬性都都擁有全局作用域即彪,例如window.name、window.top等等活尊。

var a ='baidu.com';

function text(){

console.log(this.a);

}

text();// 'baidu.com'

window.text();// 'baidu.com'

console.log(window.a);// 'baidu.com'

在上面示例中隶校,a變量和text()函數(shù)方法沒有指定上級(jí)對(duì)象,所在二者會(huì)被添加到window全局對(duì)象蛹锰,所以直接訪問二者與通過window訪問本質(zhì)相同(如深胳,直接訪問text()與使用window.text()訪問一樣)。

3.常見問題

如何更加直觀的體現(xiàn)作用域鏈

4.解決方案

5.編碼實(shí)戰(zhàn)

? ? ? ? ? ? ? ? ? dome

6.擴(kuò)展思考

如何運(yùn)用作用域鏈的知識(shí)進(jìn)行性能優(yōu)化

其實(shí)作用域鏈就是JS引擎查詢數(shù)據(jù)的一個(gè)鏈表铜犬,后定義的覆蓋先定義的舞终,查詢不到定義的數(shù)據(jù)就往深一層查詢,一直到全局作用域?yàn)橹?但是越往內(nèi)層延伸癣猾,讀寫速度就會(huì)越慢敛劝,查找全局變量是最慢的。所以纷宇,在編寫代碼的時(shí)候應(yīng)盡量少使用全局變量夸盟,盡可能使用局部變量。 如果一個(gè)跨作用域的對(duì)象被引用了一次以上呐粘,則先把它存儲(chǔ)到局部變量里再使用满俗。例如下面的代碼:?

function changeColor(){

document.getElementById("a").onclick=function(){

document.getElementById("b").style.backgroundColor="red";

document.getElementById("a").style.backgroundColor="red"; };

}

這個(gè)函數(shù)引用了兩次全局變量document转捕,查找該變量必須遍歷整個(gè)作用域鏈,直到最后在全局對(duì)象中才能找到唆垃。這段代碼可以重寫如下:?

function changeColor(){

var a=document.getElementById("a");

var b=document.getElementById("b")

a.onclick=function(){

a.style.backgroundColor="red";

b.style.backgroundColor="red";

}; } 這段代碼比較簡(jiǎn)單五芝,但是如果程序中有大量的全局變量被從新反復(fù)訪問,那么重寫后的代碼性能會(huì)有顯著改善辕万。

7.參考文獻(xiàn)

參考:?JavaScript 開發(fā)進(jìn)階:理解 JavaScript 作用域和作用域鏈

8.更多討論

三個(gè)問題

1.

意思是作用域鏈就是JS引擎查詢數(shù)據(jù)的一個(gè)鏈表枢步,后定義的覆蓋先定義的,查詢不到定義的數(shù)據(jù)就往深一層查詢渐尿,一直到全局作用域?yàn)橹?但是越往內(nèi)層延伸醉途,讀寫速度就會(huì)越慢,查找全局變量是最慢的砖茸。所以隘擎,在編寫代碼的時(shí)候應(yīng)盡量少使用全局變量,盡可能使用局部變量凉夯。 如果一個(gè)跨作用域的對(duì)象被引用了一次以上货葬,則先把它存儲(chǔ)到局部變量里再使用。

2.


回答 局部變量劲够,因?yàn)椴樵兊臅r(shí)候一一級(jí)一級(jí)的從局部到全局震桶。

3.

閉包是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式(通常是一個(gè)函數(shù)),因而這些變量也是該表達(dá)式的一部分征绎。

ppt

視頻

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蹲姐,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子人柿,更是在濱河造成了極大的恐慌柴墩,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件顷扩,死亡現(xiàn)場(chǎng)離奇詭異拐邪,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)隘截,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門扎阶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人婶芭,你說我怎么就攤上這事东臀。” “怎么了犀农?”我有些...
    開封第一講書人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵惰赋,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng)赁濒,這世上最難降的妖魔是什么轨奄? 我笑而不...
    開封第一講書人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮拒炎,結(jié)果婚禮上挪拟,老公的妹妹穿的比我還像新娘。我一直安慰自己击你,他們只是感情好玉组,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著丁侄,像睡著了一般惯雳。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鸿摇,一...
    開封第一講書人閱讀 51,365評(píng)論 1 302
  • 那天石景,我揣著相機(jī)與錄音,去河邊找鬼拙吉。 笑死鸵钝,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的庐镐。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼变逃,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼必逆!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起揽乱,我...
    開封第一講書人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤名眉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后凰棉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體损拢,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年撒犀,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了福压。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡或舞,死狀恐怖荆姆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情映凳,我是刑警寧澤胆筒,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站诈豌,受9級(jí)特大地震影響仆救,放射性物質(zhì)發(fā)生泄漏抒和。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一彤蔽、第九天 我趴在偏房一處隱蔽的房頂上張望摧莽。 院中可真熱鬧,春花似錦铆惑、人聲如沸范嘱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丑蛤。三九已至,卻和暖如春撕阎,著一層夾襖步出監(jiān)牢的瞬間受裹,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來泰國打工虏束, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留棉饶,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓镇匀,卻偏偏與公主長(zhǎng)得像照藻,于是被迫代替她去往敵國和親辞嗡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子纽乱,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

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

  • 大家好,我是IT修真院武漢分院第10期學(xué)員余佳貝凤覆,一枚正直善良的web程序員晰韵。 今天給大家分享一下发乔,修真院官網(wǎng)js...
    寡人yu閱讀 268評(píng)論 0 0
  • 一、作用域 一個(gè)變量的作用域(scope)是程序源代碼中定義的這個(gè)變量的區(qū)域雪猪。 1. 在JS中使用的是詞法作用域(...
    掙脫吧小白閱讀 437評(píng)論 0 0
  • 大家好只恨,我是IT修真院鄭州分院第四期的學(xué)員王相博译仗,一枚正直、純潔坤次、善良的前端程序員 今天給大家分享一下古劲,修真院官網(wǎng)...
    More_ce0d閱讀 851評(píng)論 5 5
  • 三、閉包和高階函數(shù) 3.1 閉包 3.1.1 變量的作用域 所謂變量的作用域缰猴,就是變量的有效范圍产艾。通過作用域的劃分...
    梁同學(xué)de自言自語閱讀 1,452評(píng)論 0 6
  • 泰克發(fā)瘋般地向克里特威爾實(shí)驗(yàn)室飛奔著。他的家在克里特威爾實(shí)驗(yàn)室的公寓里,而現(xiàn)在闷堡,實(shí)驗(yàn)室已然成為了五面怪的基地隘膘。泰克...
    程序獵人閱讀 630評(píng)論 0 2