Let JavaScript

ECMAScript 2015

ECMAScript 2015 memperkenalkan dua kata kunci penting baru dalam JavaScript:let 和 const.

Kata kunci ini menyediakan lingkungan blok (Block Scope) variabel (dan konstanta).

Sebelum ES2015, JavaScript hanya memiliki dua jenis lingkungan:全局作用域和函数作用域.

全局作用域

GlobalVariabel yang dideklarasikan (di luar fungsi) memiliki全局作用域.

实例

var carName = "porsche";
// Kode di tempat ini dapat menggunakan carName
function myFunction() {
  // Kode di tempat ini juga dapat menggunakan carName
}

亲自试一试

GlobalVariabel dapat diakses di setiap tempat di program JavaScript.

函数作用域

LokalVariabel yang dideklarasikan (dalam fungsi) memiliki函数作用域.

实例

// Kode di tempat ini tidak dapat menggunakan carName
function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}
// Kode di tempat ini tidak dapat menggunakan carName

亲自试一试

LokalVariabel hanya dapat diakses di dalam fungsi yang mengdeclarasikan mereka.

Lingkungan blok JavaScript

通过 var Variabel yang dideklarasikan dengan kata kunci tidak memilikiLingkungan.

Dalam blok {} Variabel yang dideklarasikan di dalam blok dapat diakses dari luar blok.

实例

{ 
  var x = 10; 
}
// Di tempat ini x dapat digunakan

Sebelum ES2015, JavaScript tidak memiliki lingkungan blok.

Dapat digunakan let Kata kunci deklarasi variabel memiliki lingkungan blok

Dalam blok {} Variabel yang dideklarasikan di dalam blok tidak dapat diakses dari luar blok:

实例

{ 
  let x = 10;
}
// Di tempat ini x tidak dapat digunakan

Mengulang deklarasi variabel

Menggunakan var Kata kunci mengulang deklarasi variabel akan membawa masalah.

Mengulang deklarasi variabel di blok juga akan mengulang deklarasi variabel di luar blok:

实例

var x = 10;
// Di tempat ini x adalah 10
{ 
  var x = 6;
  // Di tempat ini x adalah 6
}
// Di tempat ini x adalah 6

亲自试一试

Menggunakan let Kata kunci mengulang deklarasi variabel dapat memecahkan masalah ini.

Mengulang deklarasi variabel di blok tidak akan mengulang deklarasi variabel di luar blok:

实例

var x = 10;
// Di tempat ini x adalah 10
{ 
  let x = 6;
  // Di tempat ini x adalah 6
}
// Di tempat ini x adalah 10

亲自试一试

Dukungan pelayar

Internet Explorer 11 atau versi yang lebih awal tidak mendukung sepenuhnya let Kata kunci.

Tabel di bawah ini mendefinikan yang pertama sepenuhnya mendukung let Kata kunci versi pelayar web:

Chrome 49 IE / Edge 12 Firefox 44 Safari 11 Opera 36
2016 年 3 月 2015 年 7 月 2015 年 1 月 2017 年 9 月 2016 年 3 月

循环作用域

在循环中使用 var：

实例

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

亲自试一试

在循环中使用 let：

实例

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7

亲自试一试

在第一个例子中，在循环中使用的变量使用 var 重新声明了循环之外的变量。

在第二个例子中，在循环中使用的变量使用 let 并没有重新声明循环外的变量。

如果在循环中用 let 声明了变量 i，那么只有在循环内，变量 i 才是可见的。

函数作用域

在函数内声明变量时，使用 var 和 let 很相似。

它们都有函数作用域：

function myFunction() {
  var carName = "porsche";   // 函数作用域
}
function myFunction() {
  let carName = "porsche";   // 函数作用域
}

全局作用域

如果在块外声明声明，那么 var 和 let 也很相似。

它们都拥有全局作用域：

var x = 10;       // 全局作用域
let y = 6;       // 全局作用域

HTML 中的全局变量

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。

在 HTML 中，全局作用域是 window 对象。

通过 var 关键词定义的全局变量属于 window 对象：

实例

var carName = "porsche";
// 此处的代码可使用 window.carName

亲自试一试

通过 let 关键词定义的全局变量不属于 window 对象：

实例

let carName = "porsche";
// 此处的代码不可使用 window.carName

亲自试一试

重新声明

允许在程序的任何位置使用 var 重新声明 JavaScript 变量：

实例

var x = 10;
// 现在，x 为 10
var x = 6;
// 现在，x 为 6

亲自试一试

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：

实例

var x = 10;       // 允许
let x = 6;       // 不允许
{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的：

实例

let x = 10;       // 允许
let x = 6;       // 不允许
{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的：

实例

let x = 10;       // 允许
var x = 6;       // 不允许
{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

在不同的作用域或块中，通过 let 重新声明变量是允许的：

实例

let x = 6;       // 允许
{
  let x = 7;   // 允许
}
{
  let x = 8;   // 允许
}

亲自试一试

提升

通过 var 声明的变量会提升到顶端。如果您不了解什么是提升（Hoisting），请学习我们的提升这一章。

您可以在声明变量之前就使用它：

实例

// 在此处，您可以使用 carName
var carName;

亲自试一试

通过 let 定义的变量不会被提升到顶端。

在声明 let 变量之前就使用它会导致 ReferenceError。

变量从块的开头一直处于“暂时死区”，直到声明为止：

实例

// 在此处，您不可以使用 carName
let carName;