博客
关于我
几张动图带你回顾JS的变量提升
阅读量:322 次
发布时间:2019-03-04

本文共 1360 字,大约阅读时间需要 4 分钟。

JavaScript 变量提升(Hoisting)解析

我是 TianTian,今天来分享一个技术点:JavaScript中的变量提升(Hoisting)

近日,一位大二学妹拿来一道看似简单的题目,却让我头疼了好几天。后来才发现,这道题目中隐藏着一个深奥的概念——变量提升

什么是变量提升?

根据MDN的定义,变量提升(Hoisting)是JavaScript引擎在编译阶段为我们预先处理代码的一种机制。具体来说,引擎会将函数和变量的声明位置提到代码的顶部执行。这意味着,即使代码中函数或变量的声明位置在实际编码中并非最前面,引擎依然可以正常执行。

简单来说,在编译阶段,JS引擎会将变量和函数的声明位置提前到代码的最前面,但实际代码中变量的声明位置并不会改变。这种行为类似于编译器在编译过程中对代码的优化。

创建阶段:变量的存储与初始化

当JS引擎获取代码后,首先会为所有函数和变量分配内存空间。对于函数,引擎会存储的是对整个函数代码的引用,而不会直接存储函数内部的逻辑。同样,变量的存储方式也与函数不同,主要有以下两种情况:

  • var 关键字声明的变量

    • 存储方式为 undefined
    • 在编译阶段,var声明的变量会被提前存储到内存中,但实际值会在执行阶段被初始化。
  • letconst 关键字声明的变量

    • 存储方式为 uninitialized
    • 这意味着,在声明语句之前访问这些变量会导致 ReferenceError(未定义的引用错误),这就是我们常说的 暂时性死区
  • 通过以上分析,我们可以看出,letconstvar 的主要区别在于它们声明变量时的存储状态。

    执行阶段:变量的赋值与行为

    在实际执行代码时,引擎会根据预先准备的变量引用和函数引用,逐步赋予变量和函数的实际值。以下是两个典型场景:

  • 函数调用前的函数存储

    • 函数在声明前即可被调用,且不会受到声明位置的影响。
    • 例如,输出 f() 的结果会是函数的定义代码中最后一次赋值的值。
  • var 声明变量前的行为

    • 访问未初始化的 var 变量时,引擎会返回 undefined
    • 这种行为虽然看似奇怪,但在早期的JS代码中并不少见。
  • 为什么引入 letconst

    为了减少开发者在代码中出现意外的未定义变量引用,ECMAScript 2015引入了 letconst 关键字。它们的主要作用是:

  • 防止未定义变量引用

    • 尝试访问 letconst 声明的变量(在声明前),会抛出 ReferenceError
    • 这与传统的 var 声明不同,后者在未赋值前会返回 undefined
  • 强制块级作用域

    • letconst 声明的变量具有块级作用域,不能在外部访问。
    • 这一特性有助于减少全局变量的使用,提升代码的可维护性。
  • 小结

    通过以上分析,我们可以得出以下结论:

  • 变量提升是JS引擎在编译阶段为我们优化代码的一种机制
  • varletconst 的主要区别在于变量的存储和初始化状态
    • var:默认值 undefined
    • letconst:未初始化状态 uninitialized,并且在声明前访问会抛出错误。
  • 建议开发者尽量使用 letconst 关键字,以编写更加规范和安全的代码。

    转载地址:http://yxaq.baihongyu.com/

    你可能感兴趣的文章
    Plotly 绘制表面 3D 未显示
    查看>>
    Plotly-Dash 存在未知问题并创建“加载依赖项时出错“;通过使用 Python-pandas.date_range
    查看>>
    Plotly-Dash:如何过滤具有多个数据框列的仪表板?
    查看>>
    Plotly:如何为 x 轴上的时间序列设置主要刻度线/网格线的值?
    查看>>
    Plotly:如何从 x 轴删除空日期?
    查看>>
    Plotly:如何从单条迹线制作堆积条形图?
    查看>>
    Plotly:如何以 Root 样式绘制直方图,仅显示直方图的轮廓?
    查看>>
    Plotly:如何使用 Plotly Express 组合散点图和线图?
    查看>>
    Plotly:如何使用 plotly.graph_objects 和 plotly.express 定义图形中的颜色?
    查看>>
    Plotly:如何使用 Python 对绘图对象条形图进行颜色编码?
    查看>>
    Plotly:如何使用 updatemenus 更新一个特定的跟踪?
    查看>>
    Plotly:如何使用长格式或宽格式的 pandas 数据框制作线图?
    查看>>
    Plotly:如何向烛台图添加交易量
    查看>>
    Plotly:如何在 plotly express 中找到趋势线的系数?
    查看>>
    Plotly:如何在桑基图中设置节点位置?
    查看>>
    Plotly:如何处理重叠的颜色条和图例?
    查看>>
    Plotly:如何手动设置 plotly express 散点图中点的颜色?
    查看>>
    Plotly:如何结合 make_subplots() 和 ff.create_distplot()?
    查看>>
    Plotly:如何绘制累积的“步骤“;直方图?
    查看>>
    Quartz进一步学习与使用
    查看>>