zoukankan      html  css  js  c++  java
  • 「动画演示」:变量提升别有一翻风味

    '提升'是 JS 开发都经常接触的一个术语,如果你刚接触 JS,可能会遇到一些奇怪的行为,其中一些变量是随机undefined,会抛出ReferenceErrors 异常等等。提升通常被解释为将变量和函数放到作用域顶部,但实际上并不是这样,尽管行为看起来是这样的。

    当 JS 引擎获取我们的代码时,它要做的第一件事就是为代码中的数据设置内存。目前还没有执行任何代码,只是准备要执行的所有内容。函数声明和变量的存储方式不同。函数是以按保存函数的引用的方式来存储。

    1.函数是以按保存函数的引用的方式来存储(Functions are stored with a reference to the entire function)

    「动画演示」:变量提升别有一翻风味

     

    使用变量,则有所不同。 ES6 引入了两个新的关键字来声明变量:let和const。用let或const关键字声明的变量保存的状态是 uninitialized。

    2.用let或const关键字声明的变量保存的状态是 uninitialized

    「动画演示」:变量提升别有一翻风味

     

    3.使用var关键字声明的变量存储的默认值为undefined。

    「动画演示」:变量提升别有一翻风味

     

    现在创建阶段已经完成,我们可以执行代码。让我们看看在声明函数或任何变量之前,如果顶部执行3个console.log语句会发生什么。

    由于函数存储在对整个函数代码的引用中,所以我们可以在创建它们的行之前调用它们。

    4.在执行阶段,我们可以在声明函数之前调用它们,因为我们在内存中引用了整个函数(During the execution phase, we can invoke a function before we declared them, since we a reference to the entire function in memory)

    「动画演示」:变量提升别有一翻风味

     

    当我们在变量声明之前引用var关键字声明的变量时,它只会返回其存储时的默认值:undefined。然而,这有时会导致“意料之外”的行为。在大多数情况下,我们有可能会无意中重新引用了它(你可能不希望它的值为undefined)

    5. 当我们在变量声明之前引用var关键字声明的变量时,它只会返回其存储时的默认值:undefined

    「动画演示」:变量提升别有一翻风味

     

    为了防止意外引用undefined的变量,就像我们可以使用var关键字一样,每当我们试图访问未初始化(uninitialized )的变量时,都会抛出一个ReferenceError。在它们实际声明之前的“区域”称为**临时死区**:不能在它们的初始化之前引用变量(这也包括ES6类) **6.每当我们试图访问未初始化(uninitialized )的变量时,都会抛出一个ReferenceError`。在它们实际声明之前的“区域”称为临时死区

    「动画演示」:变量提升别有一翻风味

     

    当引擎通过我们实际声明变量的那一行时,内存中的值会被我们实际声明的值覆盖。

    「动画演示」:变量提升别有一翻风味

     

    总结

    • 在执行代码之前,函数和变量存储在内存中,用于执行上下文,这就是所谓的提升。
    • 函数存储为对整个函数的引用,用var关键字声明的变量默认值为undefined,用let和const关键字声明变量默认存储值为uninitialized。

    希望本文对你有所帮助,感谢阅读。

  • 相关阅读:
    centos安装nginx
    Vue练习十一:02_05_函数传参改变Div任意属性的值
    Vue练习十:02_04_弹出层
    Vue练习九:02_03_求数组中所有数字的和
    Vue练习八:02_02_点击div显示内容
    Vue练习七:02_01_百度输入法
    Vue练习六:01_06_记住密码提示框
    Vue练习五:01_05_鼠标移入改变样式鼠标移出恢复
    Vue练习四:01_04_点击将DIV变成红色
    Vue练习三:01_03_函数传参
  • 原文地址:https://www.cnblogs.com/guchengnan/p/12132234.html
Copyright © 2011-2022 走看看