关键词:
JavaScript运行三部曲
JavaScript在展示页面之前会提前进行编译,因此也称之为预编译,而预编译基本分为三部分
- 语法分析 ---- (有没有基本的语法错误,例如中文,关键字错误...)
- 词法分析(预编译)
- 全局对象(global obkject)GO对象
- 局部对象(active obkject)AO对象
- 逐行解释执行
JS预编译什么时候发生
预编译到底什么时候发生? 误以为预编译仅仅发生在script内代码块执行前 这倒并没有错 预编译确确实实在script代码内执行前发生了 但是它大部分会发生在函数执行前
实例分析
GO对象--.全局 直接是script标签中的代码,不包括函数执行
页面产生便创建了GO全局对象(Global Object)(也就是window对象);
第一个脚本文件加载;
脚本加载完毕后,分析语法是否合法;
开始预编译 查找变量声明,作为GO属性,值赋予undefined; 查找函数声明,作为GO属性,值赋予函数体;
<script type="text/javascript">
console.log(a);
var a = 100;
console.log(a)
var b = 200
var c = 300
function a()
function fun()
</script>
执行前:
- 首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析
GO =
...//省略自带属性
- 分析变量声明,变量名为属性名,值为undefined
GO =
a : undefined,
b : undefined,
c : undefined
- 分析<b>函数声明</b>,函数名为属性名,值为函数体,如果函数名和变量名相同,则将其覆盖
GO =
a : function a()
,
b : undefined,
c : undefined,
fun : function fun()
此时,GO就是预编译完成的最终对象,词法分析结束
- 逐行执行,分析过变量声明,函数声明,这里就不用管了,只管赋值(变量赋值)
当执行到“var a = 100;”的时候,a赋了一次值,值改变为100
GO =
a : 100,
b : undefined,
c : undefined,
fun : function fun()
所以代码的执行结果是:
局部对象(AO对象)--函数执行时
函数执行时
创建AO对象 activation object
找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
将实参和形参统一
在函数体里面找到函数声明,值赋予函数体
function test()
console.log(b);
if(a) //undefined转换成false
var b = 100;
c = 123;
console.log(c);
var a;
test();
a = 20;
test();
console.log(c);
执行过程:
生成GO
GO =
变量声明
GO =
a : undefined
函数声明
GO =
a : undefined,
test : function
逐行执行;
test调用,生成test.AO =
参数 没有,跳过
变量声明
test.AO =
b : undefined
函数声明 没有,跳过
得到结果
test.AO =
b : undefined
逐行执行
改变GO
GO =
a : undefined,
test : function,
c : 123
a值发生改变
GO =
a : 20,
test : function,
c : 123
test调用 生成test.AO=
参数 没有 跳过
变量声明
test.AO =
b : undefined
函数声明 没有
结果
test.AO =
b : undefined
逐行执行
test.AO =
b : undefined
j执行结果
注意:
预编译阶段发生变量声明和函数声明,没有初始化行为(赋值),匿名函数不参与预编译 ; 只有在解释执行阶段才会进行变量初始化 ;
预编译(函数执行前)
- 创建AO对象(Active Object)
- 查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined
- 实参形参相统一,实参值赋给形参
- 查找函数声明,函数名作为AO对象的属性,值为函数引用
预编译(脚本代码块script执行前)
- 查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined
- 查找函数声明,函数名作为全局对象的属性,值为函数引用
预编译小结
预编译两个小规则
函数声明整体提升-(具体点说,无论函数调用和声明的位置是前是后,系统总会把函数声明移到调用前面)
变量 声明提升-(具体点说,无论变量调用和声明的位置是前是后,系统总会把声明移到调用前,注意仅仅只是声明,所以值是undefined)
预编译前奏
imply global 即任何变量,如果未经声明就赋值,则此变量就位全局变量所有。(全局域就是Window)
一切声明的全局变量,全是window的属性; var a = 12;等同于Window.a = 12;
函数预编译发生在函数执行前一刻。
教你读懂vue源码技术教程(代码片段)
由于Vue的源码采用ES6,所以你至少应该掌握ES6才能看得懂,其次你最好对 package.json 中的字段的作用有所了解。由于Vue使用 Rollup 构建,所以你不了解 Rollup 的话,你就看不懂Vue的构建配置,最后Vue采用 ... 查看详情
教你读懂redmine中的甘特图
Redmine是用Ruby开发的基于web的项目管理软件,他可以自动绘制甘特图,对于我们了解项目进度有很重要的帮助。但很多新人小白在使用redmine时,就是当成一个简单的备忘录来使用,对于甘特图神马的根本就不care,那么如何正确... 查看详情
javascript预编译(代码片段)
预编译分为两种:函数预编译(函数执行的前一刻执行)全局预编译(页面加载完成时执行)函数执行编译步骤:创建ActivationObject找形参和变量声明,将变量声明和形参作为AO的属性名,值为undefined将实参和形参值统一在函数体内找函... 查看详情
javascript预编译(代码片段)
预编译分为两种:函数预编译(函数执行的前一刻执行)全局预编译(页面加载完成时执行)函数执行编译步骤:创建ActivationObject找形参和变量声明,将变量声明和形参作为AO的属性名,值为undefined将实参和形参值统一在函数体内找函... 查看详情
[实践篇]13.12教你读懂qnx座舱方案里的高频术语
【QNXHypervisor2.2用户手册】目录(完结) 理解术语最大的好处能够将自己脑海里的系统架构重塑的更加清晰,当问题出现时,能够更具有逻辑性的去看问题,这样看问题的角度足够宏观和合理。BEBackend,常指QNX侧服务;FEFrontend... 查看详情
[实践篇]13.12教你读懂qnx座舱方案里的高频术语
【QNXHypervisor2.2用户手册】目录(完结) 理解术语最大的好处能够将自己脑海里的系统架构重塑的更加清晰,当问题出现时,能够更具有逻辑性的去看问题,这样看问题的角度足够宏观和合理。BEBackend,常指QNX侧服务;FEFrontend... 查看详情
5分钟学会使用less预编译器
5分钟学会使用Less预编译器Less是什么?LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法为CSS赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。Less编译器:笔者推荐K... 查看详情
3分钟让你读懂什么是adesk桌面云
首先,我们要知道aDesk桌面云就是将本地电脑的桌面操作系统集中于后端服务器上运行,在网络可达的情况下,通过虚拟交付协议将远端“操作系统”快速推送给“客户机”,而用户可使用任何类型的客户机(包括PC、瘦客户机... 查看详情
javascript的预编译和执行
JavaScript引擎,不是逐条解释执行javascript代码,而是按照代码块一段段解释执行。所谓代码块就是使用<script>标签分隔的代码段。整个代码块共有两个阶段,预编译阶段和执行阶段一、编译阶段对于常见编译型语言(例... 查看详情
5分钟教你学会javascript正则表达式
...一定数量文本的模式,用来匹配相同规范样式的文本。在JavaScript中用RegExp对象表示正则表达式(即RegularEexpression),它是对字符串执行模式匹配的强大工具。我们可以参看W3 查看详情
js执行顺序预编译
...sole.log(a);//1预解析函数f();//1functionf(){console.log(1);};详细:javascript变量声明提升(hoisting)分块执行代码js是按块执行代码的,所谓代码块就是使用<script> 查看详情
五分钟带你读懂uml类图
参考技术A目录先看下面这张类图,包括了UML类图的基本图示法 1、类的表示 2、接口的表示3、继承关系4、实现接口5、关联关系6、聚合关系7、合成(组合)关系8、依赖关系先看下面这张类图,包括了UML类图的基本图示法... 查看详情
个人对javascript预编译的理解
什么是js的预编译马上要找工作了,之前学习JS都是很基础的皮毛,作为当前最火热的语言,本人一定是要研究的,然而刚接触到预编译我就快疯了,对于一个脑子不好使的人来说真的太绕了,饶了好久也不知道有没有绕明白,... 查看详情
浅谈javascript预编译原理
这两天又把js的基础重新复习了一下,很多不懂得还是得回归基础,大家都知道js是解释性语言,就是编译一行执行一行,但是在执行的之前,系统会做一些工作:1,语法分析;2,预编译;3,解释执行。语法分析很简单,就是引擎... 查看详情
面试自我感觉良好,隔天却收到拒信?一文教你读懂面试官的“暗示”!
在很多职场八卦圈中,我们常常会看到这种情况:某月1日:“今天我去xxx公司面试了,准备充分,全程愉快,坐等入职。”某月21日:“不能忍!xxx公司HR玩我,不要我就直说啊,一直拖着... 查看详情
十分钟读懂javascript原型和原型链
...丁文的词proto,意谓“最初的”,意义是形式或模型。在JavaScript中,原型的探索也有很多有趣的地方,接下来跟随我的脚步去看看吧。原型对象释义每一个构造函数都有一个与之相关联的对象,该对象称之为原型对象。每个实例... 查看详情
js中的预编译(词法分析)阶段和执行阶段
javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块为范围<script></script>,即每遇到一个... 查看详情
第112天:javascript中函数预解析和执行阶段
关于javascript中的函数: 1、预解析:把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前 2、执行:从上到下执行,但有例外(setTimeout,setInterval,ajax中的回调函数,事件中的函数需要触发执行)函数的... 查看详情