js中的变量声明(var、let、const的区别和解析)
js中的变量声明
在es6之前声明变量使用var关键字,无论声明位置在何处,都会把声明提升到当前作用域的顶部。如:
function myVar(flag) {
console.log(value); // undefined
if (flag) {
var value = '22';
console.log(value); // 22
} else {
console.log(value); // 当flag为false时也可以访问变量值为 undefined
}
console.log(value); // 22
}
myVar(1);
在es6中引入了let和const块级声明 ,块级声明也就是让所声明的变量在指定块的作用域外无法被访问。块级作用域在如下情况被创建:
- 在一个函数内部
- 在一个代码块(由一对花括号包裹)内部
let声明
let 声明的语法与 var 的语法一致 ,主要的区别就是let声明的变量不会自动的提升到当前作用域的顶部(在声明之前访问会报错),并且会形成块级作用域,在外部作用域无法访问当前变量。如:
function myVar(flag) {
console.log(value); // 报错value is not defined
if (flag) {
console.log(value); // 报错value is not defined
let value = '22';
console.log(value); // 22
} else {
console.log(value); // 当flag为false时报错value is not defined
}
console.log(value); // 报错value is not defined
}
myVar(1);
此外除了上述区别外,在同一作用于下let声明的变量还会禁止重复声明,否则将会报错。如:
var num = 1;
let num = 3; // 语法错误
console.log(num);
const声明
const声明和上述let声明的作用相同,除此之外两者的区别之处是使用 const 声明的变量会被认为是常量不能进行改变。如:
const maxItems = 5;
maxItems = 6; // 报错
并且在声明的时候就必须初始化。如:
const maxItems = 30; // 有效的常量
const name; // 语法错误:未进行初始化
最后需要注意的是const声明对象只会阻止变量与对象的绑定,并不会阻止对象内部属性的修改。如:
const person = {
name: "Nicholas"
};
person.name = "Greg"; // 工作正常
person = { // 抛出错误
name: "Greg"
};
循环中的块级绑定
如在for循环中的应用,使用var和let声明的对比。如:
for (var i = 0; i < 10; i++) {
setTimeout( () => {
console.log(i); // 打印10次10
})
}
for (let i = 0; i < 10; i++) {
setTimeout( () => {
console.log(i); // 打印从0 到 9
})
}
发表评论 (审核通过后显示评论):