关闭

js对代码解析机制

时间: 2018-12-29阅读: 895标签: 机制
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. 查找函数声明,函数名作为全局对象的属性,值为函数引用



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1717

关闭

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

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

Vue中的provide/inject机制

这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

Js事件循环(Event Loop)机制

Event Loop是计算机系统的一种运行机制,是个很重要的概念。而Javascript用这种机制来解决单线程运行带来的问题。理解很熟悉将会有利于我们更容易理解Vue的异步事件。Js是一种运行在网页的简单的脚本语言

JavaScript运行机制浅析

输出结果是undefined, 这种现象被称成“预解析”:JavaScript引擎会优先解析var变量和function定义。在预解析完成后,才会执行代码。如果一个文档流中包含多个script代码段(用script标签分隔的js代码或引入的js文件)

Javascript中的执行机制_Event Loop

众所周知,Javascript是单线程语言, 这就意味着,所有的任务都必须按照顺序执行,只有等前面的一个任务执行完毕了,下一个任务才能执行。如果前面一个任务耗时很长,后一个任务就得一直等着,因此,为了实现主线程的不阻塞,就有了Event Loop。

javaScriipt 使用垃圾回收机制来自动管理内存

js 的回收机制目前分为两种方式:1.标记清除(各大浏览器主流算法)2.引用技术这种算法的思想是跟踪记录所有值被引用的次数。javaScript 引擎目前都不再使用这种算法

深入解析 Node.js 事件循环工作机制

本文从对线程、事件循环、事件循环常见的问题和错误上分别进行说明,进一步探索了 Node 的核心工作原理。每当人们谈论 Node.js 时,都会出现很多问题,比如它 究竟是什么 、这项技术有什么用、它是否 有未来 等等。

浅谈小程序运行机制

接触小程序有一段时间了,总得来说小程序开发门槛比较低,但其中基本的运行机制和原理还是要懂的。“比如我在面试的时候问到一个关于小程序的问题,问小程序有window对象吗?

深入理解Chrome V8垃圾回收机制

最近,项目进入维护期,基本没有什么需求,比较闲,这让我莫名的有了危机感,每天像是在混日子,感觉这像是在温水煮青蛙,已经毕业3年了,很怕自己到了5年经验的时候,能力却和3年经验的时候一样,没什么长进

JS垃圾回收机制

找出不再继续使用的变量,然后释放掉其占用的内存。当变量进入环境(可以理解为一个函数开始执行了)时,就将这个变量标记为“进入环境”,从逻辑上讲,不能释放掉进入环境的变量,而当变量离开环境的的时候,则将其标记为离开环境。

点击更多...

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