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块级声明 ,块级声明也就是让所声明的变量在指定块的作用域外无法被访问。块级作用域在如下情况被创建:

  1. 在一个函数内部
  2. 在一个代码块(由一对花括号包裹)内部

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
    })
}

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):