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会更加努力出好文~