ES6之---讀懂let才能少踩坑

Aemple發表於2018-04-20

ES6之---讀懂let才能少踩坑

開聊吧!(前面一小部分大佬們可以自動忽略)

首先,打臉我的無知!

在剛接觸ES6的時候,我就「以為」我理解了let。然後漫長的自學道路上,let一次又一次的讓我認識到了自己的無知。

希望寫了這篇文章之後能用我的無知,讓在這條道路上的人能少踩些坑。


初識let

和很多人一樣,在聽說了ES6很好用之後,就馬不停蹄的去學習這門充滿著語法糖的東西。開始抱著emmmm快速把es6過一遍的念頭去了菜鳥教程(因為覺得這裡的教程很簡潔,但是希望大家以後慎重選擇初學教程!!!)

ES6之---讀懂let才能少踩坑
如圖所示,這就是我對他的初始理解---一個解決javascript沒有塊級作用域的東西。嗯....就是這樣也僅此而已。

let淺解

《1》let 宣告的變數的作用域是塊級的;

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1
複製程式碼

用法類似於var,但是所宣告的變數,只在let命令所在的程式碼塊內有效.

說說這個「塊級作用域」裡面的坑吧!!!

首先,用阮大神的一個示例來說說過第一個坑

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); 
複製程式碼

輸出幾呢?是6嗎? 答案是10

為什麼呢?因為上面程式碼中,變數i是var命令宣告的,在全域性範圍內都有效,所以全域性只有一個變數i。每一次迴圈,變數i的值都會發生改變,而迴圈內被賦給陣列a的函式內部的console.log(i),裡面的i指向的就是全域性的i。也就是說,所有陣列a的成員裡面的i,指向的都是同一個i,導致執行時輸出的是最後一輪的i的值,也就是 10。

那麼怎麼解決呢? ES6之前的解決方式--構造閉包形成不銷燬的作用域儲存變數

var a = [];
for (var i = 0; i < 10; i++) {
  (function (arg) {a[i] = function () {
    console.log(arg);
  }})(i);
}
a[6](); //6
複製程式碼

ES6的解決方式

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6
複製程式碼

程式碼中,變數i是let宣告的,當前的i只在本輪迴圈有效,所以每一次迴圈的i其實都是一個新的變數,所以最後輸出的是6。 用ES5的程式碼描述就是這樣的!

"use strict";

var a = [];

var _loop = function _loop(i) {
  a[i] = function () {
    console.log(i);
  };
};

for (var i = 0; i < 10; i++) {
  _loop(i);
}
a[6](); // 6
複製程式碼

再來一個平常碼程式碼經常會遇到的,面試也會經常遇到。

var liList = document.querySelectorAll('li') // 共5個li
for( var i=0; i<liList.length; i++){
  liList[i].onclick = function(){
    console.log(i)
  }
}
複製程式碼

列印多少呢?0,1,2,3,4 還是 5,5,5,5,5? 相信大家大家應該都知道依次點選 li 會列印出 5 個 5。

如果把 var i 改成 let i,就會分別列印出 0、1、2、3、4:

var liList = document.querySelectorAll('li') // 共5個li
for( let i=0; i<liList.length; i++){
  liList[i].onclick = function(){
    console.log(i)
  }
}
複製程式碼

闡述一下我的理解吧!

  • for( let i = 0; i< 5; i++) 這句話的圓括號之間,有一個隱藏的作用域。
  • for( let i = 0; i< 5; i++) { 迴圈體 } 在每次執行迴圈體之前,JS 引擎會把 i 在迴圈體的上下文中重新宣告及初始化一次。
  • 用ES5的程式碼描述就是這樣的!
'use strict';

var liList = document.querySelectorAll('li'); // 共5個li

var _loop = function _loop(i) {
  liList[i].onclick = function () {
    console.log(i);
  };
};

for (var i = 0; i < liList.length; i++) {
  _loop(i);
}
複製程式碼

總結:希望大家在已有遇到跟迴圈 非同步事件之類的問題的時候多注意下,不要掉坑裡了☺

《2》let 宣告的變數不存在變數提升,有暫時性死區;

先來解釋解釋這兩個吧

變數提升

console.log(foo); // 輸出undefined
console.log(bar); // 報錯ReferenceError

var foo = 2;
let bar = 2;
複製程式碼

let不像var那樣會發生“變數提升”現象。所以,變數一定要在宣告後使用,否則報錯。

暫時性死區

let x = 'global'
{
  console.log(x) // Uncaught ReferenceError: x is not defined
  let x = 1
}
複製程式碼

存在全域性變數x,但是塊級作用域內let又宣告瞭一個區域性變數x,導致後者繫結這個塊級作用域,所以在let宣告變數前,對tmp賦值會報錯。

在詳細的解釋這個問題之前,我們先來弄懂ES6之前,我們的作用域裡的變數預解釋。

var a = 1;
function b(params) {
    var c = 2; 
    console.log(params);
}

console.log(a);
b(3);
複製程式碼

ES6之---讀懂let才能少踩坑
紅色框框中的部分是在b函式被呼叫的時候才會按照預解釋規則一步步產生,現在寫出來是為了方便你們理解。正因為b函式被預先宣告且賦值了,所以在b函式之前呼叫他就能得到結果,程式碼如下,相信你又學到不少吧!

b(3);
function b(params) {
    var c = 2; 
    console.log(params);
}

複製程式碼

然後就是函式執行的第二步了

ES6之---讀懂let才能少踩坑
夠清楚!!!!夠明瞭吧!!!

這個我們弄清楚了 就再把let的說一遍 那麼上面的問題你自然就豁然開朗了。

關於let的是這樣的

<1>找到所有用 let 宣告的變數,在環境中「建立」這些變數

<2>開始執行程式碼(注意現在還沒有初始化也沒有假裝賦值為undefined)

<3>執行 let宣告的變數時,將 該變數 「初始化直接賦值」

現在關於上面的不存在變數提升,有暫時性死區你應該都懂了吧。關於暫時性死區是因為let宣告的變數有塊級作用域而且沒有變數提升所以就產生了

也來看看暫時性死區在es6之前的環境裡是怎樣的吧。

//es6中
let x = 'global'
{
  console.log(x) // Uncaught ReferenceError: x is not defined
  let x = 1
}

//之前版本的環境中
'use strict';

var x = 'global';
{
  console.log(_x); // Uncaught ReferenceError: x is not defined
  var _x = 1;
}

複製程式碼

《3》let 不能重複宣告已存在的變數

這個知識點就基本沒啥坑了 自己注意點兒就好

// 報錯
function () {
  let a = 10;
  var a = 1;
}

// 報錯
function () {
  let a = 10;
  let a = 1;
}
複製程式碼

總結

總共也就三個知識點:完全掌握還是要多用!!!

1、let的塊級作用域!

2、let宣告的變數不存在變數提升,有暫時性死區!

3、let宣告的變數不允許重複宣告,無論重複用var或者其他宣告都不行!

let的故事就這樣暫時說完啦(瘋狂求有位大佬來帶帶我啊) 不知不覺又晚上10點多了 該回寢室了 哈哈 如果學到了就給我個小心心吧 哈哈哈

ES6之---讀懂let才能少踩坑

相關文章