var声明及变量提升机制
在函数作用域或全局作用域中通过关键字var声明的变量,无论实际上是在哪里声明的,都会被当成在当前作用域顶部声明的变量,这就是我们常说的变量提升。
function getValue(condition) {
if(condition){
value = "blue";
// 其他代码
return value
}else{
// 此处可访问变量value,其值为undefined
return null
}
// 此处可访问变量value,其值为undefined
}
复制代码
如果,你有其他编程语言的经验,例如Java,Python,Perl等,很可能会认为只有当condition的值为true时才会创建变量value。事实上,在预编译阶段,JavaScript引擎会将上面的getValue函数修改成下面这样:
function getValue(condition) {
var value;
if(condition){
value = "blue";
// 其他代码
return value
}else{
// 此处可访问变量value,其值为undefined
return null
}
// 此处可访问变量value,其值为undefined
}
复制代码
变量value的声明被提升至函数顶部,而初始化操作依旧在原地执行,所以在else子句中也可以访问到value变量,只不过值为undefined,因为尚未初始化。
块级声明
ES6中为了解决变量提升给开发者带来的困扰,所以特地引入了块级作用域来强化对变量生命周期的控制。
块级作用域也被称为词法作用域,存在于
- 函数内部
- 块中({}之间的区域)
let声明
let与var的用法相同,区别是,用let声明的变量的作用域被限制在当前的代码块中。所以let声明的变量不存在变量提升。
function getValue(condition) {
if(condition){
let value = "blue";
// 其他代码
return value
}else{
// 变量value在此处不存在
return null
}
// 变量value在此处不存在
}
复制代码
改为let声明后,如果condition的值为false,value就不会存在
禁止重复声明
var value = 10
// 抛出语法错误
let value = 20
复制代码
同一作用域中,不能用let重复定义已经存在的标识符,不然会报错。 但如果当前作用域内嵌另一个作用域,便可用let声明同名变量
var value = 10
if(condition){
// 不会抛出错误
let value = 20
// 其他代码
}
复制代码
注意:这里if内部的value会遮蔽if外部的value,后者只有在if块外才能访问到。
const 声明
ES6中提供了const关键字。使用const声明的是常量,意味着,其值一旦设定,不可更改。所以使用const声明常量时,一定要在声明时就进行初始化操作。
// 有效的常量
const MAX = 10;
// 语法错误:常量未初始化
const MIN;
复制代码
const和let声明的变量都是块级标识符,所以都是只在当前代码块内有效,一旦执行到块外会被销毁。
if(condition){
const MAX = 10;
// 其他代码
}
// 此处无法访问MAX变量
复制代码
与let相似,在同一一作用域使用const重复声明已经存在的变量也会导致语法错误。
var name = "小米";
let age = 18
// 这两条语句都会抛出错误
const name = "大米";
const age = 25
复制代码
用const声明对象
通常来说,const声明不允许修改绑定,但允许修改值,也就是说用const声明对象可以修改对象的属性值,但是不能修改对象的引用。
const person = {
name: "小米",
age: 18
}
// 可以修改对象的属性值
person.name = "大米"
// 抛出语法错误
person = {
name: "大米"
}
复制代码
我们知道,let和const声明的变量不存在变量提升,所以如果在变量声明之前访问该变量,会报错。
if(condition){
console.log(typeof value); // 引用错误
let value = "blue"
}
复制代码
循环中的块作用域绑定
for(var i = 0; i < 9; i++){
console.log(arr[i])
}
// 在这里仍然可以访问变量i
console.log(i); // 9
复制代码
如果想变量i只存在于for循环中,可以使用let变量
for(let i = 0; i < 9; i++){
console.log(arr[i])
}
// i在这里不可以访问,会报错
console.log(i); // 9
复制代码
循环中的函数
我们在开发中经常会遇到以下问题
var funcs = [];
for(var i = 0; i < 10; i++){
funcs.push(function(){
console.log(i);
})
}
funcs.forEach(function(func){
func(); // 输出10次数字10
})
复制代码
为了解决这个问题,通常会使用立即调用函数表达式。
var funcs = [];
for(var i = 0; i < 10; i++){
funcs.push((function (value) {
return function () {
console.log(value)
}
}(i)))
}
funcs.forEach(function (func) {
func(); // 输出0,然后是1,2,直到9
})
复制代码
ES6出现之后,可以直接使用let声明变量来简化上述过程
var funcs = [];
for(let i = 0; i < 10; i++){
funcs.push(function(){
console.log(i);
})
}
funcs.forEach(function(func){
func(); // // 输出0,然后是1,2,直到9
})
复制代码
全局块作用域绑定
let和const与var的另一个不同是,当var在全局作用域中声明一个变量时,它同时也会作为window对象的属性,这意味着,很可能会覆盖window对象中已经存在的属性。
// 在浏览器中
var RegExp = "Hello";
console.log(window.RegExp); // Hello
var a = 1;
console.log(window.a); // 1
复制代码
当let或者const在全局作用域中声明变量时,并不会作为window对象的属性。
// 在浏览器中
let RegExp = "Hello";
console.log(RegExp); // Hello
console.log(window.RegExp === RegExp); // false
const a = 1
console.log(a); // 1
console.log(a === window.a); // false
复制代码
块级绑定最佳实践的进化
默认使用const,只有需要改变变量的值时,才使用let
小结
let和const声明的变量具有块级作用域,不存在变量提升,在变量声明前使用,会导致暂时性死区,只可以在声明的代码块中使用。