首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >javascript预编译(执行期的上下文)

javascript预编译(执行期的上下文)

作者头像
ZEHAN
发布2020-09-27 14:31:15
4650
发布2020-09-27 14:31:15
举报
文章被收录于专栏:前端开发ZEHAN前端开发ZEHAN

JavaScript预编译(执行期上下文)总结

上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script>
    function test(a,b){
        console.log(a);
        var a = 'demo';
        console.log(a);
        function a(){}
        console.log(a);
        var a = function (){}
        console.log(a);
        console.log(b)
        var b = 1;
    }
    test(1);
</script>
</body>
</html>

执行结果:

预编译(‘执行期上下文’)

预编译发生在函数执行之前

这句话很重要,函数执行之前也就是在这段程序开始之前,浏览器对马上要执行的函数进行预编译!! 预编译四部曲

  1. 创建AO对象
  2. 找形参和变量声明,将变量和形参作为AO属性名,值为undefined
  3. 将实参和形参相统一
  4. 在函数体里找到函数声明,值赋予函数体
  5. 最后程序输出变量值的时候,就是从AO对象中拿。

以上一个问题为例。以下过程都是在系统内部完成的

1、创建AO对象

var AO = {
        
}

2、找形参和变量声明,将变量和形参作为AO属性名,值为undefined

这里的形参首先出现的是a,b。变量为a,b。

var AO = {
        a = undefined;
        b = undefined;
}

3、将实参和形参相统一

这里的实参只有一个是1。

var AO = {
        a =1;
        b = undefined;
}

4、在函数体里找到函数声明,值赋予函数体

这里只有第十三行是函数声明,第十五行不是。

var AO = {
        a = function a(){};
        b = undefined;
}

5、系统执行程序(解释一行执行一行)

  1. console.log(a),输出a。这是输出的值为function a(){};
  2. var a = ‘demo’ 其实就是a = ‘demo’。因为var a已经在预编译中ok了。AO中的a的值变为’demo’;
  3. console.log(a) ,这时候输出的就是 demo;
  4. function a(){} 在预编译中已经用过了就不用了。
  5. console.log(a) , 输出 demo ;
  6. var a = function (){} AO中的a的值变为function (){};
  7. console.log(a),输出 function (){};
  8. console.log(b) b中的值一直未undefined ;输出 undefined;
  9. var b = 1; 将AO对象中的b的值变为1;

这样就完美解释了代码是怎样的执行循序

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-09-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 预编译(‘执行期上下文’)
  • 预编译发生在函数执行之前。
    • 1、创建AO对象
      • 2、找形参和变量声明,将变量和形参作为AO属性名,值为undefined
        • 3、将实参和形参相统一
          • 4、在函数体里找到函数声明,值赋予函数体
            • 5、系统执行程序(解释一行执行一行)
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档