JavaScript的Let用法

let 語句聲明一個塊級作用域的本地變量，並且可選的將其初始化為一個值。

 

描述

let 允許你聲明一個作用域或被限制在塊級中的變量、語句或者表達式。

與var不同的是，它聲明的變量只能是全局或者整個函數塊的。換句話，塊級 == { }

為什么取‘let’這個名字。

Let is a mathematical statement that was adopted by early programming languages like Scheme and Basic. 
Variables are considered low level entities not suitable for higher levels of abstraction, 
thus the desire of many language designers to introduce similar but more powerful concepts like in Clojure, F#, Scala, 
where let might mean a value, or a variable that can be assigned, but not changed, 
which in turn lets the compiler catch more programming errors and optimize code better. 
JavaScript has had var from the beginning, so they just needed another keyword, 
and just borrowed from dozens of other languages that use let already as a traditional keyword as close to var as possible, 
although in JavaScript let creates block scope local variable instead.

Let是一個數學聲明，是采用於早期的編程語言如Scheme和Basic。
變量被認為是不適合更高層次抽象的低級實體，因此許多語言設計者希望引入類似但更強大的概念，
如在Clojure、f#、Scala，let可能意味着一個值，或者一個變量可以賦值，但不能被更改，
這反過來使編譯器能夠捕獲更多的編程錯誤和優化代碼更好。
javascript從一開始就有var，所以他們只是需要另一個關鍵字，並只是借用了其他數十種語言，
使用let已經作為一個傳統的盡可能接近var的關鍵字，雖然在javascript 中 let只創建塊范圍局部變量而已。

 

    作用域規則

let 聲明的變量只是在其聲明的塊或者子塊中可用，這一點，與var相似。二者的主要區別在於var聲明的變量的作用域是整個封閉函數，而let聲明的作用域是塊。

function varTest() {
    var x = 1;
    if (true) {
    var x = 2;  // 同樣的變量!
    console.log(x);  // 2
    }
    console.log(x);  // 2
}

function letTest() {
    let x = 1;
    if (true) {
    let x = 2;  // 不同的變量
    console.log(x);  // 2
    }
    console.log(x);  // 1
}

 

    簡化內部函數代碼

當用到內部函數時候，let 會讓你的代碼更加簡潔。

var list = document.getElementById('list');

for (let i = 1; i <= 5; i++) {
    let item = document.createElement('li');
    item.appendChild(document.createTextNode('Item ' + i));

    item.onclick = function(ev) {
      console.log('Item ' + i + ' is clicked.');
    };
    list.appendChild(item);
}

// to achieve the same effect with 'var'
// you have to create a different context
// using a closure to preserve the value
for (var i = 1; i <= 5; i++) {
    var item = document.createElement('li');
    item.appendChild(document.createTextNode('Item ' + i));

    (function(i){
    item.onclick = function(ev) {
      console.log('Item ' + i + ' is clicked.');
    };
    })(i);
    list.appendChild(item);
}

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

在程序或者函數的頂層，let 並不會像var 一樣在全局對象上創建一個屬性，比如：

var x = "apple";
let y = "apple";
console.log(this.x);  //'apple'
console.log(this.y);  //undefined

 

    模仿私有接口

在處理構造函數的時候，可以通過let 綁定來共享一個或者多個私有成員，而不使用閉包：

var Thing;
{
    let privateScope = new WeakMap();
    let counter = 0;

    Thing = function(){
        this.someProperty = 'foo';
        privateScope.set(this, {
            hidden: ++counter,
        });
    };

    Thing.prototype.showPublic = function(){
        return this.someProperty;
    };

    Thing.prototype.showPrivate = function(){
        return privateScope.get(this).hidden;
    };
}

console.log(typeof privateScope);   //undefined

var thing = new Thing();
console.log(thing);                //Thing { someProperty: 'foo' }
console.log(thing.showPublic());   //foo
console.log(thing.showPrivate());  //1

 

    let 暫存死區的錯誤

 在相同的函數或者塊級作用域內重新聲明同一個變量會引發SyntaxError

if (x) {
    let foo;
    let foo; // TypeError thrown.
}

所以在同一個塊區，以let聲明的變量，只能聲明一次。

 

     其他情況

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

var a = 1;
var b = 2;

if(a === 1){
    var a = 11;
    let b = 22;

    console.log(a);   // 11
    console.log(b);   // 22
}
console.log(a);   // 11
console.log(b);   // 2

總之，let 的作用域是自己最近的{}

 

 

如果你覺得此文對你有一點小小的幫助，可以贊助作者哦，Mike會更加努力出好文~