前言

动人js一段时间，我认为事情仅仅是一个很肤浅的理解。是非常欠缺的。所以開始使用博客来对这一部分的知识做个慢慢的记录和积累。

相信积少成多，慢慢的将这一部分的知识攻克！

第一篇记录的不是相关的应用。而是非常底层的知识---JavaScript解析引擎。

想要了解这一部分的知识也是通过在项目中遇到的问题而联想到的。

问题的背景

在一段脚本中，运行的顺序是先将js文件里的alert()运行了一遍，然后当我详细调用到那个函数的时候再运行这个函数。当时看到就产生了一个疑问：运行函数之前为什么运行了alert()，非常明显他没有运行我定义的函数，却运行了alert();

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>js运行測试</title>

</head>

<script>

	var a ;

	a = 1;

	function f1(){ alert("第一个函数"); }

	alert("測试");

	function f2(){ alert("第二个函数"); }

	alert(a);

	function f3(){ alert("第三个函数"); }

</script>

<body>

	<div>

		<a herf="#" onclick="f1()">測试</a>

	</div>

</body>

</html>

运行结果是：測试   1

须要了解的前提

须要了解两个概念，一个是JavaScript解析引擎。另外一个是JavaScript解析引擎和浏览器的关系

1.JavaScript解析引擎

解释运行脚本的程序。

能够看成是一个解释器。

这个引擎须要完毕两个功能：

     一是解释脚本程序，将js代码读懂。

     二是运行脚本程序，将脚本程序读懂之后就要运行这个程序。

比方在一篇博客中看到的一个样例。当你写了 var a = 1 + 1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，而且将a的值变为2。

     看这个概念的时候还想起另外一个概念就是编译器，它仅仅是将源码编译成第二种代码（比方机器码。或者字节码）。就好象是一个翻译官，将中文翻译成英文。它不可以运行这段程序。

2.JavaScript解析引擎和浏览器的关系

JavaScript解析引擎是浏览器的组成部分之中的一个。

        当了解了前提之后我们知道，我们写的js代码是须要通过浏览器中的JavaScript解析引擎解析运行的，详细的解析机制大家能够google一下，我对这部分了解不深，仅仅知道了解各大概。但是我认为这些知识对于我了解其它的知识已经足够了。

       解析机制分为两个大过程，一个编译过程，另外一个是运行过程。编译过程终于是在内存中构建一个语法树。运行过程就是依照语法树来运行代码。对于编译和运行内部详细的运行我就不清楚了。

js代码在页面中的运行顺序

上面讲到的都是一些理论知识。以下就来看看我们在实际应用过程中会js代码在页面中的运行顺序。这些就是上面理论知识的一些非常形象的反应。

1. 引擎对js解析---预编译和运行顺序关系

它会在预编译期对全部声明的变量和函数进行处理。所以，就会出现当JavaScript解释器运行以下脚本时不会报错：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>js运行測试</title>

</head>

<script>

	alert(a);   //undefined

	var a ;

	a = 1;

	function f1(){ alert("第一个函数"); }

	alert("測试");  //測试

	function f2(){ alert("第二个函数"); }

	alert(a);  //1

	function f3(){ alert("第三个函数"); }

</script>

<body>

	<div>

		<a herf="#" onclick="f1()">測试</a>

	</div>

</body>

</html>

运行结果是： undefined   測试  1

预编译做的工作：将声明的变量和函数做处理。从而使其在运行期间对全部的代码都是可见的。

可是，你也会看到。运行上面代码。提示的值是 undefined，而不是1。

这是由于，变量初始化过程发生在运行期，而不是预编译期。

在运行期，JavaScript解释器是按着代码先后顺序进行解 析的，假设在前面代码行中没有为变量赋值。则JavaScript解释器会使用默认值undefined。由于在第二行中为变量a赋值了。所以在第三行代 码中会提示变量a的值为1，而不是undefined。

2. 文件流载入时---js依照HTML文档流顺序运行

js能够看成HTML文档的组成部分。

HTML文档是从上到下逐步解析的。不管是使用<script></script>块还是使用外部引用的js文件都是如此。

使用外部js文件引用，将上面的代码写到js文件里。运行结果不变

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>js运行測试</title>

</head>

<script type="text/javascript" src="Untitled-2.js"></script>

<body>

	<div>

		<a herf="#" onclick="f1()">測试</a>

	</div>

</body>

</html>

js文件

var a ;

a = 1;

function f1(){ alert("第一个函数"); }

alert("測试");

function f2(){ alert("第二个函数"); }

alert(a);

function f3(){ alert("第三个函数"); }

运行结果：測试  1

3. 文件流载入完毕之后---依照事件机制改变js运行顺序

类似于调用函数，在哪里调用到就在此处运行，假设没有调用到就不运行。从上面的代码中能够看到。为a标签加入了点击事件。所以当单击的时候会运行相应的函数

总结

所以能够解释为什么alert()运行了，而函数没有运行。js解析引擎要有一个预编译过程，对定义的变量和函数做处理。

同一时候js还要依据HTML文档流的顺序运行。

这就是运行我自定义的函数之前的过程，而我所以的运行自定义的函数事实上是事件机制调用js的一个体现。

版权声明：本文博客原创文章。博客，未经同意，不得转载。

JavaScript运行命令的更多相关文章

  1. Javascript调试命令

    Javascript调试命令——你只会Console.log() ? Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console).不同浏览器上它的工作方式是不一样的 ...

  2. [书籍翻译] 《JavaScript并发编程》 第二章 JavaScript运行模型

    本文是我翻译<JavaScript Concurrency>书籍的第二章 JavaScript运行模型,该书主要以Promises.Generator.Web workers等技术来讲解J ...

  3. window7系统怎么找到开始运行命令

    右击开始->属性->开始菜单->自定义>点击运行命令(选择)->确定

  4. 深入理解JavaScript运行机制

    深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...

  5. javascript运行机制

    太久没更新博客了,Javascript运行机制 Record it 1.代码块 JavaScript中的代码块是指由<script>标签分割的代码段.例如: <script type ...

  6. 初识NodeJS，一个基于GoogleV8引擎的Javascript运行环境

    思考 首先我们来思考一个问题:我们都知道几乎所有现代主流浏览器都全面支持了ECMAScript 5.1版标准,而JavaScript的标准是ECMAScript.那么我们就容易认为JavaScript ...

  7. javascript运行模式：并发模型 与Event Loop

    看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...

  8. 从setTimeout谈JavaScript运行机制

    从setTimeout说起 众所周知,JavaScript是单线程的编程,什么是单线程,就是说同一时间JavaScript只能执行一段代码,如果这段代码要执行很长时间,那么之后的代码只能尽情地等待它执 ...

  9. Sublime Text3 配置Node.js运行命令

    ­ 在Sublime Text中可以很容易配置新的编译运行命令,下面的截图是汉化版的中文菜单,英文菜单请直接对照. 首先需要在本地安装Node,默认的Node会加入到系统的环境变量,这样执行Node命 ...

随机推荐

  1. 远程centos改动yum源

    yum -y install unzip发现运行不了,说是找不到unzip的包,搜索发现时由于yum源的问题,那我就改动yum吧, 在网上找到的方法是这么说的: 1. cd /etc/yum.repo ...

  2. 消息队列（Message Queue）基本概念（转）

    背景 之前做日志收集模块时,用到flume.另外也有的方案,集成kafaka来提升系统可扩展性,其中涉及到消息队列当时自己并不清楚为什么要使用消息队列.而在我自己提出的原始日志采集方案中不适用消息队列 ...

  3. JavaScript类数组对象参考

    JavaScript和DOM中有很多类数组对象,它们有以下特点 1.有length属性 2.可以使用[]通过下标访问 3.部分类数组对象使用[]访问成员时不只可以使用下标,还可以使用id或name 4 ...

  4. C#属性总结

    1.私有字段和公有字段的比较 类中的私有字段只能在类的内部访问,而对类的公有字段的访问却不受限制. 在以前,为了封装,程序中会尽量少使用公有字段,因为使用公有字段的话,会让程序失去控制权.所以程序中会 ...

  5. 开源Office Word——DocX

    1.前言 请阅读前请看以下这位大神的文章 http://www.cnblogs.com/asxinyu/archive/2013/02/22/2921861.html 另附两个附件 1.DocX.DL ...

  6. 广东省-IT红黑榜排名公司名称

    红榜Top100 Order Company Name Point Change  1 百富计算机技术(深圳)有限公司  94.00 --  2 中国网通广州分公司  88.00 --  3 深圳市汇 ...

  7. 鸟书shell 学习笔记(一) shell专注于概念和命令

    变量   variableName=value 等号左右不能有空格 变量内容有空格须要用"或者'括起来,可是 v="hello $name" $保持原有功能,单引號则不行 ...

  8. 【数据结构&amp;&amp;等差数列】KMP简介和算法的实现（c++ &amp;&amp; java）

    KMP算法假定了解案件的原则,其实很easy. KMP算法简述 关于根据自己的理解在这里. KMP该算法由三个发明人的名称(Knuth.Morris.Pratt)的首字母组成,又称字符串查找算法. 个 ...

  9. BZOJ 3172([Tjoi2013]单词-后缀数组第一题+RMQ)

    3172: [Tjoi2013]单词 Time Limit: 10 Sec   Memory Limit: 512 MB Submit: 268   Solved: 145 [ Submit][ St ...

  10. php文件操作基本使用方法

    <?php /* $fp=fopen("tmp.html","r"); $str=fread($fp,filesize("tmp.html&qu ...