美文网首页programming
var与let、const的区别

var与let、const的区别

作者: 温酒居士 | 来源:发表于2019-10-07 21:43 被阅读0次

    什么是变量提升
    JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
    JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。

    一)var声明变量存在变量提升,let和const不存在变量提升

    console.log(a); // undefined  ===>  a已声明还没赋值,默认得到undefined值
    var a = 100;
    console.log(b); // 报错:b is not defined  ===> 找不到b这个变量
    let b = 10;
    console.log(c); // 报错:c is not defined  ===> 找不到c这个变量
    const c = 10;
    

    再来看这段代码

    function fn() {
       //var a
        if (true) {
            console.log(a + ' now')
        }
        else {
            var a = 1
            console.log(2)
        }
    }
    
    fn() // a -> undefined
    

    我们发现不执行的代码也会影响会执行的代码,因为var a会提升到if语句的前面

    undefined可以翻译为不明确,not defined可以翻译为未定义

    在Java中变量的分为全局变量(成员变量)或者局部变量,在方法体中定义的变量都是局部变量,否则是全局变量(即在方法体外,在类中定义的变量)

    在JavaScript中,在方法体外外用var定义的变量其它方法可以共享,在方法中用var定义的变量只有该方法内生效。

    二)let、const都是块级局部变量
    顾名思义,就是只在当前代码块起作用

    {
        let a = 1
    }
    console.log(a) // undefined
    

    const 的特性和 let 完全一样,不同的只是
    1)声明时候必须赋值

    const a
    

    编译器报错


    image

    控制台报错

    SyntaxError: Missing initializer in const declaration
    

    2)只能进行一次赋值,即声明后不能再修改

    const a=1
    a=2
    

    编译器报错


    image

    控制台报错

    TypeError: Assignment to constant variable.
    

    3)如果声明的是复合类型数据,可以修改其属性

    三)同一作用域下let和const不能声明同名变量,而var可以

    const a =2
    const a=1
    
    SyntaxError: Identifier 'b' has already been declared
    

    面试题

    简单的Demo

    for (let i = 0; i < 5; i++) {
        console.log(i)
    }
    

    上面的代码我们知道打印结果是 0, 1, 2, 3, 4,但是你们有没有想过这个变量i的作用域到底是什么呢?

    有人说在这个for循环里呀,但是我这里想说的是这个i作用域是在括号()里。正常的代码是这样的:

    1.首先这个变量_i的作用域是在()里才有效的,循环体里是不能访问到_i的
    2.每次循环的时候创建一个i变量,将括号里的_i赋值到变量i上
    3.最后i++后再将变量i的值赋值回_i上

    当然这个过程是很复杂的,可以用下面代码理解,但是JS的实现机制是很复杂的,这里想要说明的let i的作用域有时候并不是我们所理解的那样的。

    for (let _i = 0; i < 5; i++) {
        let i = _i
        console.log(i)
        // i++ 先做
        _i = i
    }
    

    个人网站

    相关文章

      网友评论

        本文标题:var与let、const的区别

        本文链接:https://www.haomeiwen.com/subject/fbqvpctx.html