HTML5学堂-码匠 HTML5学堂

您当前位于:高级JS、面向对象 ——> 原生JavaScript 代码的解析与运行(执行)机制

原生JavaScript 代码的解析与运行(执行)机制

2015/05/08 11:30:51 | 作者:HTML5学堂(码匠) | 分类:高级JS、面向对象 | 关键词:JS,解析,执行,运行机制

javascript解析机制 执行机制

HTML5学堂:在学习JavaScript过程中,我们需要了解事件的机制是怎么执行的?本文将会提到JavaScript事件机制的解析,希望对大家有帮助!

javascript解析的过程主要分为两个阶段,分别是编译与执行阶段。

在编译期,javascript解释器将完成对javascript代码的预处理,即将javascript代码转换为字节码。

在执行期,javascript解释器借助执行期环境将字节码生成机械码,并按照顺序执行,完成程序设计的任务。

HTML5学堂 javascript解析机制 执行机制

欢迎沟通交流~HTML5学堂

上图为编译器的基本构成以及工作流程。对于javascript语言,首先会通过词法分析和语法分析,并建立语法树,到此时,开始解释执行,即并不是完全生成字节码之后再调用虚拟机来执行编译好的字节码。

javascript的预编译对执行顺序有很大的影响:

在预编译期,javascript会对所有声明的变量和函数进行处理。因此在执行如下代码时并不会报错

  1. alert(a);
  2. var a = 1;
  3. alert(a);

在上面这段代码中,当js进行预编译时,会执行 var a;然后再进行执行,因此第一个是undefined,而第二个弹出的内容为1。 同理,看如下代码

  1. f();
  2. function f(){
  3.     alert(1);
  4. }

在上面这段代码中,当js进行预编译时,会执行 var a;然后再进行执行,因此第一个是undefined,而第二个弹出的内容为1。 同理,看如下代码

  1. f();
  2. var f=function (){
  3.     alert(1);
  4. }

会出现报错。这是因为,当将定义的函数作为值赋给变量f,在编译器时只能够将“声明变量f”进行处理,而对于f的值,只有到执行期时才能按照顺序进行赋值(自然会出现语法错误了,会提示无法找到对象f)

 

javascript的代码执行:

按照块执行javascript代码

浏览器解析HTML文档流时,如果遇到一个<script>标签,则js会等到这个代码块都加载完毕之后,先进行编译,然后再执行。执行完毕之后,才继续解析下面的HTML文档流。虽然javascript是按照块来执行的,但是不同的块(<script></script>)属于同一个全局作用域。换句话说,块之间的变量和函数是可以共享的。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS