2021-8-20 前端達(dá)人
JavaScript 中的作用域、預(yù)解析以及變量提升
作用域：變量的作用范圍
局部作用域：函數(shù)內(nèi)部
在局部作用域聲明的變量稱為局部變量，局部變量只能在當(dāng)前函數(shù)內(nèi)部使用
1）函數(shù)在執(zhí)行的時(shí)候會(huì)在內(nèi)存中開辟新空間
2）當(dāng)執(zhí)行完畢函數(shù)之后，會(huì)關(guān)閉作用域空間(變量被銷毀)
注意：形參也是局部變量
function fn() {
let b = 5
// 局部訪問 變量 b
console.log(b) // 5
}
fn()
// 全局訪問 變量 b
console.log(b) // 訪問不存在的變量，報(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() {
// 局部訪問 變量 a
console.log(a) // 2
}
fn()
// 全局訪問 變量 a
console.log(a) // 2
1
2
3
4
5
6
7
8
在控制臺(tái)打印得到如下結(jié)果
函數(shù)內(nèi)部之所以能夠訪問到變量 a ，是因?yàn)橛幸粋€(gè)作用鏈，函數(shù)內(nèi)部訪問一個(gè)變量會(huì)先在自己的作用域內(nèi)找，找不到會(huì)向上級(jí)作用域找，找不到就會(huì)報(bào)錯(cuò)
例如 如下代碼
(找不到報(bào)錯(cuò)的情況)
function fn() {
function fn1() {
function fn2() {
// 局部訪問 變量 a
console.log(a) // 2
}
fn2()
}
fn1()
}
fn()
1
2
3
4
5
6
7
8
9
10
11
控制臺(tái)打印
(全局變量局部訪問的情況)
let a = 'hello javascript'
function fn() {
function fn1() {
function fn2() {
// 局部訪問 變量 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
想要訪問這個(gè)對(duì)象里面的屬性必須通過 obj.屬性，而不能直接訪問
預(yù)解析
預(yù)解析：在代碼執(zhí)行之前把變量和函數(shù)會(huì)提前解析到當(dāng)前作用域的最前面
任何作用域在執(zhí)行之前都要預(yù)解析 (函數(shù)優(yōu)于變量)
變量：帶有聲明的變量，只定義不賦值
1）變量在聲明之前被訪問，變量的值為 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
但是，注意?。。∽⒁猓。?！
變量必須是 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，說明變量已經(jīng)存在并且提升了，但是只提升了聲明沒有提升賦值，所以打印 undefined ，如果沒有提升的話，就會(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 用來定義常量，不可以改值
6）const 定義的常量必須初始化有值，let可以不設(shè)置值
建議：常量名字因?yàn)槭遣豢梢愿膭?dòng)的值，所以常量名建議用大寫，一般用于定義固定不變的值
文章來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專注而深入的界面設(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lzhte.cn