談?wù)勎覍?duì)JavaScript原型和閉包系列理解(隨手筆記9)
相關(guān)閱讀:談?wù)勎覍?duì)JavaScript原型和閉包系列理解(隨手筆記6) 談?wù)勎覍?duì)JavaScript原型和閉包系列理解(隨手筆記8)
作用域
引用《JavaScript語(yǔ)言精粹和編程實(shí)踐》上對(duì)作用域的定義:
變量作用域又叫變量的可見(jiàn)性。變量作用域完成對(duì)信息的隱蔽,也就是處理“割據(jù)”問(wèn)題。
js中是沒(méi)有塊級(jí)作用域的(ES6中有一個(gè)let,可以在{},if,for里面聲明,同時(shí)作用域限定在塊級(jí)。let聲明的變量不存在變量提升!這里不談?wù)撨@個(gè),因?yàn)槲乙彩桥既豢吹健?。
我們?cè)诰帉?xiě)代碼的時(shí)候,不要在“塊”里面聲明變量,應(yīng)該在代碼的一開(kāi)始就聲明好,以避免發(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í)行過(guò)程就跑完了。
然后借用一下原作者的完整圖:
總結(jié):
作用域只是一個(gè)“地盤”,要通過(guò)作用域?qū)?yīng)的執(zhí)行上下文環(huán)境來(lái)獲取變量的值。同一個(gè)作用域下,不同的調(diào)用會(huì)產(chǎn)生不同的執(zhí)行上下文環(huán)境,繼而產(chǎn)生不同的變量的值。所以,作用域中變量的值是在執(zhí)行過(guò)程中產(chǎn)生的確定的,而作用域卻是在函數(shù)創(chuàng)建時(shí)就確定了。所以,如果要查找一個(gè)作用域下某個(gè)變量的值,就需要找到這個(gè)作用域?qū)?yīng)的執(zhí)行上下文環(huán)境,再在其中尋找變量的值。
相關(guān)文章
微信小程序使用swiper組件實(shí)現(xiàn)層疊輪播圖
這篇文章主要為大家詳細(xì)介紹了微信小程序使用swiper組件實(shí)現(xiàn)層疊輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11javascript for循環(huán)從入門到偏門(效率優(yōu)化+奇特用法)
for循環(huán)是非常基礎(chǔ)的javascript知識(shí),但由于JS太靈活了,所以可能出現(xiàn)一些讓初學(xué)者崩潰的寫(xiě)法。我決定由淺入深的解釋一下for循環(huán),算是給比我還新手的新手解惑吧,少走彎路2012-08-08event.X和event.clientX的區(qū)別分析
解釋一下event.X和event.clientX有什么區(qū)別?event.clientX返回事件發(fā)生時(shí),mouse相對(duì)于客戶窗口的X坐標(biāo) event.X也一樣但是如果設(shè)置事件對(duì)象的定位屬性值為relative2011-10-10一文詳解如何在uniapp中優(yōu)雅地使用WebView
最近工作中遇到webview,對(duì)于我這個(gè)剛接觸前端的小白來(lái)說(shuō)真的不懂啥意思,下面這篇文章主要給大家介紹了關(guān)于如何在uniapp中優(yōu)雅地使用WebView的相關(guān)資料,需要的朋友可以參考下2023-01-01JavaScript高級(jí)程序設(shè)計(jì) 讀書(shū)筆記之八 Function類及閉包
Function類及閉包,學(xué)習(xí)js的朋友可以參考下2012-02-02JavaScript插入動(dòng)態(tài)樣式實(shí)現(xiàn)代碼
能夠把CSS樣式包含到HTML頁(yè)面中的元素有兩個(gè)。其中,<link>元素用于包含來(lái)自外部的文件,而<style>元素用于指定嵌入的樣式2012-02-02mock.js模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離
這篇文章主要為大家詳細(xì)介紹了mock.js模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07