談?wù)勎覍?duì)JavaScript原型和閉包系列理解(隨手筆記9)
相關(guān)閱讀:談?wù)勎覍?duì)JavaScript原型和閉包系列理解(隨手筆記6) 談?wù)勎覍?duì)JavaScript原型和閉包系列理解(隨手筆記8)
作用域
引用《JavaScript語言精粹和編程實(shí)踐》上對(duì)作用域的定義:
變量作用域又叫變量的可見性。變量作用域完成對(duì)信息的隱蔽,也就是處理“割據(jù)”問題。
js中是沒有塊級(jí)作用域的(ES6中有一個(gè)let,可以在{},if,for里面聲明,同時(shí)作用域限定在塊級(jí)。let聲明的變量不存在變量提升!這里不談?wù)撨@個(gè),因?yàn)槲乙彩桥既豢吹健?。
我們?cè)诰帉懘a的時(shí)候,不要在“塊”里面聲明變量,應(yīng)該在代碼的一開始就聲明好,以避免發(fā)生歧義。
for(var i = 0; i < 10; i++) { //不好的聲明方式
//...
}
console.log(i);
/*----------------------------------------------*/
var i = 0; //好的聲明方式
for(i = 0; i < 10; i++) {
//....
}
console.log(i);
javascript除了全局作用域之外,還有一個(gè)函數(shù)作用域。
我們?cè)诼暶髯兞康臅r(shí)候,全局代碼在最前端聲明,函數(shù)中聲明變量要在函數(shù)體前面聲明。同時(shí),聲明變量的時(shí)候必須用"var"操作符。
var a = 10, //全局作用域
b = 20;
function fn() { //fn函數(shù)作用域
var a = 100,
c = 300;
function bar() { //bar函數(shù)作用域
var a = 1000,
d = 4000;
}
}
全局代碼、fn函數(shù)和bar函數(shù)都會(huì)形成一個(gè)作用域。作用域有上下級(jí)關(guān)系,上下級(jí)關(guān)系是看函數(shù)在哪個(gè)作用域下創(chuàng)建的。fn函數(shù)作用域下創(chuàng)建了bar函數(shù),"fn函數(shù)作用域"就是"bar函數(shù)的作用域"的上級(jí)。
作用域的最大用處就是隔離變量,不同作用域下同名變量不會(huì)有沖突
--------------------------------------------------------------------------------
作用域在函數(shù)定義的時(shí)候就已經(jīng)確定了,而不是函數(shù)調(diào)用的時(shí)候確定。

1、程序在加載的時(shí)候就已經(jīng)確定了全局上下文環(huán)境,并隨著程序的執(zhí)行而對(duì)變量就行賦值。

2、執(zhí)行到36行,調(diào)用fn(10),創(chuàng)建fn函數(shù)的執(zhí)行上下文環(huán)境,壓棧,并將此上下文設(shè)置為活動(dòng)狀態(tài)。

3、執(zhí)行到32行,調(diào)用bar(100),創(chuàng)建bar(100)函數(shù)的執(zhí)行上下文環(huán)境,壓棧,并將此上下文設(shè)置為活動(dòng)狀態(tài)。

4、bar(100)調(diào)用完畢,出棧,bar(100)函數(shù)上下文環(huán)境被銷毀。接著執(zhí)行33行,調(diào)用bar(200),創(chuàng)建bar(200)函數(shù)的執(zhí)行上下文環(huán)境,壓棧,并將此上下文設(shè)置為活動(dòng)狀態(tài)。

5、bar(200)調(diào)用完畢,出棧,其上下文環(huán)境被銷毀。此時(shí)的控制權(quán)交給了fn(10)上下文環(huán)境,其再次變?yōu)榛顒?dòng)狀態(tài)。

6、此時(shí)fn(10)調(diào)用完畢,出棧,其上下文環(huán)境被銷毀。控制權(quán)交給了全局執(zhí)行上下文環(huán)境。

到這里這一段代碼的執(zhí)行過程就跑完了。
然后借用一下原作者的完整圖:

總結(jié):
作用域只是一個(gè)“地盤”,要通過作用域?qū)?yīng)的執(zhí)行上下文環(huán)境來獲取變量的值。同一個(gè)作用域下,不同的調(diào)用會(huì)產(chǎn)生不同的執(zhí)行上下文環(huán)境,繼而產(chǎn)生不同的變量的值。所以,作用域中變量的值是在執(zhí)行過程中產(chǎn)生的確定的,而作用域卻是在函數(shù)創(chuàng)建時(shí)就確定了。所以,如果要查找一個(gè)作用域下某個(gè)變量的值,就需要找到這個(gè)作用域?qū)?yīng)的執(zhí)行上下文環(huán)境,再在其中尋找變量的值。
相關(guān)文章
JS判斷是否為JSON對(duì)象及是否存在某字段的方法(推薦)
下面小編就為大家?guī)硪黄狫S判斷是否為JSON對(duì)象及是否存在某字段的方法(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JavaScript 生成隨機(jī)數(shù)并自動(dòng)大小排序
JavaScript按規(guī)定生成隨機(jī)數(shù),并按指定順序自動(dòng)排序,本例中將生成1——100以內(nèi)的隨機(jī)數(shù),并按照由小到大的順序排列起來。2009-12-12
JS首屏加載時(shí)間優(yōu)化的解決方法總結(jié)
首屏加載時(shí)間是一個(gè)衡量網(wǎng)頁性能和用戶體驗(yàn)的關(guān)鍵指標(biāo),這個(gè)問題無論是在面試中還是在項(xiàng)目開發(fā)中都占有極其高的權(quán)重,本文為大家整理了幾種JS中優(yōu)化首屏加載時(shí)間的方法,希望對(duì)大家有所幫助2024-02-02
uni-app常用的幾種頁面跳轉(zhuǎn)方式總結(jié)
uni-app的頁面跳轉(zhuǎn)和小程序和vue很相似,只是方法和標(biāo)簽有所不同,這篇文章主要給大家介紹了關(guān)于uni-app常用的幾種頁面跳轉(zhuǎn)方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
詳解JavaScript表單驗(yàn)證(E-mail 驗(yàn)證)
這篇文章主要為大家詳細(xì)介紹了JavaScript表單驗(yàn)證,重點(diǎn)介紹了E-mail驗(yàn)證,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03
JavaScript實(shí)現(xiàn)的瀏覽器下載文件的方法
本文通過一段簡單的代碼給大家介紹了js實(shí)現(xiàn)瀏覽器下載文件的方法,需要的的朋友參考下吧2017-08-08
JavaScript實(shí)現(xiàn)網(wǎng)頁上的浮動(dòng)廣告的簡單方法
JavaScript實(shí)現(xiàn)網(wǎng)頁上的浮動(dòng)廣告的簡單方法,需要的朋友可以參考一下2013-06-06
深入理解JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域
匿名函數(shù)沒有實(shí)際名字的函數(shù),匿名函數(shù)(function() {})();是一個(gè)特殊的閉包寫法。本文蛀牙給大家介紹JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域,需要的朋友可以參考下2018-08-08
JS+HTML5實(shí)現(xiàn)圖片在線預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了JS+HTML5實(shí)現(xiàn)圖片在線預(yù)覽功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07

