一. var 

1. var聲明作用域 

使用var在一個函數(shù)內(nèi)部定義一個變量,就意味著該變量將在函數(shù)退出時被銷毀: 

function test(){
  var a='hi' //局部變量
}
test()
console.log(a)//報錯

//如果省略操作符 
function test(){
  a='hi' //全局變量
}
test() 
console.log(a) //'hi' 
//去掉var操作符之后,就變成了全局變量,只要調(diào)用一次test(),就會定義這個變量,并且可以在函數(shù)外部訪不  
//推薦這樣做,容易造成混亂

 2. 聲明提升 ,也就是把所有變量聲明都拉倒函數(shù)作用域的訂單,此外,使用var聲明同一個變量也沒有問題;

function test(){
  console.log(a)
  var a='hi'
}
test() // undefined 

//等價于下列代碼 
function test(){
  var a; 
  console.log(a)
  a='hi'
}

//聲明同一個變量
function foo(){
  var a=10;
  var a=20;
  var a=30;
  console.log(a); 
}
foo(); //30

二. let 

1.let 跟var 的作用差不多,最明顯的區(qū)別是,let聲明的范圍是塊作用域,而var聲明的范圍是函數(shù)作用域 

//var 沒有塊作用域   塊作用域是是函數(shù)作用域的子集 因此let也沒有函數(shù)作用域
if(true){
 var name='matt'; 
 let age=26;
 console.log(name); //matt
 console.log(age); //26
}
console.log(name); //matt 
console.log(age); //age沒有定義 

2. let 也不允許同一個塊作用域出現(xiàn)冗余聲明

var name; 
var name; 

let age;
let age; // age已經(jīng)聲明過了


//不在同一個塊中可以重復(fù)聲明 
let age=30;
console.log(age); //30
if(true){
 let age=26;
 console.log(age); //26
}

//在同一作用域內(nèi)，不能混用 var 和 let 聲明同名變量，否則會拋出 SyntaxError。

var name;
let name;//SyntaxError 

let age； 
var age； //SyntaxError

3. let 有暫時性死區(qū) 就是let聲明的變量不會在作用域中被提升

// var 會提升
console.log(name); //undefined 
var name='Matt'

//let 不會提升.
console.log(age)// age沒有定義
let age=16; 
在let聲明之前的執(zhí)行瞬間被稱為"暫時性死區(qū)"

4. 使用let在全局作用域中聲明的變量不會變成window對象的屬性(var聲明的則會)

var name='matt'
console.log(window.name); //matt 

let age=26
console.log(window.age); //undefined 

5.for循環(huán)中的let聲明和var 聲明

在let 出現(xiàn)之前,for循環(huán)定義的迭代變量會滲透到循環(huán)體外部;

for(var i=0;i<5;++i){
  //循環(huán)邏輯
}
console.log(i); //5

//改成使用let之后,這個問題就消失了,因為迭代變量的作用域僅限于for循環(huán)內(nèi)部;
for(let i=0;i<5;++i){
 //循環(huán)
}
console.log(i); //沒有定義

 還有個面試經(jīng)常提及的問題,在for循環(huán)的循環(huán)體內(nèi)定義一個定時器,循環(huán)結(jié)束后,查看結(jié)果

 1. 使用var 的時候 

for(var i=0;i<5;i++){
  setTimeout(()=>console.log(i),1000)
}
//你可能會以為輸出0,1,2,3,4
//實際會輸出5,5,5,5,5

解釋: 我們知道,循環(huán)結(jié)束的條件是i=5, 從事件循環(huán)機制的角度來分析上面的代碼,是這樣的: 

調(diào)用堆棧：用于存儲程序按順序調(diào)用的函數(shù)的詳細(xì)信息的堆棧。

   1. 首先在Call Stack(調(diào)用堆棧)中執(zhí)行同步代碼var i=0,此時i小于5,執(zhí)行下一行代碼,發(fā)現(xiàn)是一個setTImeout計時器,它是一個宏任務(wù),這個時候會被推入到WEB API中,計時器開始執(zhí)行; 

   2. 執(zhí)行i++,在Call Stack中進入下一次迭代循環(huán),重復(fù)上面操作 

    其實上面的代碼中WEB API一共存放過5個計時器,每個計時器進入到WEB API, 1s之后就會被推      入到QUEUE(隊列)中(最后隊列中也會有5個計時器),等待EVENT LOOP(事件循環(huán))檢測到Call           Stack為空時,將QUEUE中每一個計時器推入到Call Stack執(zhí)行,最后全部代碼執(zhí)行完成,從調(diào)用棧       中退出

       使用var 的時候,由于每一次循環(huán)得到的迭代變量會被上一次的覆蓋,最后i=5,退出循環(huán),迭代變           量也被泄露了出去了,每一個計時器引用同一個i,因此會打印5個5

     《JavaScript高級程序設(shè)計4》: 是因為在退出循環(huán)時,迭代變量保存的是導(dǎo)致循環(huán)退出的值 : 5 

       在之后執(zhí)行超時邏輯時,所有i都是同一個變量,因而輸出的都是同一個最終值

2.使用let 的時候 

for(let j=0;j<5;j++){
  setTimeout(()=>{
    console.log('j',j) //1 2 3 4 5
  })
}

 個人理解 : for每次循環(huán)都是不同的塊級作用域,let聲明的變量是塊級作用域的,所以也不存在重復(fù)聲明的問題

《JavaScript高級程序設(shè)計4》: 在使用let聲明迭代變量時,js引擎在后臺會為每個迭代循環(huán)聲明一個新的迭代變量,每個setTimeout引用的都是不同變量實例,所以console.log()輸出的使我們期望的值,也就是循環(huán)執(zhí)行過程中每個迭代變量的值 

這種每次迭代聲明一個獨立變量實例的行為適用于所有風(fēng)格的for循環(huán),包括for-in和for-of循環(huán)

三. const 

1. const 的行為與let基本相同,唯一一個蟲重要的區(qū)別是用它聲明變量時必須同時初始化變量,且嘗試修改const聲明的變量會導(dǎo)致運行時的錯誤

const age=26;
age=36; //TypeError: 給常量賦值 

2.const聲明的限制只適用于它指向變量的引用,換句話說,如果const變量引用的是一個對象,那么修改這個對象內(nèi)部的屬性并不違反const的限制 

const person={ }
person.name='Matt'; //ok 

3. js引擎會為for循環(huán)中的let聲明分別創(chuàng)建獨立的變量實例,雖然const變量跟let變量很相似,但是不能用const 來聲明迭代變量(因為迭代變量會自增);

for (const i=0; i<10;++i)() //TypeError: 給常量賦值

總結(jié) 

到此這篇關(guān)于js中var,let,const的區(qū)別及相關(guān)面試題講解的文章就介紹到這了,更多相關(guān)js中var,let,const區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論