JavaScript预编译原理分析

说到预编译,一直对它的原理比较模糊,这两天研究了一下它,现在总结分析一下它的原理,在开始分析之前要明确三点:
1. JavaScript是解释型语言, 既然是解释型语言,就是编译一行,执行一行
2. 脚本执行js引擎都做了什么呢? 1.语法分析 2.预编译 3.解释执行
3. 预编译是什么时候执行 ? 一般是在函数执行前

下面举个列子

<script>
    var a= 1;// 变量声明
    function b(y){//函数声明
        var  k= 2;
        console.log('good');
    };
    var c = function(){//是变量声明而不是函数声明!!
        //...
    }
    b(100);
</script>


在这里首先要分清什么是变量声明、什么是函数声明、什么是函数表达式
var… -这是变量声明
function test(){console.log(a)} -函数声明
var test= function (){console.log(a)} -函数表达式

搞清楚了这些 我们来看看引擎对这段代码做了什么
1.页面产生便创建了GO全局对象(Global Object)(也就是大家熟悉的window对象)
2.第一个脚本文件加载
3.脚本加载完毕后,分析语法是否合法``
4.开始预编译:
一. 查找变量声明,作为GO属性,值赋予undefined
二.查找函数声明,作为GO属性,值赋予函数体

所以会产生的GO如下

GO/window = {
    a: undefined,
    c: undefined,
    b: function(y){
        var k= 2;
        console.log('good');
    }
}

然后解释执行代码(直到执行函数b) GO随之发送变化

GO/window = {
    //变量随着执行流得到初始化
    a: 1,
    c: function(){
        //...
    },
    b: function(y){
        var k= 2;
        console.log('good');
    }
}

不过在函数b执行前 会发生预编译 产生一个自己的AO,其过程如下

  1. 创建AO对象(Active Object)
  2. 查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined
  3. 实参形参相统一,实参值赋给形参
  4. 查找函数声明,函数名作为AO对象的属性,值为函数引用
AO = {
    y: 100,
    k: undefined
}

然后继续解释执行函数中代码
注意:
预编译阶段发生变量声明和函数声明,没有初始化行为(赋值),匿名函数不参与预编译
只有在解释执行阶段才会进行变量初始化
总结
预编译(函数执行前)※

  1. 创建AO对象(Active Object)
  2. 查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined
  3. 实参形参相统一,实参值赋给形参
  4. 查找函数声明,函数名作为AO对象的属性,值为函数引用

预编译(脚本代码块script执行前)

  1. 查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined
  2. 查找函数声明,函数名作为全局对象的属性,值为函数引用
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值