国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6 札記：let 和 const

bluesky / 2310人閱讀

摘要：在之前，中沒有常量聲明方式，有的僅僅是一種命名上的約定。這樣就可以最大程度上規(guī)避變量的意外變化來(lái)使程序發(fā)生異常的可能性。為了避免作用域的污染，在中需要使用一個(gè)立即執(zhí)行函數(shù)來(lái)確保變量的作用域范圍。

在 ES6 之前，JS 中沒有常量聲明方式，有的僅僅是一種命名上的約定。

var PI = 3.14;
PI = 4;
console.log(PI); // 4

我們用大寫變量名來(lái)標(biāo)識(shí)這是一個(gè)常量，但這種約定并不能保證常量的不可變，在程序的執(zhí)行過(guò)程中，依舊有可能改變?cè)摮Ａ康闹怠?/p>

而在 ES6 中，給出了聲明一個(gè)常量的方法：

const PI = 3.14;
PI = 4; // Uncaught TypeError: Assignment to constant variable.

通過(guò) const 聲明的常量在賦值之后不能再次進(jìn)行賦值，否則會(huì)報(bào)錯(cuò)。

在使用 ES6 的程序中，我們提倡對(duì)變量聲明時(shí)采用 const 來(lái)代替 var。在確實(shí)需要改變變量的值的時(shí)候使用 let。這樣就可以最大程度上規(guī)避變量的意外變化來(lái)使程序發(fā)生異常的可能性。

有句老生常談的話，JS 中一切皆對(duì)象。JS 中的數(shù)據(jù)類型有兩類，一類是按值傳遞，另一類使按引用傳遞。

對(duì)于字符串?dāng)?shù)字等基本類型，變量保存的指向該值實(shí)際數(shù)據(jù)的內(nèi)存地址。而對(duì)于對(duì)象，變量保存的是指向該對(duì)象的一個(gè)內(nèi)存引用。

所以，實(shí)際上 const 綁定的不可變常量對(duì)于對(duì)象而言，是其指向的對(duì)象的內(nèi)存地址綁定不可變，而非指向?qū)ο蟮膶傩圆豢筛淖儭?/p> 

const person = {
  name: "John",
  age: 20
};

person.name = "Tom";
console.log(person.name); // Tom
person = {} // Uncaught TypeError

除了對(duì)多次賦值的錯(cuò)誤提示外，使用 let 和 const 以代替帶來(lái)的好處還有實(shí)現(xiàn)了塊級(jí)作用域。

在任何一本 es6 之前的 js 書中，變量部分幾乎都會(huì)告訴我們，js 中的變量沒有塊級(jí)作用域。作用域是函數(shù)作用域。

順著作用域鏈，在非函數(shù)內(nèi)聲明的變量會(huì)存在于全局作用域中，在瀏覽器環(huán)境中，他會(huì)變成 window 對(duì)象的一個(gè)屬性。

var PI = 3.14
console.log(window.PI) // 3.14

為了避免作用域的污染，在 ES5 中需要使用一個(gè)立即執(zhí)行函數(shù)來(lái)確保變量的作用域范圍。

(function () {
  var PI = 3.14;
  console.log(PI); // 3.14
})();

console.log(PI); //undefined

此時(shí)形成了一個(gè)閉包。

一個(gè)經(jīng)典問(wèn)題，循環(huán)綁定事件：

var buttons = document.querySelectorAll(".button");

for (var i = 0; i < buttons.length; ++i) {
  buttons[i].addEnentListener("click", function(evt) {
    console.log(i)
  }, false)
}

在頁(yè)面中，為三個(gè)按鈕綁定 click 事件，輸出相應(yīng)按鈕的數(shù)組下標(biāo)索引。

結(jié)果我們可以看到，三個(gè)按鈕綁定的 i 值均為 3。也就是說(shuō)，在上述循環(huán)中，按鈕綁定的值為 i 最后一次自增的值。

為了將綁定的 i 值限定在每次循環(huán)內(nèi)，也就是需要在 for 循環(huán)內(nèi)形成塊級(jí)作用域。

在 ES5 之前，可以這樣改寫：

var buttons = document.querySelectorAll(".button");

for (var i = 0; i < buttons.length; ++i) {
  (function (i) {
    buttons[i].addEventListener("click", function(evt) {
      console.log(i)
    }, false)
  })(i)
}

利用閉包，我們保存來(lái)每次循環(huán)三次生成三個(gè)作用域，三個(gè)作用域的值互不影響。

閉包使得變量的生命周期得以延續(xù)。

而對(duì)于 ES6，有了 let，就可以直接用起來(lái)了。

const buttons = document.querySelectorAll(".button");

for (let i = 0; i < buttons.length; ++i) {
  buttons[i].addEventListener("click", function(evt) {
    console.log(i)
  }, false)
}

前面我們提到過(guò)，使用 var 聲明的變量在全局作用域中會(huì)成為全局對(duì)象的一個(gè)屬性：

window.PI = 3.14;
var PI = 4;
console.log(PI); // 4
console.log(window.PI); // 4

而 const 和 let 聲明的變量并不會(huì)成為全局對(duì)象的屬性。也不會(huì)更改原先的屬性值，而是"遮蔽"該值。

window.PI = 3.14;
const PI = 4;
console.log(PI); // 4
console.log(window.PI); // 3.14
變量聲明提升與臨時(shí)死區(qū)

在使用 const 和 let 來(lái)代替 var 使用時(shí)，需要關(guān)注到不同的一點(diǎn)是，const 和 let 不存在變量聲明提升：

const welcome = function (name) {
  console.log(welcome_text);
  var welcome_text = `hello ${name}`;
};

welcome("Rainy"); // undefined

JS 引擎在掃描代碼時(shí)，遇到 var 聲明的變量會(huì)將其提升至作用域頂部。因而在這里，console.log() 函數(shù)訪問(wèn) welcome_text 變量，變量聲明提升之后未進(jìn)行賦值，返回 undefined。

而遇到 const 和 let 聲明的變量時(shí)，并不會(huì)將其提升至作用域頂部，此時(shí)該變量位于臨時(shí)死區(qū)(TDZ)中，直到遇到該變量聲明語(yǔ)句才會(huì)移出 TDZ，在此之前訪問(wèn)該變量都會(huì)拋出錯(cuò)誤。

const welcome = function (name) {
  console.log(welcome_text);
  const welcome_text = `hello ${name}`
};

welcome("Rainy"); // Uncaught ReferenceError: welcome_text is not defined

-EOF-

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/94935.html

相關(guān)文章

  • ES6 札記：函數(shù)

    摘要：所以，當(dāng)函數(shù)傳參為時(shí)，短路操作符會(huì)給定默認(rèn)值。對(duì)于來(lái)說(shuō)，無(wú)論是否在嚴(yán)格模式下，更改參數(shù)值的行為都不會(huì)同步更改對(duì)象。且箭頭函數(shù)中的值無(wú)法改變而非箭頭函數(shù)也正因?yàn)槿绱?，箭頭函數(shù)無(wú)法作為構(gòu)造函數(shù)，因?yàn)橹禑o(wú)法綁定至構(gòu)造函數(shù)的實(shí)例。 如同我們所看到的，ES6 中引入來(lái)箭頭函數(shù)，相比 ES5 來(lái)講是最為直觀而明顯的特性。 在 ES6 之前，聲明一個(gè)函數(shù)： function add(a, b) { ...

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

  • ES6常用知識(shí)學(xué)習(xí)札記

    摘要：在年正式發(fā)布了，簡(jiǎn)稱，又稱為。再次簡(jiǎn)寫循環(huán)迭代數(shù)組每個(gè)元素都執(zhí)行一次回調(diào)函數(shù)。方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。注意對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。 轉(zhuǎn)載請(qǐng)注明出處 原文連接 http://blog.huanghanlian.com/article/5c7aa6c7bf3acc0864870f9d es6 是什么 首先弄明白ECMA和js的關(guān)系。ECMA是標(biāo)準(zhǔn)，Jav...

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

  • ES6常用知識(shí)學(xué)習(xí)札記

    摘要：在年正式發(fā)布了，簡(jiǎn)稱，又稱為。再次簡(jiǎn)寫循環(huán)迭代數(shù)組每個(gè)元素都執(zhí)行一次回調(diào)函數(shù)。方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。注意對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。 轉(zhuǎn)載請(qǐng)注明出處 原文連接 http://blog.huanghanlian.com/article/5c7aa6c7bf3acc0864870f9d es6 是什么 首先弄明白ECMA和js的關(guān)系。ECMA是標(biāo)準(zhǔn)，Jav...

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

  • JS 異步系列 —— Promise 札記

    摘要：以下，請(qǐng)求兩個(gè)，當(dāng)兩個(gè)異步請(qǐng)求返還結(jié)果后，再請(qǐng)求第三個(gè)此處為調(diào)用后的結(jié)果的數(shù)組對(duì)于來(lái)說(shuō)，只要參數(shù)數(shù)組有一個(gè)元素變?yōu)闆Q定態(tài)，便返回新的。 showImg(https://segmentfault.com/img/remote/1460000015444020); Promise 札記 研究 Promise 的動(dòng)機(jī)大體有以下幾點(diǎn)： 對(duì)其 api 的不熟悉以及對(duì)實(shí)現(xiàn)機(jī)制的好奇; 很多庫(kù)(比...

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

  • CSS札記（一）：CSS選擇器

    一、語(yǔ)法規(guī)則 選擇器{ 屬性1:屬性值1; 屬性2:屬性值2; ...... } /*注釋*/ 二、如何在html中應(yīng)用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夾和HTML位于同一個(gè)目錄下） 2. 內(nèi)部嵌入css /*css代碼*/ 3...

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

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

0條評(píng)論

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