成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

ES6 札記：let 和 const

bluesky / 2363人閱讀

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

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

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

我們用大寫變量名來標(biāo)識這是一個常量，但這種約定并不能保證常量的不可變，在程序的執(zhí)行過程中，依舊有可能改變該常量的值。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

console.log(PI); //undefined

此時形成了一個閉包。

一個經(jīng)典問題，循環(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)
}

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

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

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

在 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)
}

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

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

而對于 ES6，有了 let，就可以直接用起來了。

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

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

前面我們提到過，使用 var 聲明的變量在全局作用域中會成為全局對象的一個屬性：

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

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

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

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

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

welcome("Rainy"); // undefined

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

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

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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

  • ES6 札記：函數(shù)

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

    CoreDump 評論0 收藏0

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

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

    googollee 評論0 收藏0

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

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

    tracymac7 評論0 收藏0

  • JS 異步系列 —— Promise 札記

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

    zhouzhou 評論0 收藏0

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

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

    yzzz 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<