上一节:
下一节:

  JavaScript let 关键字

  • JavaScript let 关键字

    ES2015引入了两个重要的新JavaScript关键字：let和const。这两个关键字在JavaScript中提供了块作用域变量（和常量）。在ES2015之前，JavaScript只有两种类型的范围：全局作用域 和函数作用域。

  • 全局作用域

    在全局作用域内声明的变量（在任何函数之外）具有全局作用。 
    var carName = "Volvo";

// 这里的代码可以使用carName

function myFunction() {
  // 这里的代码也可以使用carName
}
    尝试一下
    可以从JavaScript程序中的任何位置访问全局变量。

  • 函数作用域

    在函数内声明的变量具有函数作用域（局部作用域）。 
    // 这里的代码不能使用carName

function myFunction() {
  var carName = "Volvo";
  // 这里的代码可以使用carName
}

// 这里的代码不能使用carName
    尝试一下
    只能从声明它们的函数内部访问局部变量。

  • JavaScript块作用域

    使用var关键字声明的变量不能具有块作用域。
    可以从块外部访问块{}内声明的变量。 
    { 
  var x = 2; 
}
// x可以在这里使用
    在ES2015之前，JavaScript没有块作用域。使用let关键字声明的变量可以具有块范围。无法从块外部访问块{}内声明的变量： 
    { 
  let x = 2;
}
// x 不能在这里使用

  • 重定义变量

    使用var关键字重新声明变量可能会带来问题。在块中重新声明变量也将重新声明块外的变量： 
    var x = 10;
// 这里x是 10
{ 
  var x = 2;
  // 这里x是 2
}
// 这里x是 2
    尝试一下
    使用let关键字重新声明变量可以解决此问题。在块中重新声明变量不会重新声明块外的变量： 
    var x = 10;
// 这里x是 10
{ 
  let x = 2;
  // 这里x是 2
}
// 这里x是 10
    尝试一下

  • 浏览器支持

    letInternet Explorer 11或更早版本不完全支持let关键字。下表定义了第一个完全支持该关键字的浏览器版本：
    关键字 Internet Explorer Chrome FireFox Safari Opera
    关键字名称
    let IE/Edge 12 Chrome 49 Firefox 44 Safari 11 Opera 36
    开始支持时间 2015,7 2016,3 2015,1 2017,9 2016,3

  • 循环作用域

    var在循环中使用： 
    var i = 5;
for (var i = 0; i < 10; i++) {
  // 一些代码块
}
// 这里i是10
    尝试一下
    let在循环中使用： 
    let i = 5;
for (let i = 0; i < 10; i++) {
  // s一些代码块
}
// 这里i是5
    尝试一下
    在第一个例子中，使用var循环中声明的变量重新声明循环外的变量。在第二个示例中，使用let循环中声明的变量不会在循环外重新声明变量。当let用于在循环中声明i变量时，i变量将仅在循环内可见。

  • 函数作用域

    在函数内声明时使用var声明和let声明非常相似。他们都有函数作用域： 
    function myFunction() {
  var carName = "Volvo";   // 函数作用域
}
    function myFunction() {
  let carName = "Volvo";   // 函数作用域
}

  • 全局作用域

    在函数内声明时使用var声明和let声明非常相似。他们都有全局作用域： 
    var x = 2;       // 全局作用域
    let x = 2;       // 全局作用域

  • HTML中的全局变量

    使用JavaScript，全局作用域是JavaScript环境。在HTML中，全局作用域是window对象。使用var关键字定义的全局变量属于window对象： 
    var carName = "Volvo";
// 代码这里可以使用 window.carName
    尝试一下
    使用let关键字定义的全局变量不属于window对象： 
    let carName = "Volvo";
// 代码这里不能使用 window.carName
    尝试一下

  • 重新声明

    在程序中的任何位置允许重新声明JavaScript var变量： 
    var x = 2;

// 现在x是 2
 
var x = 3;

// 现在x是 3
    尝试一下
    不允许使用let在相同范围内或在同一块中重新声明var变量： 
    var x = 2;       // 容许
let x = 3;       // 不容许

{
  var x = 4;   // 容许
  let x = 5   // 不容许
}
    不允许使用let在相同范围内或在同一块中重新声明let变量： 
    let x = 2;       // 容许
let x = 3;       // 不容许

{
  let x = 4;   // 容许
  let x = 5   // 不容许
}
    不允许使用var在相同范围内或在同一块中重新声明let变量： 
    let x = 2;       // 容许
var x = 3;       // 不容许

{
  let x = 4;   // 容许
  var x = 5   // 不容许
}
    允许使用let，在另一个范围或另一个块中重新声明变量： 
    let x = 2;       // 容许

{
  let x = 3;   // 容许
}

{
  let x = 4;   // 容许
}
    尝试一下

  • 变量提升（Hoisting）

    var定义的变量被提升到顶部（如果您不知道Hoisting（变量提升）是什么，请阅读我们的变量提升章节）。
    您可以在声明变量之前使用变量： 
    // 你可以在这里使用carName
var carName;
    尝试一下
    let定义的变量不会被提升到顶部。let在声明变量之前使用变量将导致一个ReferenceError错误。变量在块的开头处于“暂时死区”，直到声明为止： 
    // 你不能在这里使用carName
let carName;
上一节:
下一节: