JavaScript 变量作用域
在介绍 JavaScript 数据类型 的时候,我们都是使用 var
关键字来声明变量,但由于 JavaScript 存在提升(Hoisting)机制,var 声明的变量容易让人迷惑。因此,ECMAScript 6 的新语法增加了 let
和 const
关键字声明变量的用法。
在介绍 let
和 const
之前,我们还是先来看看 var
的作用域范围。
JavaScript 局部变量
如果变量在函数内声明,那么这个变量就是局部作用域的变量。例如:
function myFunction() {
var carName = "Tesla"; // 函数内可调用 carName 变量
}
局部变量 carName
只能在函数内部访问,在函数开始执行时创建,函数执行完后局部变量会自动销毁。
JavaScript 全局变量
相反,在函数外定义的变量,即为全局变量。全局变量具有全局作用域,网页中所有脚本和函数均可使用。例如:
var carName = "Tesla";
/* 此处可使用 carName 变量 */
function myFunction()
{
/* 函数内可使用 carName 变量 */
}
var 变量提升机制
函数内可以定义与函数外同名的变量,而且会在函数作用域内覆盖,例如:
var carName = "Tesla";
function myFunction() {
console.log(carName);
var carName = "BMW";
console.log(carName);
}
执行 myFunction()
的输出如下:
undefined
BMW
第一个输出之所以是 undefined
,原因是代码在预编译阶段被 JavaScript 引擎修改这下面这样了。
var carName = "Tesla";
function myFunction() {
var carName;
console.log(carName);
carName = "BMW";
console.log(carName);
}
变量 carName
的声明被提升至函数顶部,而初始化操作依旧留在原处执行。因此第一个 console.log()
访问 carName
变量时,由于变量尚未初始化,所以其值为 undefined
。
为了避免 var 变量提升机制带来的潜在问题,ECMAScript 6 引入了 let 变量。