js对代码解析机制

更新日期: 2018-12-29阅读: 2.8k标签: 机制
JavaScript运行三部曲

脚本执行js引擎都做了什么呢?

1.语法分析
2.预编译 
3.解释执行 
在执行代码前,还有两个步骤
语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误
解释执行顾名思义便是执行代码了
预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数
理解了预编译对大家理解作用域同样有帮助

JS预编译什么时候发生

我当初思维误区也发生在这里
预编译到底什么时候发生
希望大家不要让上面的运行过程让你产生误会,
误以为预编译仅仅发生在script内代码块执行前
这倒并没有错
预编译确确实实在script代码内执行前发生了
但是它大部分会发生在函数执行前

JS预编译实例

举例前,先来思考一下这几个概念:
变量声明 var…
函数声明 function…
<script>
    var a = 1;// 变量声明
    function b(y){//函数声明
        var x = 1;
        console.log('so easy');
    };
    var c = function(){//是变量声明而不是函数声明,这种写法是变量赋值,函数在js语言里也是一种数据,匿名函数作为变量赋值给定义的变量。这种形式在预编译处理阶段,只会给变量a分配一个内存空间,不会做初始化。初始化过程中会在执行时执行。
        //...
    }
    b(100);
</script>
<script>
    var d = 0;
</script>


让我们看看引擎对这段代码做了什么吧

页面产生便创建了GO全局对象(Global Object)(也就是大家熟悉的window对象)
第一个脚本文件加载
脚本加载完毕后,分析语法是否合法
开始预编译
查找变量声明,作为GO属性,值赋予undefined
查找函数声明,作为GO属性,值赋予函数体
//伪代码
GO/window = {
    //页面加载创建GO同时,创建了document、navigator、screen等等属性,此处省略
    a: undefined,
    c: undefined,
    b: function(y){
        var x = 1;
        console.log('so easy');
    }
}


解释执行代码(直到执行函数b) 
//伪代码
GO/window = {
    //变量随着执行流得到初始化
    a: 1,
    c: function(){
        //...
    },
    b: function(y){
        var x = 1;
        console.log('so easy');
    }
}


执行函数b之前,发生预编译 

创建AO活动对象(Active Object)
查找形参和变量声明,值赋予undefined
实参值赋给形参
查找函数声明,值赋予函数体
//伪代码
AO = {
    //创建AO同时,创建了arguments等等属性,此处省略
    y: 100,
    x: undefined
}



解释执行函数中代码
第一个脚本文件执行完毕,加载第二个脚本文件
第二个脚本文件加载完毕后,进行语法分析
语法分析完毕,开始预编译
重复最开始的预编译步骤……
大家要注意,
预编译阶段发生变量声明和函数声明,没有初始化行为(赋值),匿名函数不参与预编译
只有在解释执行阶段才会进行变量初始化
嗯~最后收一下尾

总结

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

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

1. 查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined
3. 查找函数声明,函数名作为全局对象的属性,值为函数引用



链接: https://fly63.com/article/detial/1717

浅析前端页面渲染机制

作为一个前端开发,最常见的运行环境应该是浏览器吧,为了更好的通过浏览器把优秀的产品带给用户,也为了更好的发展自己的前端职业之路,有必要了解从我们在浏览器地址栏输入网址到看到页面这期间浏览器是如何进行工作的

这一次,彻底弄懂 JavaScript 执行机制

javascript是一门单线程语言,Event Loop是javascript的执行机制.牢牢把握两个基本点,以认真学习javascript为中心,早日实现成为前端高手的伟大梦想!

创建js hook钩子_js中的钩子机制与实现

钩子机制也叫hook机制,或者你可以把它理解成一种匹配机制,就是我们在代码中设置一些钩子,然后程序执行时自动去匹配这些钩子;这样做的好处就是提高了程序的执行效率,减少了if else 的使用同事优化代码结构

小程序的更新机制_如何实现强制更新?

在讲小程序的更新机制之前,我们需要先了解小程序的2种启动模式,分别为:冷启动和热启动。小程序不同的启动方式,对应的更新情况不不一样的。无论冷启动,还是热启动。小程序都不会马上更新的,如果我们需要强制更新,需要如何实现呢?

基于JWT的Token认证机制实现及安全问题

JSON Web Token(JWT)是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。其JWT的组成:一个JWT实际上就是一个字符串,它由三部分组成,头部、载荷与签名。

web前端-JavaScript的运行机制

本文介绍JavaScript运行机制,JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。

轮询机制解决后端任务回调问题

现在有一个需求,前端有一个按钮,点击以后会调用后端一个接口,这个接口会根据用户的筛选条件去hadoop上跑任务,将图片的base64转为img然后打包成zip,生成一个下载连接返回给前端,弹出下载框。hadoop上的这个任务耗时比较久

JavaScript预解释是一种毫无节操的机制

js代码执行之前,浏览器首先会默认的把所有带var和function的进行提前的声明或者定义:1.理解声明和定义、2.对于带var和function关键字的在预解释的时候操作不一样的、3.预解释只发生在当前的作用域下

web认证机制

以前对认证这方面的认识一直不太深刻,不清楚为什么需要token这种认证,为什么不简单使用session存储用户登录信息等。最近读了几篇大牛的博客才对认证机制方面有了进一步了解。

浏览器JS事件触发机制

事件会从最外层开始发生,直到最具体的元素,也就是说假如父元素与子元素都绑定有点击事件,又互相重叠,那么先出发的会是父元素的事件,然后再传递到子元素。事件会从最内从的元素开始发生,再向外传播,正好与事件捕获相反。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!