在 ES2015 之前,JavaScript 只有两种类型的作用域:全局作用域和函数作用域。
var carName = "porsche";
// 此处的代码可以使用 carName
function myFunction() {
// 此处的代码也可以使用 carName
}
局部(函数内)声明的变量拥有函数作用域,局部变量只能在它们被声明的函数内访问。
// 此处的代码不可以使用 carName
function myFunction() {
var carName = "porsche";
// code here CAN use carName
}
// 此处的代码不可以使用 carName
在 ES2015 之前,JavaScript 是没有块作用域的。从ES2015 开始可以使用 let 关键词声明拥有块作用域的变量。在块 { } 内声明的变量无法从块外访问:
{
let x = 10;
}
// 此处不可以使用 x
简单例子来看下let和var的区别:
//使用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, 在块中重新声明变量不会重新声明块外的变量
使用 JavaScript 的情况下,全局作用域是 JavaScript 环境。在 HTML 中,全局作用域是 window 对象。
通过 var 关键词定义的全局变量属于 window 对象:
var carName = "porsche";
// 此处的代码可使用 window.carName
通过 let 关键词定义的全局变量不属于 window 对象:
let carName = "porsche";
// 此处的代码不可使用 window.carName
在相同的作用域,或在相同的块中,使用 var 和let重新声明 JavaScript 变量遵循以下规则:
{
var x = 10; // 现在,x 为 10
var x = 6; // 现在,x 为 6
}
{
var x = 10;
let x = 6; // 不允许
}
{
let x = 10;
var x = 6; // 不允许
}
{
let x = 10;
let x = 6; // 不允许
}
通过 var 声明的变量会提升到顶端。通过 let 定义的变量不会被提升到顶端。在声明 let 变量之前就使用它会导致 ReferenceError。
// 在此处,可以使用 carName
var carName;
// 在此处,不可以使用 carName
let carName;