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

資訊專欄INFORMATION COLUMN

let和var的小結(jié)

phoenixsky / 1173人閱讀

摘要：與關(guān)鍵字不同的是，它聲明的變量只能是全局或者整個函數(shù)塊的。塊的已經(jīng)生明，并未初始化，它仍處在暫存死區(qū)小結(jié)當(dāng)在塊中使用時，將變量的作用域限制為該塊。注意的作用域在它被聲明的函數(shù)內(nèi)的區(qū)別。

let允許你聲明一個作用域被限制在塊級中的變量、語句或者表達(dá)式。與var關(guān)鍵字不同的是，它聲明的變量只能是全局或者整個函數(shù)塊的。

一 作用域

let聲明的變量只能在其聲明的塊或子塊中使用，這個和var很相似，二者之間最主要的區(qū)別在于var聲明的變量的作用域是整個封閉函數(shù)。

// var
function testVar() {
  var a = 0;
  if (true) {
    var a = 1;
    console.log(a);  // 輸出1
  }
  console.log(a);  // 輸出1
}

// let
function testLet() {
  let a = 0;
  if (true) {
    let a = 1;
    console.log(a);  // 輸出1 （不同的變量）
  }
  console.log(a);  // 輸出0
}
小結(jié)

在testVar函數(shù)里面重復(fù)輸出了1，var聲明的變量的作用域是整個封閉函數(shù)，所以到if里面被賦值為1，最后都輸出為1。

在testLet函數(shù)里面{}，兩個花括號相當(dāng)于一個作用域，兩個a在不同的作用域里面，所以不受影響。（使用let可以完全代替閉包）

二簡化內(nèi)部函數(shù)代碼

比如給許多函數(shù)添加事件

/*
*  使用let
*/

let lists = document.getElementsByTagName("li");
for (let i = 0; i < lists.length; i++) {
  lists[i].onclick = function(ev) {
    console.log(`點擊了第${i}個元素`);
  }
}
console.log(i);  // 報錯 Uncaught ReferenceError: i is not defined

運行這段代碼點擊每個元素都能輸出正確的i值，而且console報錯

var lists = document.getElementsByTagName("li");
for (var i = 0; i < lists.length; i++) {
  lists[i].onclick = function(ev) {
    console.log("點擊了第"+i+"個元素"); // 點擊了第6個元素
  }
}
console.log(i);  // 輸出6


// 解決辦法，可以使用自執(zhí)行函數(shù)
var lists = document.getElementsByTagName("li");
for (var i = 0; i < lists.length; i++) {
  (function(i){
    lists[i].onclick = function(ev) {
      console.log("點擊了第"+i+"個元素"); // 正常輸出
    }
  })(i);
}
console.log(i);  // 輸出6

上面的代碼可以看出無論點擊哪個元素都是輸出“點擊了第6個元素”，而且最后console也是6。

小結(jié)

因為（匿名）內(nèi)部函數(shù)的五個實例引用了變量i的五個不同實例。注意，如果你將let替換為var，則它將無法正常工作，因為所有內(nèi)部函數(shù)都將返回相同的i：6的最終值。此外，我們可以通過將創(chuàng)建新元素的代碼移動到每個循環(huán)的作用域來保持循環(huán)更清晰。

三 暫存死區(qū)的錯誤

不能再相同函數(shù)和相同作用域里面重新聲明同一個變量

{
  let a;
  let a; //Uncaught SyntaxError: Identifier "a" has already been declared
}

let 綁定不受變量提升的約束，也就是let聲明不會被提升到當(dāng)前執(zhí)行上下文的頂部，如果你在初始化之前引用它，也會報上面那個錯誤。

{
  console.log(a);  // Uncaught ReferenceError: a is not defined
  let a;
  let b;
}

上面介紹了es6作用域的問題，表達(dá)式(2 + 55)內(nèi)的標(biāo)識符“a”會解析為if塊的a,而不是覆蓋值為2的a。if塊的a已經(jīng)生明，并未初始化，它仍處在暫存死區(qū)

function test(){
 var a = 2;
 if (true) {
    let a = (a + 55); // ReferenceError
  }
}
test();
小結(jié)

當(dāng)在塊中使用時，let將變量的作用域限制為該塊。注意var的作用域在它被聲明的函數(shù)內(nèi)的區(qū)別。

總結(jié)

let有塊級作用域；

沒有變量提升；

暫存死區(qū)的錯誤；

不能重復(fù)聲明；

do表達(dá)式。

--- 參考阮老師的 《ECMAScript 6 入門》

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

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

相關(guān)文章

  • ES6部分特性小結(jié)

    摘要：但是或者，會將聲明關(guān)進(jìn)一個小黑屋也是暫時性死區(qū)，只有執(zhí)行到變量聲明這句語句時，變量才會從小黑屋被放出來，才能安全使用這個變量。 前言 踩著前人的肩膀，努力前行。參考了很多前人的文章。 1.變量聲明const和let es6之前聲明變量只能用var，var的特點是無論聲明在何處，都會被視為聲明在函數(shù)的最頂部(不在函數(shù)內(nèi)即在全局作用域的最頂部) function test(){ i...

    pinecone 評論0 收藏0

  • Js 面向?qū)ο?em>小結(jié)

    摘要：碰過的一個有趣的問題實現(xiàn)一個構(gòu)造函數(shù)，有一個屬性，每次調(diào)用該值加。共有方法看下面的代碼可以發(fā)現(xiàn)，被重復(fù)創(chuàng)建了如果不想方法或者屬性在每次時新創(chuàng)建一份，可以將其設(shè)置在構(gòu)造函數(shù)的原型上。 面向?qū)ο笥腥齻€特點，一個個來說： 封裝 私有變量 利用閉包實現(xiàn)對象的私有變量。 function Animal (age) { this.getAge = function () { retu...

    SQC 評論0 收藏0

  • 前端crypto-js解密報malformed utf-8 data小結(jié)

    摘要：一般情況下，很少會在前端進(jìn)行加解密的操作，因為沒有太大的必要性，前端的代碼是很容易看到的，即使這樣，我覺得還是有比較處理一下的，至少不讓別人一眼就看到信息我使用存儲了一些用戶的用戶名昵稱等的信息，通過進(jìn)行加解密處理，這里我選用了加密算法對 一般情況下，很少會在前端進(jìn)行加解密的操作，因為沒有太大的必要性，前端的代碼是很容易看到的，即使這樣，我覺得還是有比較處理一下的，至少不讓別人一眼就看...

    codergarden 評論0 收藏0

  • map與forEach的小結(jié)

    摘要：方法功能創(chuàng)建一個新數(shù)組，其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果。。方法功能遍歷，對數(shù)組中的元素依次處理。 Array.map()方法功能 : 創(chuàng)建一個新數(shù)組，其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果。。參數(shù) : （currentValue，index，arrOrigin）(當(dāng)前元素的值，當(dāng)前元素的索引，當(dāng)前元素的數(shù)組對象)使用 : var...

    tomato 評論0 收藏0

  • JS 作用域 var與let 區(qū)別

    摘要：在入門時，最讓人傻傻分不清楚的就是與帶來的作用域的苦惱。明確循環(huán)內(nèi)部的與中的是在不同的作用域中，它們有各自單獨的作用域。局部使用定義時只在該函數(shù)作用域內(nèi)部有效。 在es6入門時，最讓人傻傻分不清楚的就是var與let帶來的作用域的苦惱。最近又一次翻看阮一峰老師的文章，重新有了自己的小結(jié)。 代碼分析 var a = []; for (var i = 0; i < 10; i++) { ...

    antyiwei 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<