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的一个体现。
版权声明：本文博客原创文章。博客，未经同意，不得转载。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/117369.html原文链接：https://javaforall.cn
腾讯云开发者
