JavaScript中 let 和 var 定义变量说明

妖狐艹你老母 2022-05-27 07:54 160阅读 0赞

`let` 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。

## 语法 ##

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

### 参数 ###

`var1`,  `var2`, …,  `varN`

变量名。可以是任意合法的标识符。

`value1`,  `value2`, …,  `valueN`

变量的初始值。可以是任意合法的表达式。

## 描述 ##

`let`允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与[var][]关键字不同的是，它声明的变量只能是全局或者整个函数块的。

[这里][Link 1]解释了我们为什么选取“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.

answered  Jun 20 '16 at 7:47

[![bfdd4ec8dff5c7635520fe98348524ec_s_32_d_identicon_r_PG][]exebook][bfdd4ec8dff5c7635520fe98348524ec_s_32_d_identicon_r_PG_exebook]

Let是一个数学声明，是采用于早期的编程语言如Scheme和Basic。 变量被认为是不适合更高层次抽象的低级实体，因此许多语言设计者希望引入类似但更强大的概念， 如在Clojure、f#、Scala，let可能意味着一个值，或者一个变量可以赋值，但不能被更改， 这反过来使编译器能够捕获更多的编程错误和优化代码更好。 javascript从一开始就有var，所以他们只是需要另一个关键字，并只是借用了其他数十种语言， 使用let已经作为一个传统的尽可能接近var的关键字，虽然在javascript 中 let只创建块范围局部变量而已。

### 作用域规则 ###

`let`声明的变量只在其声明的块或子块中可用，这一点，与`var`相似。二者之间最主要的区别在于`var`声明的变量的作用域是整个封闭函数。

### 简化内部函数代码 ###

当用到内部函数的时候，`let`会让你的代码更加简洁。

以上示例的工作原理是因为（匿名）内部函数的五个实例引用了变量`i`的五个不同实例。注意，如果你将`let`替换为`var`，则它将无法正常工作，因为所有内部函数都将返回相同的`i`：6的最终值。此外，我们可以通过将创建新元素的代码移动到每个循环的作用域来保持循环更清晰。

在程序或者函数的顶层，`let`并不会像`var`一样在全局对象上创造一个属性，比如：

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

### 模仿私有接口 ###

在处理[构造函数][Link 2]的时候，可以通过`let`绑定来共享一个或多个私有成员，而不使用[闭包][Link 3]：

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"}
    
    thing.showPublic();
    // "foo"
    
    thing.showPrivate();
    // 1

### `let`暂存死区的错误 ###

在相同的函数或块作用域内重新声明同一个变量会引发[`SyntaxError`][SyntaxError]。

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

在 ECMAScript 2015 中，`let`绑定不受变量提升的约束，这意味着`let`声明不会被提升到当前执行上下文的顶部。在块中的变量初始化之前，引用它将会导致 `ReferenceError`（而使用 var 声明变量则恰恰相反，该变量的值是 undefined ）。该变量处于从块开始到初始化处理的“暂存死区”。

function do_something() { 
      console.log(bar); // undefined
      console.log(foo); // ReferenceError: foo is not defined
      var bar = 1;
      let foo = 2;
    }

在 [`switch`][switch] 声明中你可能会遇到这样的错误，因为它只有一个块.

switch (x) { 
      case 0:
        let foo;
        break;
        
      case 1:
        let foo; // TypeError for redeclaration.
        break;
    }

但是，重要的是要指出嵌套在case子句内的块将创建一个新的块作用域的词法环境，这不会产生上面显示的重新声明错误。

let x = 1;
    
    switch(x) { 
      case 0: { 
        let foo;
        break;
      }  
      case 1: { 
        let foo;
        break;
      }
    }

### 与词法作用域结合的暂存死区 ###

由于词法作用域，表达式`(foo + 55)`内的标识符“foo”会解析为if块的foo，而不是覆盖值为33的foo。在这一行中，if块的“foo”已经在词法环境中创建，但尚未达到（并终止）其初始化（这是语句本身的一部分）：它仍处于暂存死区。

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

这种现象可能会使您陷入以下情况。指令`let n of n.a`已经在for循环块的私有范围内，因此标识符“n.a”被解析为位于指令本身的第一部分（“let n”）中的'n'对象的属性'a' ，由于尚未达成和终止其声明，因此仍处于暂存死区。

## 其他情况 ##

当在块中使用时，`let`将变量的作用域限制为该块。注意`var`的作用域在它被声明的函数内的区别。

var a = 1;
    var b = 2;
    
    if (a === 1) { 
      var a = 11; // the scope is global
      let b = 22; // the scope is inside the if-block
    
      console.log(a);  // 11
      console.log(b);  // 22
    } 
    
    console.log(a); // 11
    console.log(b); // 2

## 规范 ##

<table style="margin-top:0px;margin-right:0px;margin-left:0px;padding:0px;border:2px solid rgb(255,255,255);width:965px;max-width:100%;color:rgb(51,51,51);font-family:'Open Sans', arial, 'x-locale-body', sans-serif;background-color:rgb(255,255,255);"> 
 <tbody style="margin:0px;padding:0px;"> 
 <tr style="margin:0px;padding:0px;border-top:0px;"> 
 <th style="font-style:inherit;margin:0px;padding-top:2px;padding-bottom:4px;border-width:2px;border-color:rgb(255,255,255) rgb(255,255,255) rgb(212,221,228);font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:rgba(212,221,228,.5);">Specification</th> 
 <th style="font-style:inherit;margin:0px;padding-top:2px;padding-bottom:4px;border-width:2px;border-color:rgb(255,255,255) rgb(255,255,255) rgb(212,221,228);font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:rgba(212,221,228,.5);">Status</th> 
 <th style="font-style:inherit;margin:0px;padding-top:2px;padding-bottom:4px;border-width:2px;border-color:rgb(255,255,255) rgb(255,255,255) rgb(212,221,228);font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:rgba(212,221,228,.5);">Comment</th> 
 </tr> 
 <tr style="margin:0px;padding:0px;border-top:0px;"> 
 <td style="margin:0px;padding-top:6px;padding-bottom:6px;border-width:2px;border-color:rgb(255,255,255);background-color:rgba(212,221,228,.15);"><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-let-and-const-declarations" style="color:rgb(63,135,166);margin:0px;padding:0px;border:0px;white-space:pre-line;" rel="nofollow">ECMAScript 2015 (6th Edition, ECMA-262) Let and Const Declarations</a></td> 
 <td style="margin:0px;padding-top:6px;padding-bottom:6px;border-width:2px;border-color:rgb(255,255,255);background-color:rgba(212,221,228,.15);">Standard</td> 
 <td style="margin:0px;padding-top:6px;padding-bottom:6px;border-width:2px;border-color:rgb(255,255,255);background-color:rgba(212,221,228,.15);">Initial definition. Does not specify let expressions or let blocks.</td> 
 </tr> 
 <tr style="margin:0px;padding:0px;border-top:0px;"> 
 <td style="margin:0px;padding-top:6px;padding-bottom:6px;border-width:2px;border-color:rgb(255,255,255);background-color:rgba(212,221,228,.25);"><a href="https://tc39.github.io/ecma262/#sec-let-and-const-declarations" style="color:rgb(63,135,166);margin:0px;padding:0px;border:0px;white-space:pre-line;" rel="nofollow">ECMAScript Latest Draft (ECMA-262) Let and Const Declarations</a></td> 
 <td style="margin:0px;padding-top:6px;padding-bottom:6px;border-width:2px;border-color:rgb(255,255,255);background-color:rgba(212,221,228,.25);">Draft</td> 
 <td style="margin:0px;padding-top:6px;padding-bottom:6px;border-width:2px;border-color:rgb(255,255,255);background-color:rgba(212,221,228,.25);">&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

## 浏览器兼容 ##

[新的兼容性表格正在测试中 ][Link 4]

<table style="margin-top:0px;margin-right:0px;margin-left:0px;padding:0px;border:none;width:965px;max-width:100%;border-collapse:separate;table-layout:fixed;border-spacing:0px;background-color:rgba(212,221,228,.5);"> 
 <thead style="margin:0px;padding:0px;border:0px;"> 
 <tr style="margin:0px;padding:0px;border-top:0px;border-bottom-style:solid;border-bottom-color:transparent;"> 
 <td style="margin:0px;padding:5px 3px;border-width:0px 2px 0px 0px;border-right-color:rgb(34,34,34);border-bottom-color:transparent;text-align:center;width:200px;">&nbsp;</td> 
 <th colspan="6" style="font-style:inherit;margin:0px;padding:5px 0px 2px;border-width:0px 0px 2px;border-bottom-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:auto;">Desktop</th> 
 <th colspan="7" style="font-style:inherit;margin:0px;padding:5px 0px 2px;border-width:0px 0px 2px 2px;border-bottom-color:rgb(34,34,34);border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:auto;">Mobile</th> 
 <th colspan="1" style="font-style:inherit;margin:0px;padding:5px 0px 2px;border-width:0px 0px 2px 2px;border-bottom-color:rgb(34,34,34);border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:auto;">Server</th> 
 </tr> 
 <tr style="margin:0px;padding:0px;border-top:0px;border-bottom-style:solid;border-bottom-color:transparent;"> 
 <td style="margin:0px;padding:5px 3px;border-width:0px 2px 0px 0px;border-right-color:rgb(34,34,34);border-bottom-color:transparent;text-align:center;width:200px;">&nbsp;</td> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-width:0px;border-bottom-color:transparent;font-weight:inherit;text-align:center;background:transparent;width:54px;">Chrome</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-top:0px;border-right:0px;border-bottom-width:0px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:54px;">Edge</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-top:0px;border-right:0px;border-bottom-width:0px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:54px;">Firefox</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-top:0px;border-right:0px;border-bottom-width:0px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:54px;">Internet Explorer</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-top:0px;border-right:0px;border-bottom-width:0px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:54px;">Opera</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-top:0px;border-right:0px;border-bottom-width:0px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:55px;">Safari</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-width:0px 0px 0px 2px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:55px;">Android webview</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-top:0px;border-right:0px;border-bottom-width:0px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:55px;">Chrome for Android</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-top:0px;border-right:0px;border-bottom-width:0px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:55px;">Edge Mobile</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-top:0px;border-right:0px;border-bottom-width:0px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:55px;">Firefox for Android</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-top:0px;border-right:0px;border-bottom-width:0px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:55px;">Opera for Android</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-top:0px;border-right:0px;border-bottom-width:0px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:55px;">iOS Safari</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-top:0px;border-right:0px;border-bottom-width:0px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:55px;">Samsung Internet</th> 
 <th style="font-style:inherit;margin:0px;padding:3px 0px;border-width:0px 0px 0px 2px;border-bottom-color:transparent;border-left-color:rgb(34,34,34);font-weight:inherit;text-align:center;background:transparent;width:55px;">Node.js</th> 
 </tr> 
 </thead> 
 <tbody style="margin:0px;padding:0px;"> 
 <tr style="margin:0px;padding:0px;border-top:0px;border-bottom-style:solid;border-bottom-color:transparent;"> 
 <th style="font-style:inherit;margin:0px;padding:5px 3px 5px 6px;border-right-width:2px;border-bottom-width:0px;border-left:0px;border-top-color:rgb(34,34,34);border-right-color:rgb(34,34,34);border-bottom-color:transparent;font-weight:inherit;width:200px;background-color:transparent;">Basic support</th> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-left:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:54px;">Full support41</td> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:54px;">Full support12</td> 
 <td style="margin:0px;padding:6px 3px 12px;border-right:0px;border-bottom-width:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:54px;">Full support44 
 <div style="margin:0px;padding:0px;border:0px;float:right;"> 
 Notes
 
 </div>打开</td> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:54px;">Full support11</td> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:54px;">Full support17</td> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:55px;">Full support10</td> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-left-width:2px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:55px;">Full support41</td> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:55px;">Full support41</td> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:55px;">Full support12</td> 
 <td style="margin:0px;padding:6px 3px 12px;border-right:0px;border-bottom-width:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:55px;">Full support44 
 <div style="margin:0px;padding:0px;border:0px;float:right;"> 
 Notes
 
 </div>打开</td> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:55px;">Full support17</td> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:55px;">Full support10</td> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:55px;">Full support4.0</td> 
 <td style="margin:0px;padding:5px 3px;border-right:0px;border-bottom-width:0px;border-left-width:2px;border-top-color:rgb(34,34,34);border-bottom-color:transparent;border-left-color:rgb(34,34,34);color:rgb(34,34,34);background-color:rgb(228,248,225);text-align:center;width:55px;">Full supportYes</td> 
 </tr> 
 </tbody> 
</table>

### Legend ###

Full support

See implementation notes.

## 相关链接 ##

*  [`var`][var]
 *  [`const`][const]
 *  [ES6 In Depth: `let` and `const`][ES6 In Depth_ _let_ and _const]
 *  [Breaking changes in `let` and `const` in Firefox 44.][Breaking changes in _let_ and _const_ in Firefox 44.]
 *  [You Don't Know JS: Scope & Closures: Chapter 3: Function vs. Block Scope][You Don_t Know JS_ Scope _ Closures_Chapter 3_ Function vs. Block Scope]

[var]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/var
[Link 1]: https://stackoverflow.com/questions/37916940/js-why-let-have-this-name
[bfdd4ec8dff5c7635520fe98348524ec_s_32_d_identicon_r_PG]: https://www.gravatar.com/avatar/bfdd4ec8dff5c7635520fe98348524ec?s=32&d=identicon&r=PG
[bfdd4ec8dff5c7635520fe98348524ec_s_32_d_identicon_r_PG_exebook]: https://stackoverflow.com/users/1968972/exebook
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/constructor
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
[SyntaxError]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError
[switch]: https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Statements/switch
[Link 4]: https://developer.mozilla.org/docs/New_Compatibility_Tables_Beta
[const]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const
[ES6 In Depth_ _let_ and _const]: https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/
[Breaking changes in _let_ and _const_ in Firefox 44.]: https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/
[You Don_t Know JS_ Scope _ Closures_Chapter 3_ Function vs. Block Scope]: https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md