JavaScript 中的作用域、預(yù)解析以及變量提升

作用域：變量的作用范圍

局部作用域：函數(shù)內(nèi)部



在局部作用域聲明的變量稱為局部變量，局部變量只能在當(dāng)前函數(shù)內(nèi)部使用



1）函數(shù)在執(zhí)行的時(shí)候會(huì)在內(nèi)存中開(kāi)辟新空間



2）當(dāng)執(zhí)行完畢函數(shù)之后，會(huì)關(guān)閉作用域空間(變量被銷毀)



注意：形參也是局部變量



function fn() {

    let b = 5

  // 局部訪問(wèn) 變量 b 

    console.log(b) // 5

}

fn()

// 全局訪問(wèn) 變量 b

console.log(b) // 訪問(wèn)不存在的變量，報(bào)錯(cuò)

1

2

3

4

5

6

7

8

在控制臺(tái)打印得到如下結(jié)果







全局作用域：函數(shù)外部



1）在全局作用域聲明的變量是全局變量，全局變量可以在任何地方使用



2）因?yàn)槿肿兞靠梢匀魏蔚胤绞褂?，所以要特別關(guān)注局部變量



let a = 2

function fn() {

    // 局部訪問(wèn) 變量 a

    console.log(a) // 2

}

fn()

// 全局訪問(wèn) 變量 a

console.log(a) // 2

1

2

3

4

5

6

7

8

在控制臺(tái)打印得到如下結(jié)果







函數(shù)內(nèi)部之所以能夠訪問(wèn)到變量 a ，是因?yàn)橛幸粋€(gè)作用鏈，函數(shù)內(nèi)部訪問(wèn)一個(gè)變量會(huì)先在自己的作用域內(nèi)找，找不到會(huì)向上級(jí)作用域找，找不到就會(huì)報(bào)錯(cuò)



例如 如下代碼



(找不到報(bào)錯(cuò)的情況)



function fn() {

    function fn1() {

        function fn2() {

            // 局部訪問(wèn) 變量 a

    console.log(a) // 2

        }

        fn2()

    }

    fn1()

}

fn()

1

2

3

4

5

6

7

8

9

10

11

控制臺(tái)打印







(全局變量局部訪問(wèn)的情況)



let a = 'hello javascript'

function fn() {

    function fn1() {

        function fn2() {

            // 局部訪問(wèn) 變量 a

    console.log(a) // hello javascript

        }

        fn2()

    }

    fn1()

}

fn()

1

2

3

4

5

6

7

8

9

10

11

12

控制臺(tái)打印







塊級(jí)作用域：類似局部作用域



1）用 {} 包裹一塊



2）let聲明變量具有塊級(jí)作用域，var聲明變量不具有塊級(jí)作用域



例如



(以字面量對(duì)象為例)



let obj = {

    uname: '法外狂徒-張三',

    age: 68

}

1

2

3

4

想要訪問(wèn)這個(gè)對(duì)象里面的屬性必須通過(guò) obj.屬性，而不能直接訪問(wèn)



預(yù)解析

預(yù)解析：在代碼執(zhí)行之前把變量和函數(shù)會(huì)提前解析到當(dāng)前作用域的最前面



任何作用域在執(zhí)行之前都要預(yù)解析 (函數(shù)優(yōu)于變量)



變量：帶有聲明的變量，只定義不賦值



1）變量在聲明之前被訪問(wèn)，變量的值為 undefined



函數(shù)：帶有名字的函數(shù)，只定義不調(diào)用



1）函數(shù)優(yōu)于變量



console.log(a) // undefined

fn() // hello javascript



function fn() {

    console.log('hello javascript')

}

var a = 2

1

2

3

4

5

6

7

代碼是自上而下執(zhí)行，但是在代碼執(zhí)行前會(huì)先進(jìn)行代碼的預(yù)解析，把變量以及函數(shù) 聲明 提升到當(dāng)前作用域的最前面，如上代碼，console.log(a) 會(huì)打印 undefined



但是，注意！?。∽⒁猓。。?br />


變量必須是 var 聲明的才可以，如果是 let 聲明的變量會(huì)報(bào)錯(cuò)



圖 (var 聲明的 a)







圖 (let 聲明的 a)







變量提升

預(yù)解析會(huì)引起變量的提升



變量不聲明就輸出會(huì)報(bào)錯(cuò)



console.log(a) // 報(bào)錯(cuò)

1

控制臺(tái)打印







用 var 聲明



console.log(a) // undefined



var a = 'hello javascript'

1

2

3

控制臺(tái)打印 undefined ，我們知道變量定義不賦值會(huì)輸出 undefined，說(shuō)明變量已經(jīng)存在并且提升了，但是只提升了聲明沒(méi)有提升賦值，所以打印 undefined ，如果沒(méi)有提升的話，就會(huì)像上面一樣在執(zhí)行 console.log(a) 的時(shí)候直接報(bào)錯(cuò)



結(jié)論：var 存在變量提升



用 let 聲明



console.log(a) // 報(bào)錯(cuò)



let a = 'hello javascript'

1

2

3

結(jié)論：let 不存在變量提升



補(bǔ)充：

申明變量：let \ var \ const



1）let 聲明的變量不在window內(nèi)



2）var 聲明的變量相當(dāng)于給window添加了個(gè)屬性，let不會(huì)



3）var 聲明的變量不具有塊級(jí)作用域，let具有塊級(jí)作用域



4）var 可以重復(fù)聲明，let只能聲明一次



5）const 用來(lái)定義常量，不可以改值



6）const 定義的常量必須初始化有值，let可以不設(shè)置值



建議：常量名字因?yàn)槭遣豢梢愿膭?dòng)的值，所以常量名建議用大寫，一般用于定義固定不變的值

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)