let和var的小結

phoenixsky 發(fā)布于2019-08-26 11:33 / 1216人閱讀

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

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

一作用域

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

// 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
}

小結

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

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

二簡化內部函數代碼

比如給許多函數添加事件

/*
*  使用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í)行函數
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。

小結

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

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

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

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

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

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

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

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

小結

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

總結

let有塊級作用域；

沒有變量提升；

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

不能重復聲明；

do表達式。

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

GPU云服務器云服務器 linux的var Lets Let js 中 let

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

轉載請注明本文地址：http://m.hztianpu.com/yun/107113.html

ES6部分特性小結

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

pinecone 2019-08-23 11:26 評論0 收藏0
Js 面向對象小結

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

SQC 2019-08-22 18:28 評論0 收藏0
前端crypto-js解密報malformed utf-8 data小結

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

codergarden 2019-08-23 14:21 評論0 收藏0
map與forEach的小結

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

tomato 2019-08-23 18:34 評論0 收藏0
JS 作用域 var與let 區(qū)別

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

antyiwei 2019-08-21 18:30 評論0 收藏0