前端面试必备(1)预编译

最新推荐文章于 2024-05-26 22:02:05 发布

学无止境QAQ

最新推荐文章于 2024-05-26 22:02:05 发布

阅读量343

点赞数

分类专栏：面试题大全文章标签：前端 html 面试 html5 javascript

本文链接：https://blog.csdn.net/qq_46368050/article/details/125100125

版权

面试题大全专栏收录该内容

4 篇文章 2 订阅

订阅专栏

这篇博客探讨了JavaScript中的预编译过程，详细解释了在函数作用域创建阶段AO对象（活动对象）的建立，包括形参、变量声明、函数声明等步骤。文章通过一个具体的函数执行示例，展示了预编译后的AO对象状态，并说明了在JS解释执行阶段如何依据预编译结果进行。同时，博客提供了gitee仓库的链接，供读者查阅更多相关代码案例。

摘要由CSDN通过智能技术生成

我们先看这道题:

预编译

预编译的时候做了哪些事情?

那么这个AO对象在函数作用域的创建阶段做了哪些事情呢?

js的解释执行逐行执行

gitee仓库地址获取代码:https://gitee.com/CMD-UROOT/case-interview

我们先看这道题:

建议自己先思考怎么解决,再看解题思路

<!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>预编译</title>
</head>
<body>
  <script>
    function fn(a,c) {
      console.log(a)
      var a = 123
      console.log(a)
      console.log(c)
      function a() {}
      if (false) {
        var d = 678
      }
      console.log(d)
      console.log(b)
      var b = function () {}
      console.log(b)
      function c () {}
      console.log(c)
    }
    fn(1,2)
  </script>
</body>
</html>

解决这道题我们需要了解预编译

预编译

作用域的创建阶段就是预编译的阶段

预编译的时候做了哪些事情?

作用域分为全局的作用域和函数的作用域

在函数的作用域创建阶段与之对应的有一个js的变量对象(也称为AO对象) ,我们是访问不到的,是供js引擎自己去访问的

那么这个AO对象在函数作用域的创建阶段做了哪些事情呢?

1.创建了ao对象

A0:{

}

2.找形参和变量的声明作为ao对象的属性名值是undefined

A0:{

a:undefined

c:undefined

d:undefined

b:undefined

}

3.实参和形参相统一

统一后:

A0:{

a:undefined 1

c:undefined 2

d:undefined

b:undefined

}

4.找函数声明会覆盖变量的声明

覆盖后:也就是预编译阶段已经完成

A0:{

a:undefined 1 function a() {}

c:undefined 2 function c() {}

d:undefined

b:undefined

}

js的解释执行逐行执行

现在我们对照预编译阶段已经完成的AO对象来做题,就如有神助了!

A0:{

a:undefined 1 function a() {}

c:undefined 2 function c() {}

d:undefined

b:undefined

}

完整代码:

<!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>预编译</title>
</head>
<body>
  <script>
    function fn(a,c) {
      console.log(a) //function a() {}
      var a = 123
      console.log(a) //123
      console.log(c) //function c() {}
      function a() {}
      if (false) { //这里是false并不会进来
        var d = 678
      }
      console.log(d) //undefined
      console.log(b) //undefined
      var b = function () {} //这里b赋值为function(){},所以下面打印b就是function(){}
      console.log(b) //function () {}
      function c () {} //并不执行
      console.log(c)  //function c() {}
    }
    fn(1,2)
    

    // AO:{
    //   a:undefined 1 function a() {}
    //   c:undefined 2 function c() {}
    //   d:undefined
    //   b:undefined
    // }
  </script>
</body>
</html>

控制台打印验证: