開聊吧!(前面一小部分大佬們可以自動忽略)
首先,打臉我的無知!
在剛接觸ES6的時候,我就「以為」我理解了let。然後漫長的自學道路上,let一次又一次的讓我認識到了自己的無知。
希望寫了這篇文章之後能用我的無知,讓在這條道路上的人能少踩些坑。
初識let
和很多人一樣,在聽說了ES6很好用之後,就馬不停蹄的去學習這門充滿著語法糖的東西。開始抱著emmmm快速把es6過一遍的念頭去了菜鳥教程(因為覺得這裡的教程很簡潔,但是希望大家以後慎重選擇初學教程!!!)
如圖所示,這就是我對他的初始理解---一個解決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);
複製程式碼
紅色框框中的部分是在b函式被呼叫的時候才會按照預解釋規則一步步產生,現在寫出來是為了方便你們理解。正因為b函式被預先宣告且賦值了,所以在b函式之前呼叫他就能得到結果,程式碼如下,相信你又學到不少吧!
b(3);
function b(params) {
var c = 2;
console.log(params);
}
複製程式碼
然後就是函式執行的第二步了
夠清楚!!!!夠明瞭吧!!!這個我們弄清楚了 就再把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點多了 該回寢室了 哈哈 如果學到了就給我個小心心吧 哈哈哈