摘要:前言和的區(qū)別是老生常談,看到網(wǎng)上一些文章的總結(jié),有的不太全面,甚至有的描述不太準(zhǔn)確,在這里盡量全面的總結(jié)下這三者的區(qū)別。最后以上大概是總結(jié)后的內(nèi)容,看來,還是多用吧。
前言
var 和 let 的區(qū)別是老生常談,看到網(wǎng)上一些文章的總結(jié),有的不太全面,甚至有的描述不太準(zhǔn)確,在這里盡量全面的總結(jié)下這三者的區(qū)別。
let 是 ES6新增的變量類型,用來代替 var 的一些缺陷,跟 var 相比主要有以下區(qū)別:
1. let 使用塊級作用域在 ES6之前,ES5中js只有全局作用域和函數(shù)作用域,例如:
if(true) { var a = "name" } console.log("a",a) // name
作用域是一個獨立的地盤,讓變量不外泄出去,但是上例中的變量就外泄了出去,所以此時 JS 沒有塊級作用域的概念。
var a = 1; function fn() { var a = 2; console.log("fn",a); } console.log("global",a); fn();
全局作用域就是最外層的作用域,如果我們寫了很多行 JS 代碼,變量定義都沒有用函數(shù)包括,那么它們就全部都在全局作用域中。這樣的壞處就是很容易沖突。
ES6中加入塊級作用域之后:
if(true) { let a = "name" } console.log("a",a) // Uncaught ReferenceError: a is not defined
塊作用域內(nèi)用 let 聲明的變量,在塊外是不可見的,如果引用的話就會報錯。
2. let 約束了變量提升而不是沒有變量提升在 js 中變量和函數(shù)都會提升:
function fn() { console.log("a",a); var a = 1; // undefind } fn()
a其實已經(jīng)在調(diào)用前被聲明了,只是沒有被初始化。JavaScript會把作用域里的所有變量和函數(shù)提到函數(shù)的頂部聲明,相當(dāng)于:
function fn() { var a; console.log("a",a); a = 1; // undefind } fn()
JavaScript會使用undefined缺省值創(chuàng)建變量a,事實上瀏覽器并沒有把聲明語句放到作用域的頂部,在編譯階段,控制流進入域,該域所有的變量和函數(shù)的聲明先進入內(nèi)存,文中代碼的相對位置不會變動。
變量提升指的是變量聲明的提升,不會提升變量的初始化和賦值。
并且函數(shù)的提升優(yōu)先級大于變量的提升:
function fn() { console.log("a", a); var a = 1; function a () { console.log("I am a function"); } } fn() // ? a () {console.log("I am a function");}
在上例中, let 聲明的變量的作用域之外引用該變量會報錯,但是否可理解為 let 沒有變量提升?
let a = "outside"; if(true) { console.log(a);//Uncaught ReferenceError: a is not defined let a = "inside"; }
報出錯誤 a 沒有被定義,而不是引用了全局作用域里的 a,說明 let 聲明的 a 也被提升了。
原因是 let 設(shè)計中的暫時性死區(qū):
當(dāng)前作用域頂部到該變量聲明位置中間的部分,都是該let變量的死區(qū),在死區(qū)中,禁止訪問該變量。由此,我們給出結(jié)論,let聲明的變量存在變量提升, 但是由于死區(qū)我們無法在聲明前訪問這個變量。
使用 var 可以重復(fù)聲明變量,但是 let 不允許在同一塊作用域內(nèi)重復(fù)聲明同一個變量:
function fn (){ var a = 1; let a = 2; console.log(a); //SyntaxError } function fn (){ let a = 1; let a = 2; console.log(a); //SyntaxError } function fn (a){ let a = 2; console.log(a); //SyntaxError }
上述代碼會報語法錯誤;
4. let不會成為全局對象的屬性我們在全局范圍內(nèi)聲明一個變量時,這個變量自動成為全局對象的屬性(在瀏覽器和Node.js環(huán)境下,這個全局對象分別是window和global),但let是獨立存在的變量,不會成為全局對象的屬性:
var a = 1; console.log(window.a); //1 let b = 2; console.log(window.b); // undefined5. const 聲明的常量
以上 let 的規(guī)則同樣適用于 const,但是跟 let 的區(qū)別是 const 聲明的變量不能重新賦值,所以 const 聲明的變量必須經(jīng)過初始化。
const a = 1; a = 2; // // Uncaught TypeError: Assignment to constant variable const b; // Uncaught SyntaxError: Missing initializer in const declaration最后
以上大概是總結(jié)后的內(nèi)容,看來,還是多用 let 、const 吧。
參考資料:http://es6.ruanyifeng.com/#do...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/108530.html
showImg(https://segmentfault.com/img/remote/1460000017757580); let和const是 ES6 新增的命令,用于聲明變量,這兩個命令跟 ES5 的var有許多不同,并且let和const也有一些細(xì)微的不同,再認(rèn)真閱讀了阮一峰老師的文檔后,發(fā)現(xiàn)還是有一些不知道的細(xì)節(jié)... 博客、前端積累文檔、公眾號、GitHub 內(nèi)容: var和let...
摘要:無關(guān)緊要的開頭最近因為一些事兒辭了剛剛找到的工作,處在待業(yè)狀態(tài),去稍微的面了幾家公司,有大有小,有好有壞,發(fā)現(xiàn)大家問起來的一些的問題跟我想的不一樣,下來再去研究發(fā)現(xiàn)我說的還是有些缺陷,雖然意思是對的,但是表達(dá)的很奇怪,怪不得面試官會誤會,參 /*===無關(guān)緊要的開頭start===*/最近因為一些事兒辭了剛剛找到的工作,處在待業(yè)狀態(tài),去稍微的面了幾家公司,有大有小,有好有壞,發(fā)現(xiàn)大家問...
摘要:區(qū)別標(biāo)簽空格分隔規(guī)范新增了兩種變量聲明方式,雖然在項目中也經(jīng)常用到和但是和到底有什么區(qū)別,今天做下總結(jié)。不允許重復(fù)聲明不允許在相同作用域內(nèi),重復(fù)聲明同一個變量。 var let const 區(qū)別 標(biāo)簽(空格分隔): ES6 ES6規(guī)范新增了let、const兩種變量聲明方式,雖然在項目中也經(jīng)常用到let和const但是和var到底有什么區(qū)別,今天做下總結(jié)。 1、let 聲明的變量只在...
摘要:規(guī)范對其是這樣進行的描述的。聲明定義了在正在運行的執(zhí)行上下文作用域內(nèi)的變量環(huán)境中的變量。在執(zhí)行時,由帶有的定義的變量被賦其設(shè)定項的的值。由于變量已經(jīng)被聲明,是可訪問的,因此會打印出正確的結(jié)果。 你想在在變量聲明之前就使用變量?以后再也別這樣做了。 新的聲明方式(let,const)較之之前的聲明方式(var),還有一個區(qū)別,就是新的方式不允許在變量聲明之前就使用該變量,但是var是可以...
摘要:命令新增了命令,跟類似,都是用來聲明變量的不允許重復(fù)聲明報錯不存在變量提升報錯正確寫法為既要先定義,后面才能有這個值,否則會報錯,如果改成會提示未定義,但是就直接報錯了暫時性死區(qū)只要在塊級作用域里面存在則它所聲明的變量就綁定在這個塊級作用域 let命令 ES6新增了let命令,跟var類似,都是用來聲明變量的 1.不允許重復(fù)聲明 { let a = 1; let a =...
閱讀 2267·2021-09-26 09:55
閱讀 3600·2021-09-23 11:22
閱讀 2163·2019-08-30 15:54
閱讀 1908·2019-08-28 18:03
閱讀 2605·2019-08-26 12:22
閱讀 3438·2019-08-26 12:20
閱讀 1735·2019-08-26 11:56
閱讀 2257·2019-08-23 15:30