1.1-js三種作用域介紹
1.作用域概念(Scope) : 變量可以起作用的范圍區(qū)域
1.1 ES5 有兩種作用域
a.全局作用域(Global Scope) : 函數(shù)外面聲明的變量,稱之為全局變量略水。 可以在頁(yè)面任何地方被訪問(wèn)
全局變量生命周期 : 從頁(yè)面加載 -> 到頁(yè)面關(guān)閉
b.局部作用域(Local Scope) : 函數(shù)里面聲明的變量,稱之為局部變量。 只能在函數(shù)里面被訪問(wèn)
局部變量生命周期 : 從函數(shù)開(kāi)始執(zhí)行 -> 到函數(shù)執(zhí)行結(jié)束
1.2 ES6 在ES5原有基礎(chǔ)上新增第三種作用域
c.塊級(jí)作用域(Block Scope) : (1)let/const關(guān)鍵字聲明 (2) 大括號(hào)里面聲明
塊級(jí)變量聲明周期 : 從大括號(hào)開(kāi)始 -> 到大括號(hào)結(jié)束
1-全局作用域
//1.1 全局作用域 : 在函數(shù)外部聲明的變量,可以在頁(yè)面任何地方被訪問(wèn)
? ? ? ? var a = 10;//全局變量
? ? ? ? let b = 20;//全局變量
? ? ? ? function fn() {
? ? ? ? ? ? console.log(a, b);//10,20?
? ? ? ? };
? ? ? ? fn();
? ? ? ? console.log(a, b);//10,20
? ? ? ? console.log(window.a);//10
? ? ? ? console.log(window.b);//undefined
2-局部作用域
1.2 局部作用域 : 在函數(shù)里面聲明的變量, 只能在函數(shù)內(nèi)部被訪問(wèn)
? ? ? ? function fn() {
? ? ? ? ? ? var a = 10;//局部變量
? ? ? ? ? ? let b = 20;//局部變量
? ? ? ? ? ? console.log(a,b);//10,20
? ? ? ? };
? ? ? ? fn();
? ? ? ? console.log(a);//報(bào)錯(cuò)? a is not defined
? ? ? ? console.log(b);//報(bào)錯(cuò)? b is not defined
3-塊級(jí)作用域
1.3 塊級(jí)作用域 :? 在大括號(hào)里面 且 使用let聲明的變量
? ? ? ? if(true){
? ? ? ? ? ? var a = 10;//全局變量
? ? ? ? ? ? let b = 20;//塊級(jí)變量(塊級(jí)作用域 :只在大括號(hào)內(nèi)部起作用)
? ? ? ? ? ? console.log(a,b);//10,20
? ? ? ? };
? ? ? ? console.log(a);//10
? ? ? ? // console.log(b);//報(bào)錯(cuò)? b is not defined
1.2-塊級(jí)作用域(let)與局部作用域(var)區(qū)別
1.相同點(diǎn)
都是只可以在局部被訪問(wèn)师溅。
2.不同點(diǎn)
a. 局部范圍不同
局部作用域 : 僅限于 ‘函數(shù)體’ 內(nèi)部聲明的變量
塊級(jí)作用域 : 一切大括號(hào){} 內(nèi)部使用let/const聲明的變量
b. 優(yōu)先級(jí)不同(執(zhí)行上下文不同)
局部作用域優(yōu)先級(jí) > 塊級(jí)作用域 (在函數(shù)體大括號(hào)內(nèi)部糯崎,無(wú)論使用什么關(guān)鍵字聲明var/let/const都是局部作用域)
c. 預(yù)解析規(guī)則不同
var : 顯示變量提升袭景。 (在聲明前可以訪問(wèn)變量初烘,獲取的是undefined)
js編譯器在預(yù)解析階段,會(huì)把變量的聲明提升到當(dāng)前作用域最頂端,賦值語(yǔ)句還是在原地
let : 隱式變量提升找筝。 (在聲明前不可以訪問(wèn)變量随静,會(huì)報(bào)錯(cuò))
變量的聲明也會(huì)提前八千,但是不允許被訪問(wèn)
暫時(shí)性死區(qū)(隱式變量提升)。一旦在當(dāng)前作用域使用let,則js編譯器在預(yù)解析階段會(huì)將該變量"綁定"這個(gè)作用域,不受任何外部影響
區(qū)別1:局部范圍不同
局部作用域范圍 : 函數(shù)內(nèi)部
塊級(jí)作用域范圍 : 大括號(hào)內(nèi)部
區(qū)別2:優(yōu)先級(jí)不同(執(zhí)行上下文不同)
函數(shù)體大括號(hào) 無(wú)論是let還是var燎猛,都是局部變量
區(qū)別3:預(yù)解析規(guī)則不同(let隱式變量提升恋捆,形成暫時(shí)性死區(qū))
2.塊級(jí)作用域與局部作用域區(qū)別
? ? ? ? function fn(){
? ? ? ? ? ? /* var預(yù)解析規(guī)則: 聲明提升到作用域最頂端? var a;? 只是聲明提前 */
? ? ? ? ? ? console.log(a);//undefined
? ? ? ? ? ? /* 注意這個(gè)報(bào)錯(cuò)原因: 不是因?yàn)閎沒(méi)有聲明,而是因?yàn)閎不能在賦值前被訪問(wèn) */
? ? ? ? ? ? console.log(b);//報(bào)錯(cuò)? 'b' before initialization
? ? ? ? ? ? var a = 10;
? ? ? ? ? ? let b = 20;
? ? ? ? ? ? console.log(a,b);
? ? ? ? };
? ? ? ? fn();
聲明全局變量
var a = 10;
{
/* 暫時(shí)性死區(qū):一旦在塊級(jí)作用域使用let重绷,它所聲明的變量就“綁定”(binding)這個(gè)區(qū)域沸停,不再受外部的影響。
*/
//console.log(a);//報(bào)錯(cuò): 'a' before initialization
let a = 100;
console.log(a);//100
};
console.log(a);//10