ES5:
1. 没有块级作用域
在其他类C语言中,由花括号封闭的代码块都有自己的作用域(如果用ECMAScript的话来说,就是它们自己的执行环境),
所以支持根据条件来定义变量。
if(true){var color = 'blue';
}
console.log(color);//'blue'
这里是在一个if语句中定义了变量color。如果是在C、C++或Java中,color会在if语句执
行完毕后被销毁。但在JavaScript中,if语句中的变量声明会将变量添加到当前的执行环境(在这里是
全局环境)中。在使用for语句时,尤其要牢记这一差异,例如:
for(var i=0; i < 10; i++){
doSomething(i);
}
console.log(i);//10
2. 使用var声明的变量会自动被添加到最近的执行环境中。
//'use strict';
var a2 = 'Hera';functionaaa(){var a2 = 'Apollo'; //aaa函数作用域的a2,不会影响到全局作用域的a2,注意区分
functionbbb(){
a2= 'Diana'; //由于闭包,访问的是调用aaa函数之后产生的局部函数执行环境中的a2变量。
a1= 'Medusa'; //没有使用var声明,在非严格模式下,当bbb函数调用之后,a1会被添加到全局环境。
//在严格模式下会直接报错a1 is not defined
}
bbb();
console.log(a2);
}
aaa();
console.log(a2);//全局环境声明的 a2 'Hera'
console.log(a1);//bbb函数被调用后,被添加到全局环境的a1变量
//严格模式时,在调用bbb时,a1 = 'Medusa'这一行就会报错a1 is not defined
3.查询标识符
在上一步中,bbb函数中a2 = 'Diana' ,就是一个查询标识符的过程。a2没有使用var声明,向上一级aaa函数的作用域开始查询,
查询到了var a2 = 'Apollo'之后,再赋值,那么这个时候,aaa作用域的a2已然变成了 ‘Diana’。
需要注意的是,下面这个例子:
var color = "blue";functiongetColor(){var color = "red";returncolor;
}
console.log(getColor());//"red"
这种情况下,任何位于局部变量color的声明之后的代码,如果不使用window.color,都无法访问全局color变量。
ES6:
1.var声明与变量提升
使用var关键字声明的变量,无论其实际声明位置在何处,都会被视为声明于所在函数的顶部(如果声明不在任何函数内,
则视为在全局作用于的顶部)。这就是所谓的变量提升(hoisting)。为了说明变量提升的含义,见下列例子:
functiongetValue(condition) {if(condition){var value = "blue";//其他代码
returnvalue;
}else{//value 在此处可访问,值为 undefined
return null;
}//value 在此处可访问,值为 undefined
}
如果你不太熟悉 JS ,或许会认为仅当 condition 的值为 true 时,变量 value 才会被创建。
但实际上,value 无论如何都会被创建。 JS 引擎在后台对 getValue 函数进行了调整, 就像这样:
functiongetValue(condition) {varvalue;if(condition) {
value= "blue";//其他代码
returnvalue;
}else{return null;
}
}
value 变量的声明被提升到了顶部,而初始化工作则保留在原处。这意味着在 else 分支内
value 变量也是可访问的,此处它的值会是 undefined ,因为它并没有被初始化。
那么其实之前的代码可以写成
varcolor;if(true){
color= 'blue';
}
console.log(color);//'blue'
vari;for(i=0; i < 10; i++){
doSomething(i);
}
console.log(i);//10
2.块级声明
块级声明也就是让所声明的变量在指定块的作用域外无法访问。
1.在一个函数内部
2.在一个代码块(由一对花括号包裹)内部
块级作用域是很多类 C 语言的工作机制, ES6 引入块级声明,是为了给 JS 添加灵活性以及 与其他语言的一致性。
3.let声明
还有需要注意的一点是,let并不影响闭包。