美文网首页
「JavaScript学习笔记」 JavaScript 中的变量

「JavaScript学习笔记」 JavaScript 中的变量

作者: 这名字真不对 | 来源:发表于2017-07-28 01:09 被阅读0次

    update:
    2017-10-23 更新了文中一些表达以及添加了JS编译部分的理解。
    2018-06-06 这篇文章能更好的理解ES6的letconst理解ES6中的暂时死区(TDZ)


    先前看到方方老师最新的文章《我用了两个月的时间才理解 let》,以下是对该文章的学习结合自己理解总结的笔记。

    由于自己对JavaScript的编译和运行理解的不是非常深,文中对于JavaScript引擎的编译部分的理解可能并不准确,如有问题欢迎提出!

    var let function const声明的过程

    首先,需要明白,JavaScript在准备阶段会由JavsScript引擎进行编译的,编译的过程包括进行词法分析(词法作用域)及代码生成。当前面的准备完成后通常会立即执行代码。
    对于变量声明来说,一般可以简单的分为三个过程:

    1. create创建 (编译)
    2. initialize初始化 (编译)
    3. assign赋值 (执行代码)

    需要注意,初始化当中也可以进行赋值。

    var

    // 通过fn限定作用域
    function fn(){
        console.log(x) // 结果为undefined
        var x = 1
        var y = 2
    }
    fn()
    
    // 1. 找到fn作用域中所有var声明的变量,create变量(x和y)
    // 2. initialize变量x,y为undefined
    // 3. 开始执行代码 x = 1 ,将变量 x assign为 1
    // 4. y = 2 将变量 y assign为 2
    
    // 可以理解为下面的情况
    var x
    var y 
    x = 1
    y = 2
    

    基本过程:
    1.找到所有var,「创建」变量
    2.「初始化」变量并赋值undefined
    3.「执行代码」,根据执行的代码开始为变量「赋值」。
    在这个过程中产生了一个像是声明提升到作用域顶部的现象,因此会出现在var x = 1之前console.log(x)

    ps:从文章中学习到,声明提升其实并非是一个官方说法。

    function

    // 假设全局作用域下
    fn2 ()
    function fn2(){
        console.log(2)
    }
    // 1. 找到当前作用域中所有的function声明的变量,为当前环境create这些变量(声明fn2)。
    // 2. 初始化这些变量(fn2)并赋值为 function(){ console.log(2) }
    // 3. 执行代码fn2()
    

    基本过程:

    1. 会先找到所有function关键字的函数声明进行「创建」
    2. 进行「初始化并赋值」的操作
    3. 「执行」代码fn2(),因此产生了函数提升的过程
      需要注意的是,这里特指函数声明。

    let

    function fn3(){
        let x = 1
        x = 2 
    }
    fn3()
    // 1. fn3()作用域中找到所有的let声明的变量并创建它
    // 2. 开始执行代码  (与var 不同,这里还没初始化)
    // 3. 执行x = 1 ,x 「初始化」为 1(这并不是一次赋值,如果代码是 let x,就将 x 初始化为 undefined)
    // 4. 执行 x = 2,为x进行赋值
    

    根据这个区别,let的初始化是在执行代码的过程中,而不是先初始化:

    1. 找到所有let「创建」变量。
    2. 开始「执行」代码,使变量根据执行的代码「初始化并赋值」,此时如果没有赋值(比如:let x)则「初始化」为undefined
    3. 继续执行代码。

    由于let的初始化和赋值操作是在代码执行阶段,所以对let声明的变量的使用必须在声明后,也就没有出现声明提升的现象。

    const

    function fn4(){
        const x = 1
        x = 3 // Uncaught TypeError: Assignment to constant variable.
    }
    fn4()
    // 1. fn4的作用域中找到所有const声明的变量,并创建它(创建x) 
    // 2. 为变量初始化 (变量x 初始化为3)
    // 3. 执行代码x = 3 ,报错
    

    const和let 主要区别在于const声明的变量无法赋值,同时const必须在执行初始化的时候赋值,否则会抛出错误Uncaught SyntaxError: Missing initializer in const declaration

    letvar区别:

    1. var 的创建与初始化都提升了
    2. let 的创建提升了,但是初始化没有提升
    3. function 的创建、初始化、赋值都被提升了

    因此在let初始化之前使用其声明的变量,就会出现变量没有定义的错误:

    function fn5(){
        console.log(x) // Uncaught ReferenceError: x is not defined
        let x = 1 
    }
    fn5()
    

    小结

    对于上面的结论,我们对JavaScript变量声明做一些总结。

    创建:在编译阶段通过词法分析,对关键字(var,let,const,function)进行变量创建

    表现为变量提升到作用域顶端进行创建
    

    初始化:仍在编译阶段,不同关键字初始化方式不同,主要操作是为变量赋值:

    var:创建后初始化为undefined
    let:执行代码阶段进行初始化,如果没有赋值则初始化为undefined
    function:函数声明表达式为var的形式提升到作用域顶端创建,并同时初始化,赋值为一个函数对象
    const:创建后,执行代码阶段进行初始化,同时必须赋值
    

    执行代码阶段

    var:创建变量时已进行了第一次初始化
    let:关键字后为第一次执行,第一次执行时才进行初始化,可以不赋值,不赋值则为初始化为undefined
    function:
    const:关键字后第一次执行代码,必须赋值
    
    1. 所有变量声明方式都会将变量提升到作用域顶端,并进行创建
    2. 初始化的表现使得变量声明不同,产生了变量提升的现象

    其他相关

    参考文章和知乎上的知识,各浏览器在console上表现并不是一致的

    image.png

    比如上图中的问题,在chrome的console中,有以下的情况:

    1. 当 let声明变量x如果初始化失败了,就会处于一种已创建的状态
    2. 此时无法再次对x进行初始化,即初始化机会只有一次
    3. 此时x将处于暂时死区(temporal dead zone)
    4. 于是,此状态下的x将是不可用的
      但是对于其他浏览器可能报错信息将不一致,具体可以参照问题中贺老的回答。

    参考:
    https://zhuanlan.zhihu.com/p/28140450
    https://www.zhihu.com/question/62966713

    相关文章

      网友评论

          本文标题:「JavaScript学习笔记」 JavaScript 中的变量

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