js对代码解析机制

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://www.cnblogs.com/lujunan/p/10191852.html

时间: 12-28

js对代码解析机制的相关文章

JS的解析机制

JS的解析机制,是JS的又一大重点知识点,在面试题中更经常出现,今天就来唠唠他们的原理.首先呢,我们在我们伟大的浏览器中,有个叫做JS解析器的东西,它专门用来读取JS,执行JS.一般情况是存在作用域就存在解析,那它是怎么运行的呢.首先呢,然后分成两大步骤. 1 第一步叫做JS预解析,这一步骤实际上是一种准备工作把,在执行之前,它会先浏览整个代码,然后寻找三种东西. 1var  2 函数声明    我来分别解释一下.首先它会提取带var声明的变量,然后放到作用域中,但是不会提取变量的值,会先给他赋

JS代码执行机制

JS代码从编译到执行 我们写出一段JS代码,JS的引擎并不是按照我们书写的顺序从上到下顺序编译并且执行的,首先是按照自己的规则对我们的代码先进行编译,然后从上到下执行编译的代码. 在全局作用域中,JS首先会对我们的函数进行声明,然后就是我们经常听到的变量提升机制,然后才是按照我们书写代码的顺序,来进行编译,然后在执行编译的代码. 看如下代码: function fn(){ console.log(a); } fn(); var a = "value"; 非常常见的一个面试题fn函数执行

js学习笔记5----作用域及解析机制

1.作用域: 域:空间.范围.区域… 作用:读.写 script  全局变量,全局函数 自上而下 函数 由里到外 {} 2.js解析: ⑴   “找一些东西”:var. function. 参数…… a = 未定义 所有的变量,在正式运行代码之前,都提前赋予了一个值:未定义. fn1 = function fn(){alert(2);} 所有的函数,在正式运行代码之前,都是整个函数块. 这一过程叫做 :“JS的预解析” 遇到重名的变量和函数,就只留下函数 ⑵   逐行解读代码: 表达式:=. +

Node.js入门:模块机制

CommonJS规范  早在Netscape诞生不久后,JavaScript就一直在探索本地编程的路,Rhino是其代表产物.无奈那时服务端JavaScript走的路均是参考众多服务器端语言来实现的,在这样的背景之下,一没有特色,二没有实用价值.但是随着JavaScript在前端的应用越来越广泛,以及服务端JavaScript的推动,JavaScript现有的规范十分薄弱,不利于JavaScript大规模的应用.那些以JavaScript为宿主语言的环境中,只有本身的基础原生对象和类型,更多的对

【译】深入理解python3.4中Asyncio库与Node.js的异步IO机制

转载自http://xidui.github.io/2015/10/29/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3python3-4-Asyncio%E5%BA%93%E4%B8%8ENode-js%E7%9A%84%E5%BC%82%E6%AD%A5IO%E6%9C%BA%E5%88%B6/ 译者:xidui原文: http://sahandsaba.com/understanding-asyncio-node-js-python-3-4.html 译者前言 如

关于js中的回收机制,通俗版

在前面的几篇文章中,我讲解过了js中的回收机制,但是对于当时的我来说,我自己对回收机制的这个概念也有些懵懵懂懂,现在对回收机制有了更深入的理解,所以特此发布此文给于总结,也好加深记忆. 如果你想学习闭包那么js中的回收机制是必不可少的,当然学习闭包除了需要理解js中的回收机制以外还需要了解其他的概念,我的其他文章有相关的说明,这里不做闭包的讲解. 为什么要有回收机制?why? 打个比方,我有一个内存卡,这个内存是8G的,我把文件,视频,音乐,都保存到了这个内存卡,随着我的储存的内容越来越多,这个

轻松搞定javascript预解析机制(搞定后,一切有关变态面试题都是浮云~~)

hey,guys!我们一起总结一下JS预解析吧! 首先,我们得搞清楚JS预解析和JS逐行执行的关系.其实它们两并不冲突,一个例子轻松理解它们的关系: 你去酒店吃饭,吃饭前你得看下菜谱,点下菜(JS预解析),但吃的时候还是一口一口的吃(JS逐行执行)! OK,解决下面五个问题,JS预解析就算过了~~(前提:对JS变量作用域有清晰理解) 一.JS预解析是什么? 其实就是对程序要用到的材料(变量,函数)给一个初始值,并存到一个表中(我自己虚构的),当程序运行到那一行时,就来这个表看有没有初始值,没有就

再次讲解js中的回收机制是怎么一回事。

在前几天的一篇闭包文章中我们简单的介绍了一下闭包,但是并没有深入的讲解,因为闭包涉及的知识点比较多,为了能够更好的理解闭包,今天讲解一下关于js中的回收机制. 在初识闭包一文中我说过js中有回收机制这么一回事,让我们一起回顾一下,并且深入的了解js中的回收机制到底是怎么一回事. function a(){ var num = 10; return function(){ num ++; console.log(num); } } a()(); //11 a()(); //11 按理说第二次执行函

从var func=function 和 function func()区别谈Javascript的预解析机制

var func=function 和 function func()在意义上没有任何不同,但其解释优先级不同:后者会先于同一语句级的其他语句. 即: { var k = xx(); function xx(){return 5;} } 不会出错,而 { var k = xx(); var xx = function(){return 5;} } 则会出错. 为什么会这样呢?这就要引出javascript中的预解析机制来解释了. JavaScript解析过程分为两个阶段,一个是编译阶段,另外一个

Node.js入门:事件机制

Evented I/O for V8 JavaScript 基于V8引擎实现的事件驱动IO. 事件机制的实现 Node.js中大部分的模块,都继承自Event模块(http://nodejs.org/docs/latest/api/events.html ).Event模块(events.EventEmitter)是一个简单的事件监听器模式的实现.具有addListener/on,once,removeListener,removeAllListeners,emit等基本的事件监听模式的方法实现