JavaScript ES6 var VS let 区别

ECMAScript 6 即 ES 6 中引入了 let 语句。

The let statement declares a block scope local variable, optionally initializing it to a value.
let 语句用于声明一个局部变量,作用域为 block scope,可以在声明时初始化。

var VS let 区别

区别在于声明变量的作用域 Scope:

  • var 语句声明的变量,作用域为 Function Scope 方法作用域
  • let 语句声明的变量,作用域为 Block Scope 代码块作用域,可能比 Function Scope 范围更小,也可能相同
  • 如果在任何的 block 外部使用 var 或者 let,则声明的变量均为全局变量,即 Global Scope
  • let 语句声明的变量,在声明之前不能访问,否则会抛出 ReferenceError

Global Scope 全局作用域

注意:let 语句声明的变量,不能通过 window 对象来访问。

var foo1 = 1;
let foo2 = 2; // foo1 和 foo2 均为全局作用域 Global Scope

console.log(foo1); // 1
console.log(foo2); // 2

console.log(window.foo1); // 1
console.log(window.foo2); // undefined

Function Scope 方法作用域

function f() {
  var foo1 = 1;
  let foo2 = 2; // foo1 和 foo2 均为方法作用域 Function Scope
  
  console.log(foo1); // 1
  console.log(foo2); // 2
}

f();

Block Scope 代码块作用域

在下面的代码中可以看到 varlet 语句声明变量的区别:

function f() {
  var foo1 = 1; // Function Scope
  
  {
    let foo1 = 2; // Block Scope
    let foo2 = 3; // Block Scope
    
    console.log(foo1); // 2
    console.log(foo2); // 3
  }
  
  console.log(foo1); // 1
  console.log(foo2); // foo2 is not defined
}

f();

如果将 let foo1 = 2; let foo2 = 3; 换成 var foo1 = 2; var foo2 = 3;,则都变成 Function Scope。


引用:
let

你可能感兴趣的:(JavaScript ES6 var VS let 区别)