JS 声明提升

记忆怪 bug

已于 2022-03-02 19:37:18 修改

阅读量229

点赞数

分类专栏： js高级文章标签： javascript html jquery

于 2022-03-02 19:27:28 首次发布

本文链接：https://blog.csdn.net/m0_66051368/article/details/123227665

版权

js高级专栏收录该内容

10 篇文章 0 订阅

订阅专栏

声明: let / var / const / function

提升: JS引擎带有 预编译 机制, 在JS代码执行之前, 需要预读作用域中所有声明

1 函数提升

会把整个函数提升到作用域的顶部。提升顺序是按照代码书写顺序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script>
        // 说明: 函数提升时, 会把整个函数提升到作用域的顶部
        // 提升顺序是按照代码书写顺序
        // 所以: 先提升的是打印 111 的
        // 后提升 打印 2222 的, 结果两个函数同名, 同名会覆盖
        function a() {
            console.log(111)
        }
        a() // 2222

        function a() {
            console.log(2222)
        }
        a() // 2222
    </script>
</body>

</html>

2 变量的声明

声明提升中, let/const/var 提升声明不提升赋值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script>
        // 与函数不同, 函数提升整个带方法体

        // 代码执行是 从上向下执行的
        // 所以 a 会先赋值为 打印1111, 然后执行
        // 然后 a 赋值为 打印2222 的函数, 再次执行
        // 所以 a 的值是被 2222 的函数覆盖了

        var a = function () {
            // 安装 JavaScript(ES6) code snippets 插件
            // 可以得到超多的 代码提示
            // clg
            console.log(1111)
        }
        a() // 1111

        var a = function () {
            console.log(2222)
        }
        a() // 2222
    </script>
</body>

</html>

3 提升与作用域

var: 声明的变量提升到所在作用域的顶部
用域: 共有3个作用域 -- 全局/函数/块级(let/const)

函数提升的特点: 函数名+函数体(整个方法体)
如果已经声明了函数a, 则 var a 不会覆盖函数a的值
不会被修改为未定义!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // var: 声明的变量 提升到所在作用域的顶部
      // 作用域: 共有3个作用域 -- 全局/函数/块级(let/const)
      var a = 5
      function b() {
        // 使用a: 遵循就近原则 -- 作用域链
        // 函数中使用一个变量, 当前作用域有,就用当前作用域的
        // 当前作用域没有, 就用上级作用域的
        // 一级一级向上找, 找到第一个a 来用
        console.log(a)
        // 函数提升的特点: 函数名+函数体(整个方法体)
        var a = 100   //undefined   
      }
      b()
    </script>
      //👆👆运行结果 查看图1
      // ——————————————————————升级————————————————————————————————————————
    <script>
        // var: 声明的变量 提升到所在作用域的顶部
        // 作用域: 共有3个作用域 -- 全局/函数/块级(let/const)
        var a = 5

        function b() {
            console.log(a)
            // 函数提升的特点: 函数名+函数体(整个方法体)
            function a() {}
            // 如果已经声明了函数a, 则 var a 不会覆盖 函数a的值
            // 不会被修改为 未定义!
            var a = 100 
        }
        b()
    </script>
    //👆👆运行结果 查看图2

  </body>
</html>

运行结果图1：