JavaScript运行命令
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript运⾏命令
前⾔
动⼈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的⼀个体现。
版权声明：本⽂博客原创⽂章。
博客，未经同意，不得转载。