js进阶之let与var变量

215 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第5天,点击查看活动详情

var声明变量

使用var时,声明的变量会自动提升到函数作用域

    function change(){
        console.log(id)
        var id = 123
    }
    //因为ECMAScript运行时把它看成等价的代码
    function change_two(){
        var id
        console.log(id)
        id = 123
    }

这就是所谓的变量提升,就是把所有的变量声明都拉到函数作用域的顶部。此外,可以同时使用多次var声明一个变量,变得的值取决于最后一次赋值。所以我们在使用时,一般都使用let和const来声明变量。

let声明

let 语句声明一个块级作用域的局部变量,而var声明的范围是函数作用域。

    function change(){
        if(true){
            var id =1
        }else{}
        console.log(id)
    }
    //打印出的id值为1
    function change_two(){
        if(true){
            let ide =1
        }else{}
        console.log(ide)
    }
    //提示ide is not defined

在没有执行到它的初始化语句之前,它仍旧存在于暂时性死区中。由上方的两个函数我们可以得知,使用var定义变量时,变量更容易收到污染,而导致后面的值发生变化。而使用let定义变量时,变量只会在块级作用域下才能被调用,防止了代码被污染。

暂时性死区

let 允许你声明一个作用域被限制在块作用域中的变量、语句或者表达式。与 var 关键字不同的是,var 声明的变量作用域是全局或者整个函数块的。 var 和 let 的另一个重要区别,let 声明的变量不会在作用域中被提升,它是在编译时才初始化。

    function change(){
        console.log(id)
        var id = 123
    }
    //能够正常打印id的值
    function change_two(){
        console.log(ide)
        let ide = 123
    }
    //会报错提示为ide is not defind
  • 问题:可以使用var 和let合并声明吗? 当然是不行的,var 与 let 合并的声明方式会抛出 SyntaxError 错误,因为 var 会将变量提升至块的顶部,这会导致隐式地重复声明变量。