变量、作用域、闭包

变量

ECMAScript 6 中引入了 let、const。

JavaScript 有三种声明方式：

1. var：声明一个变量，初始化可选。
2. let：声明一个变量，初始化可选。
3. const：声明一个常量，必须初始化。

“局部变量”/“全局变量”只与其定义位置有关：在“函数内部”/“函数之外”声明的变量

作用域

ECMAScript 6 之前没有“块作用域”：语句块中声明的变量将成为语句块所在函数（或全局作用域）的局部变量。

1. 全局作用域：可被当前文档中的任何其他代码所访问；
2. 函数作用域：可被当前函数内部的其他代码所访问；
3. 块作用域：可被当前块（由 { } 包围）内部的其他代码所访问；
   • 仅 let、const 支持

⭐ var 变量没有“块作用域”：将会使用（块所在的）“函数作用域”或“全局作用域” —— 这是因为在早期的 JavaScript 中，块没有词法环境

• var 将透传 if、for 和其它代码块：

  if (true) {
      var x = 5;
  }
  console.log(x); // 5
  
  if (true) {
      let y = 5;
  }
  console.log(y); // ReferenceError: y is not defined
  

var：变量提升

提升（Hoisting）：变量和函数的声明会在物理层面（在编译阶段被放入内存中）移动到代码的最前面 —— 变量/函数的“初始化”和“使用”可以在“声明”之前（先使用再声明）。

函数和变量相比，会被优先提升 —— 函数会被提升到更靠前的位置。

1. 变量提升：

   bla = 2
   var bla;
   
   // 可以理解为：
   
   var bla;
   bla = 2;
   

2. 函数提升：

   hoisted(); // logs "foo"
   function hoisted() {
       console.log('foo');
   }
   
   // 可以理解为：
   
   function hoisted() {
       console.log('foo');
   }
   hoisted(); // logs "foo"
   

⭐ JavaScript 只会提升声明，不会提升其初始化 —— 如果在“声明”和“初始化”之前“使用”，将使用 undefined

示例：

// “使用”先于“初始化”
console.log(num); // Returns undefined
var num;
num = 6;

// “初始化”先于“使用”
num = 6;
console.log(num); // returns 6
var num;

⭐ 函数表达式（function expressions）不会被提升 

示例：

notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function() {
    console.log('bar');
};

let：暂时性死区

暂时性死区（Temporal dead zone，TDZ）：从“代码块的开始”直到“声明变量的行”，let 或 const 声明的变量都处于“暂时性死区”中 —— 这并不是“提升”！！！

1. 在“暂时性死区”中访问变量将抛出 ReferenceError：

   { 
       // TDZ starts at beginning of scope
       console.log(bar); // undefined
       console.log(foo); // ReferenceError
       var bar = 1;
       let foo = 2; 
       // End of TDZ (for foo)
   }
   

2. “暂时性死区”取决于“执行顺序”（时间），而非“代码顺序”（位置）：

   {
       // TDZ starts at beginning of scope
       const func = () => console.log(letVar); // OK
       let letVar = 3; 
       // End of TDZ (for letVar)
   
       func(); // Called outside TDZ!
   }
   

补充内容

var 与 let 的区别

var 与 let

\	var	let
块作用域	✘	✔
变量提升	✔	✘
重新声明	✔ var user = "Pete"; var user = "John"; console.log(user); // John	✘ let user; let user; // SyntaxError: 'user' has already been declared

let 有没有“提升”？

关于这一点，MDN 都描述得前后不一致，也是很操蛋了……

1、MDN：《语法和数据类型》：
    在 ECMAScript 6 中，let和const同样会被提升变量到代码块的顶部但是不会被赋予初始值。在变量声明之前引用这个变量，将抛出引用错误（ReferenceError）。这个变量将从代码块一开始的时候就处在一个“暂时性死区”，直到这个变量被声明为止。

2、MDN：《语法和数据类型》：
    var 和 let 的另一个重要区别，let 声明的变量不会在作用域中被提升，它是在编译时才初始化（参考下面的暂时性死区）。

各种说法大都以一个类似示例来说明：

var foo = 33;
if (foo) {
    console.log(foo) // ReferenceError: Cannot access 'foo' before initialization
    let foo = 44;
}

对于 ReferenceError 该如何解释呢 ❓

网上有说法，认为是由于“let 变量提升导致”

一个有意思的例子

一个涉及到“Event Loop”和“var 作用域”的例子。

对于以下代码：

for (var i = 0; i < 10; i++) {
    setTimeout(function() { console.log(i) }, 100 * i)
}

是否预期输出：

0
1
2
3
4
5
6
7
8
9

但，实际输出：

10
10
10
10
10
10
10
10
10
10

其原因有两点：

1. setTimeout 是一个任务，将在 for 所有循环完成之后执行；
2. i 由 var 定义：所有的 setTimeout 实际上都引用了“相同作用域里的同一个 i” —— 而它在所有循环之后其值为 10；

要与预期输出一致，有两种方式：

1. 通过使用“立即执行的函数表达式”来捕获 i：

   for (var i = 0; i < 10; i++) {
       (function(i) {
           setTimeout(function() { console.log(i) }, 100 * i)
       })(i)
   }
   

   • 不能妄想通过 let、const 来捕获：

     for (var i = 0; i < 10; i++) {
         setTimeout(function() { const v = i; console.log(i); }, 100 * i)
     }
     

2. 使用 let 替换 var：

   for (let i = 0; i < 10; i++) {
       (function(i) {
           setTimeout(function() { console.log(i) }, 100 * i)
       })(i)
   }
   

var作用域或函数作用域

当用let声明一个变量，它使用的是词法作用域或块作用域。