Let ใน JavaScript

ECMAScript 2015

ES2015 引入了两个重要的 JavaScript 新关键词：let และ const。

这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。

在 ES2015 之前，JavaScript 只有两种类型的作用域：สรรพากรณ์ทั่วไปและสรรพากรณ์ฟังก์ชัน。

สรรพากรณ์ทั่วไป

全局（在函数之外）声明的变量拥有สรรพากรณ์ทั่วไป。

ตัวอย่าง

var carName = "porsche";
// 此处的代码可以使用 carName
function myFunction() {
  // 此处的代码也可以使用 carName
}

ทดสอบด้วยตัวเอง

全局变量可以在 JavaScript 程序中的任何位置访问。

สรรพากรณ์ฟังก์ชัน

局部（函数内）声明的变量拥有สรรพากรณ์ฟังก์ชัน。

ตัวอย่าง

// 此处的代码不可以使用 carName
function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}
// 此处的代码不可以使用 carName

ทดสอบด้วยตัวเอง

局部变量只能在它们被声明的函数内访问。

JavaScript 块作用域

ผ่าน var 关键词声明的变量没有块作用域。

在块 {} 内声明的变量可以从块之外进行访问。

ตัวอย่าง

{ 
  var x = 10; 
}
// 此处可以使用 x

在 ES2015 之前，JavaScript 是没有块作用域的。

可以使用 let 关键词声明拥有块作用域的变量。

在块 {} 内声明的变量无法从块外访问：

ตัวอย่าง

{ 
  let x = 10;
}
// 此处不可以使用 x

重新声明变量

使用 var 关键字重新声明变量会带来问题。

在块中重新声明变量也将重新声明块外的变量：

ตัวอย่าง

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

ทดสอบด้วยตัวเอง

使用 let 关键字重新声明变量可以解决这个问题。

在块中重新声明变量不会重新声明块外的变量：

ตัวอย่าง

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

ทดสอบด้วยตัวเอง

浏览器支持

Internet Explorer 11 或更早的版本不完全支持 let 关键词。

下表定义了第一个完全支持 let 关键词的浏览器版本：

Chrome 49 IE / Edge 12 Firefox 44 Safari 11 Opera 36
มีนาคม 2016 กรกฎาคม 2015 มกราคม 2015 กันยายน 2017 มีนาคม 2016

สรรพากรณ์วงกลุ่มวน

ใช้ในวงกลุ่มวน 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 ไม่ได้ประกาศตัวแปรนอกวงกลุ่มวน

ถ้าใช้ i ในวงกลุ่มวน 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;   // อนุญาต
}

ทดสอบด้วยตัวเอง

lifting

ผ่าน var ตัวแปรที่ถูกประกาศจะliftingไปบนด้านบน ถ้าคุณไม่เข้าใจว่าเรียกว่า lifting โปรดเรียกดูบทบรรณานุกรมที่เราเขียนเกี่ยวกับ lifting

คุณสามารถใช้ตัวแปรก่อนประกาศได้

ตัวอย่าง

// ในที่นี้ คุณสามารถใช้ carName
var carName;

ทดสอบด้วยตัวเอง

ผ่าน let ตัวแปรที่ถูกประกาศจะไม่ถูกนำขึ้นไปบนด้านบน

ในการประกาศ let การใช้ตัวแปรก่อนปิดบรรทัดการประกาศจะทำให้เกิด ReferenceError

ตัวแปรจะอยู่ใน "zone of temporally dead" จนถึงจุดปิดบรรทัดการประกาศ

ตัวอย่าง

// ในที่นี้ คุณไม่สามารถใช้ carName
let carName;