JavaScript作用域?qū)W習(xí)筆記

jerryloveemily 發(fā)布于2019-08-19 18:45 / 659人閱讀

摘要：我們?cè)賮砜匆幌碌谝欢未a小紅小黑腳本出錯(cuò)腳本出錯(cuò)在這段代碼中變量與函數(shù)，都擁有局部作用域。作用域鏈的最前端，始終都是當(dāng)前執(zhí)行代碼所在的作用域的變量對(duì)象。

個(gè)人博客原址

無論什么語言中，作用域都是一個(gè)十分重要的概念，在JavaScript中也不例外，作用域定義了變量或者函數(shù)有權(quán)訪問的范圍，決定了它們各自的行為。要理解JavaScript中的作用域首先就要知道：在let出現(xiàn)之前，JS中變量的作用域只有兩種：全局作用域和局部作用域。（本文也只討論這兩種作用域）

全局作用域

全局作用域是最外圍的一個(gè)執(zhí)行環(huán)境，可以在代碼的任何地方訪問到。在瀏覽器中，我們的全局作用域就是window。因此在瀏覽器中，所有的全局變量和函數(shù)都是作為window對(duì)象的屬性和方法創(chuàng)建的。

下面就來看看全局作用域的創(chuàng)建方式：

全局變量與全局函數(shù)

var name = "小紅";
function doSomething(){
    var anotherName = "小黑";
    function showName(){
        console.info(name)
        console.info(anotherName)
    }
    showName();
}

console.info(name);//小紅
console.info(anotherName);//【腳本出錯(cuò)】
doSomething();//小紅---小黑
showName();//【腳本出錯(cuò)】

通過代碼可以很清楚的看出來，我在前面所說的 作用域定義了變量或者函數(shù)有權(quán)訪問的范圍 ，在這里我們定義了一個(gè)全局的變量name與全局函數(shù)doSomething()，他可以在任何地方被直接訪問。但是我們又在函數(shù)內(nèi)部創(chuàng)建了變量anotherName與函數(shù)showName()，通過代碼中的調(diào)用情況可以發(fā)現(xiàn)，我們?cè)谕獠空{(diào)用它時(shí)提示【腳本出錯(cuò)】，因?yàn)樗麄兲幱诰植孔饔糜騼?nèi)（稍后講），而 外部環(huán)境不能訪問內(nèi)部環(huán)境的任何變量與函數(shù)。這就涉及到了作用域的概念(稍后講)

未聲明直接定義的變量

function showName() {
    var fullName = "小紅";
    anotherName = "小黑";
    console.info(fullName)
}
showName();//小紅
console.info(anotherName);//小黑
console.info(fullName);//【腳本出錯(cuò)】

在這樣的情況下，變量anotherName擁有全局作用域，而fullName在函數(shù)外部無法訪問到。（注：在高程中明確說明，不聲明而直接初始化變量是錯(cuò)誤做法，應(yīng)該避免這樣的情況嚴(yán)格模式下，初始化未聲明的變量將報(bào)錯(cuò)）

所有window對(duì)象上的屬性都具有全局作用

這個(gè)實(shí)際上在上面已經(jīng)提到了：所有的全局變量和函數(shù)都是作為window對(duì)象的屬性和方法創(chuàng)建的。，自然window對(duì)象它本身所具有的屬性和方法，同樣是處于全局作用域，例如：window.location，window.name等等。

局部作用域

其實(shí)在上面的代碼中，為了展示全局作用域的效果，我們就已經(jīng)創(chuàng)造了局部作用域。局部作用域和全局作用域正好相反，局部作用域一般只在固定的代碼片段內(nèi)可訪問到，最常見的就是函數(shù)內(nèi)部，所以在很多地方就會(huì)有人把它稱為函數(shù)作用域。（記住let之前無塊級(jí)作用域）。我們?cè)賮砜匆幌碌谝欢未a：

var name = "小紅";
function doSomething(){
    var anotherName = "小黑";
    function showName(){
        console.info(name)
        console.info(anotherName)
    }
    showName();
}
console.info(anotherName);//【腳本出錯(cuò)】
showName();//【腳本出錯(cuò)】

在這段代碼中變量 anotherName,與函數(shù) showName()，都擁有局部作用域。因此它不能被外部所訪問，那么問題就來了，為什么全局變量他就能在局部作用域內(nèi)被訪問到呢？這就是 JavaScript 中的作用域鏈概念！

作用域鏈

在JS中:”一切皆是對(duì)象, 函數(shù)也是”。

在 JavaScript 中，每個(gè)函數(shù)都有著自己的作用域，在每次調(diào)用一個(gè)函數(shù)的時(shí)候，就會(huì)進(jìn)入一個(gè)函數(shù)內(nèi)的作用域，而當(dāng)函數(shù)執(zhí)行返回以后，就返回調(diào)用前的作用域。

當(dāng)代碼在一個(gè)作用域內(nèi)執(zhí)行時(shí)，就會(huì)根據(jù)其上下文創(chuàng)建一個(gè)作用域鏈，該作用域鏈的用途就是控制當(dāng)前作用域?qū)τ趦?nèi)所有的變量與函數(shù)的有序訪問。作用域鏈的最前端，始終都是當(dāng)前執(zhí)行代碼所在的作用域的變量對(duì)象。

var name = "小紅";

function changeName(){
    if(name ==="小紅"){
        name="小黑";
    }else{
        name ="小紅";
    }
}
changeName();
console.info("新名字:"+name);//小黑

在這個(gè)例子中，changName()被定義在全局作用域下，他的作用域鏈包含著包含兩個(gè)對(duì)象：1.它本身的變量對(duì)象(函數(shù)都會(huì)包含arguments對(duì)象)，2.全局環(huán)境對(duì)象。之所以能在函數(shù)內(nèi)部訪問到變量name,就是因?yàn)樵谒淖饔糜蛑?，能找到它。?strong>JS的標(biāo)識(shí)符解析，是沿著作用域鏈一級(jí)一級(jí)的查找搜索的過程，從作用域鏈的最前端開始直到全局環(huán)境，最終沒有查找到時(shí)將報(bào)錯(cuò)。）我們?cè)倩剡^頭來稍微改一下第一段代碼：并且看看他們能訪問到那些變量：

var name = "小紅";
function doSomething(){
    var anotherName = "小黑";
    function showName(){
        var author ="三省吾身丶丶";
        console.info(name)
        console.info(anotherName)
        // 在這里可以訪問到 name 、anotherName 、author
    }
    showName();
    // 在這里可以訪問到 name anotherName ,不能訪問到 author
}
doSomething();
// 在這里只能訪問到 name

要想理解這種作用域其實(shí)也很簡單，作用域就像是一架 每一個(gè)臺(tái)階都是相對(duì)封閉（同級(jí)），并且只能上不能下的梯子，在越底層的臺(tái)階上，它能走的步數(shù)越多（作用域鏈越長）。為了找到它想要的東西，就開始爬臺(tái)階，每爬一步臺(tái)階，都能看到這一級(jí)臺(tái)階上有什么東西，直到最頂上的那一階。（找到了就帶回去一起玩耍，玩完了之后還得換回去，要是最后都沒找到就掉下去摔死了）

坑與示例解析

在了解坑之前，其實(shí)只要記住權(quán)威指南里面的一句話，就可以躲過很多這方面的坑了，那就是：JavaScript中的函數(shù)運(yùn)行在它們被定義的作用域里,而不是它們被執(zhí)行的作用域里

下面就來看看這一個(gè)例子：

var name = "小紅";
function showName() {
    console.info(name);
}

function show() {
    var name = "小黑";
    showName();
}

show();

結(jié)果會(huì)是什么呢？

小紅

如果你記住并且理解了上面的話，那么應(yīng)該可以得到這個(gè)結(jié)果。用作用域鏈的角度解析：執(zhí)行show()函數(shù)時(shí)，進(jìn)入function show(){}的作用域內(nèi)，然后執(zhí)行showName()函數(shù)，再進(jìn)入到function showName(){}的作用域內(nèi)，要輸出name，就在當(dāng)前作用域找，但是找不到，然后就向上爬一層，在全局環(huán)境中找到了var name = "小紅";，所以show()就輸出了小紅。

再來看一個(gè)這個(gè)例子的改動(dòng)版本

var name = "小紅";

function show() {
    var name = "小黑";

    function showName() {
        console.info(name);
    }
    showName();
}
show();

結(jié)果是：小黑

解析：執(zhí)行show()函數(shù)時(shí)，進(jìn)入function show(){}的作用域內(nèi)，然后執(zhí)行showName()函數(shù)，再進(jìn)入到function showName(){}的作用域內(nèi)，要輸出name，就在當(dāng)前作用域找，發(fā)現(xiàn)本身找不到，就向上爬一層到了show()里面，發(fā)現(xiàn)已經(jīng)找到了var name = "小黑";，那么就停止查找，輸出了小黑
。

先到這，不知道有沒有對(duì)作用域有了更多的了解呢？感覺有些地方還了解的不夠透徹，希望在開發(fā)項(xiàng)目的過程中能有更深的理解。

如果有錯(cuò)誤之處，請(qǐng)指正。謝謝！

GPU云服務(wù)器云服務(wù)器 javascript作用域鏈 javascript學(xué)習(xí)筆記作用域中作用域

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79954.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

jerryloveemily

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于ShineBlink物聯(lián)網(wǎng)開發(fā)板和機(jī)智云平臺(tái)開發(fā)的“針對(duì)短期內(nèi)寵物無人照顧的智能寵物屋”系統(tǒng)

閱讀 2479·2021-09-29 09:34
大廠難進(jìn)？(來自雙非非科班應(yīng)屆生的自述信)

閱讀 3316·2021-09-23 11:21
課程后臺(tái)管理系統(tǒng)

閱讀 2508·2021-09-06 15:00
第十三集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫( 評(píng)分組件小星星 )

閱讀 1134·2019-08-30 15:44
寫出一個(gè)美觀的表單頁

閱讀 2036·2019-08-29 17:23
Web開發(fā)系列【1】實(shí)用的網(wǎng)頁布局（PC端）

閱讀 3008·2019-08-29 16:44
Webpack 最佳實(shí)踐總結(jié)(三)

閱讀 3064·2019-08-29 13:13
用CSS和JS打造一個(gè)簡單的圖片編輯器

閱讀 1943·2019-08-28 18:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JavaScript作用域?qū)W習(xí)筆記

相關(guān)文章

javascript學(xué)習(xí)筆記(1)

JavaScript學(xué)習(xí)第五天筆記（作用域）

學(xué)習(xí)筆記：JavaScript 閉包是怎么通過作用域鏈霸占更多內(nèi)存的？

Js學(xué)習(xí)筆記：閉包

**[學(xué)習(xí)筆記] JavaScript 作用域鏈**

發(fā)表評(píng)論

0條評(píng)論

jerryloveemily

男|高級(jí)講師

TA的文章

基于ShineBlink物聯(lián)網(wǎng)開發(fā)板和機(jī)智云平臺(tái)開發(fā)的“針對(duì)短期內(nèi)寵物無人照顧的智能寵物屋”系統(tǒng)

大廠難進(jìn)？(來自雙非非科班應(yīng)屆生的自述信)

課程后臺(tái)管理系統(tǒng)

第十三集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫( 評(píng)分組件小星星 )

寫出一個(gè)美觀的表單頁

Web開發(fā)系列【1】實(shí)用的網(wǎng)頁布局（PC端）

Webpack 最佳實(shí)踐總結(jié)(三)

用CSS和JS打造一個(gè)簡單的圖片編輯器

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JavaScript作用域?qū)W習(xí)筆記

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！