成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6系列文章 塊級(jí)作用域

趙連江 / 2114人閱讀

摘要：聲明之函數(shù)作用域和全局作用域。塊級(jí)作用域不能重復(fù)聲明臨時(shí)性死區(qū)等特性用來解決變量存在的種種問題。塊級(jí)作用域終于在外面訪問不到了。一些常量聲明使用聲明的變量名全部大寫。

ES5之前javascript語言只有函數(shù)作用域和全局作用域，使用var來聲明變量，var聲明的變量還存在變量提升使人困惑不已。我們先來復(fù)習(xí)一下ES5的var聲明，再對(duì)比學(xué)習(xí)let和const 。

var var聲明之函數(shù)作用域和全局作用域。

來段代碼體會(huì)一下：

function getName() {
    if (1 + 1 === 2) {
        var name = "xixi";
    }

    console.log(name);
}

getName();//xixi

在c或java語言中name本應(yīng)該只在if塊中使用的，但是在if的外面也可以訪問到，這個(gè)就是 js沒有塊級(jí)作用域的一種體現(xiàn)。這個(gè)弊端在for循環(huán)中體現(xiàn)的十分明顯：

for (var i = 0; i < 10; i ++) {
    // ...
}

console.log(i);// 10

var i的本意是聲明個(gè)臨時(shí)變量i，用來遍歷數(shù)組等，本不應(yīng)該在for循環(huán)的外部訪問到，但現(xiàn)在卻可以被訪問到你說鬧不鬧心？好一點(diǎn)的程序員會(huì)用立即執(zhí)行函數(shù)來模擬塊級(jí)作用域，原來的我會(huì)注意一下盡量不使用相同的變量名?。

(function() {
    for (var i = 0; i < 10; i ++) {
        // ...
    }
})();

console.log(i);// undefined

以上：大家知道了 js 沒有塊級(jí)作用域。

變量可以重復(fù)聲明 
var name = "xixi";
console.log(name);// xixi
var name= "一步";
console.log(name);// 一步

不報(bào)錯(cuò)，困惑不困惑，這個(gè)就是變量可以重復(fù)聲明。

變量提升 
function getName() {
    console.log(name);
    var name = "xixi";
    // ...
}

getName();// undefined

console.log打印name為undefined。為啥不報(bào)錯(cuò)呢，對(duì)于一直使用js語言的人來說這個(gè)現(xiàn)象還好理解，如果是后臺(tái)轉(zhuǎn)前端的人來說估計(jì)得罵人了。這就是所謂的變量提升。簡(jiǎn)單的向大家解釋一下吧。

var name = "xixi";

這是一條被我們寫爛了的語句，包含兩個(gè)過程：var name; name = "xixi";分別為變量聲明和變量初始化。

變量提升： 無論變量聲明var name;處于什么位置，都會(huì)被提到作用域的頂部進(jìn)行。
let

ES6為讓變量生命周期更加可控，引入兩個(gè)非常好的特性let、const。塊級(jí)作用域、不能重復(fù)聲明、臨時(shí)性死區(qū)等特性用來解決 var 變量存在的種種問題。

塊級(jí)作用域 
function getName4ES6() {
    if (1 + 1 === 2) {
        let name = "xixi";
    }

    console.log(name);
}

getName4ES6(); // undefined

終于在{}外面訪問不到name了。for循環(huán)也變的簡(jiǎn)單了，大家試一下將for循環(huán)的var換成 let.

同一塊級(jí)作用域內(nèi)不能重復(fù)聲明變量 
function redefineValue() {
    let name = "xixi";
    let name = "一步";
}

redefineValue();// Uncaught SyntaxError: Identifier "name" has already been declared

重復(fù)聲明會(huì)報(bào)錯(cuò)

{
    let name = "xixi";
    console.log(name);// xixi
    {
        let name = "yibu";
        console.log(name); // yibu
    }
}

注意： 在 ES6中，{}就是一個(gè)塊級(jí)作用域。

臨時(shí)性死區(qū) 
function getName4ES6() {
    console.log(name);
    for (let i = 0; i < 10; i ++) {

    }
    let name = "xixi";
    // ...
}

getName4ES6();// Uncaught ReferenceError: name is not defined

在上文ES5中，name還會(huì)存在變量提升，值為undefined。ES6中又報(bào)錯(cuò)了。怎么解釋呢？。。。。這個(gè)就是臨時(shí)性死區(qū)的概念，在作用域塊中不可以在變量聲明前就使用變量，若使用是會(huì)出錯(cuò)的。

javascript引擎在發(fā)現(xiàn)變量聲明時(shí)，要么將變量聲明提升到作用域的頂部(var聲明變量時(shí))，要么將變量放在臨時(shí)性死區(qū)中(let、const聲明變量時(shí))，訪問臨時(shí)性死區(qū)中的變量會(huì)觸發(fā)運(yùn)行時(shí)錯(cuò)誤。

const

const和let同樣具有塊級(jí)作用域，不能重復(fù)聲明，臨時(shí)性死區(qū)的概念。它還具有兩個(gè)特有的特性：聲明的同時(shí)必須初始化、變量引用不可以改變。

聲明的同時(shí)必須初始化 
const name;//Uncaught SyntaxError: Missing initializer in const declaration

不賦值，就報(bào)錯(cuò)。這個(gè)也很好理解const的本意就是用來定義常量，不可變的值。若不在聲明時(shí)給出初始值以后就再也沒有機(jī)會(huì)了。

值不可變 
const name = "x9x9"；
name = "yyy";// Uncaught SyntaxError: Invalid or unexpected token

那么對(duì)象會(huì)怎樣呢？

const person = {
    name: "lala",
    age: 40
};

person = {};// VM1042:6 Uncaught TypeError: Assignment to constant variable. at :6:8

引用是不可變的，那我們?cè)诳纯磳?duì)象的屬性值是什么情況吧~

person.name = "yoyo";
console.log(person);// {name: "yoyo", age: 40}

沒有報(bào)錯(cuò)，對(duì)象引用不可改變，對(duì)象屬性可以變更。

let vs const

大家可能會(huì)困惑，什么時(shí)候使用let，什么時(shí)候使用const。let能做的const好像都可以。網(wǎng)上有一種流行做法：能用const就絕不用let，簡(jiǎn)單粗暴，不過很好用。
個(gè)人看法：若變量在后續(xù)方法中會(huì)被改變，就使用let。一些常量聲明使用const, const聲明的變量名全部大寫。代碼中的變量，如果是let聲明的就代表其可變，若是const聲明的，不論是簡(jiǎn)單數(shù)據(jù)類型還是引用類型變量就都不要改變它的值。這樣，程序會(huì)更加的健壯，大家合作起來也比較方便。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88863.html

相關(guān)文章

  • ES6系列之 let 和 const

    摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。這在語法上，稱為暫時(shí)性死區(qū)，簡(jiǎn)稱。這表明函數(shù)內(nèi)部的變量與循環(huán)變量不在同一個(gè)作用域，有各自單獨(dú)的作用域。系列文章系列文章地址 showImg(https://segmentfault.com/img/bVbrjjC); 為什么需要塊級(jí)作用域 ES5 只有全局作用域和函數(shù)作用域，沒有塊級(jí)作用域，這帶來很多不合...

    libxd 評(píng)論0 收藏0

  • JavaScript基礎(chǔ)系列---變量及其值類型

    摘要：但對(duì)于引用類型的數(shù)據(jù)主要是對(duì)象和數(shù)組，變量指向的內(nèi)存地址，保存的只是一個(gè)引用地址指針，只能保證這個(gè)引用地址指針是固定的，至于它指向的堆內(nèi)存中的存儲(chǔ)的值是不是可變的，就完全不能控制了。 基礎(chǔ)概念 變量是存儲(chǔ)信息的容器，這里需要區(qū)分一下：變量不是指存儲(chǔ)的信息本身，而是指這個(gè)用于存儲(chǔ)信息的容器，可以把變量想象成一個(gè)個(gè)用來裝東西的紙箱子 變量需要聲明，并且建議在聲明的同時(shí)進(jìn)行初始化，如下所...

    sugarmo 評(píng)論0 收藏0

  • ES6走走看看—由塊級(jí)作用域引出的一場(chǎng)變革

    摘要：塊級(jí)聲明塊級(jí)聲明是用于聲明在指定塊的作用域之外無法訪問的變量。美元符號(hào)可以放到任何一個(gè)位置，甚至單獨(dú)一個(gè)美元符號(hào)。塊級(jí)函數(shù)從開始，在嚴(yán)格模式下，塊里的函數(shù)作用域?yàn)檫@個(gè)塊。 持續(xù)更新的github筆記，鏈接地址：Front-End-Basics 此篇文章的筆記地址：字符到底發(fā)生了什么變化 ES6走走看看系列，特別鳴謝奇舞讀書會(huì)~ 塊級(jí)作用域又稱詞法作用域，存在于： 函數(shù)內(nèi)部（...

    荊兆峰 評(píng)論0 收藏0

  • 【進(jìn)階2-3期】JavaScript深入之閉包面試題解

    摘要：閉包面試題解由于作用域鏈機(jī)制的影響，閉包只能取得內(nèi)部函數(shù)的最后一個(gè)值，這引起的一個(gè)副作用就是如果內(nèi)部函數(shù)在一個(gè)循環(huán)中，那么變量的值始終為最后一個(gè)值。 （關(guān)注福利，關(guān)注本公眾號(hào)回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)） 本周正式開始前端進(jìn)階的第二期，本周的主題是作用域閉包，今天是第8天。 本計(jì)劃一共28期，每期重點(diǎn)攻克一個(gè)面試重難點(diǎn)，如果你還不了...

    alanoddsoff 評(píng)論0 收藏0

  • 【ES6系列】變量與塊級(jí)作用域

    摘要：不允許在相同作用域內(nèi)，重復(fù)聲明同一個(gè)變量。如但是在中則不再必要了，我們可以通過塊級(jí)作用域就能夠?qū)崿F(xiàn)本次主要針對(duì)中的變量和塊級(jí)作用域進(jìn)行了梳理學(xué)習(xí)，并且通過與的實(shí)現(xiàn)方式進(jìn)行了對(duì)比，從而看出其變化以及快捷與便利。 ECMAScript 6.0（以下簡(jiǎn)稱 ES6）是 JavaScript 語言的下一代標(biāo)準(zhǔn)，已經(jīng)在 2015 年 6 月正式發(fā)布了。它的目標(biāo)，是使得 JavaScript 語言可...

    PascalXie 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

趙連江

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<