程序博客网 > 网络8888端口

js代码的执行顺序 2

来源：互联网发布：网络8888端口编辑：程序博客网时间：2024/06/07 05:43

文章内容由http://www.2cto.com/kf/201401/273825.html和http://www.cnblogs.com/rubylouvre/archive/2009/08/21/1551270.html内容整合而成

JavaScript是一种描述型脚本语言，它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制，或者简单地说，你不能掌握javascript的执行顺序，那你就犹如伯乐驾驭不了千里马，让千里马脱缰而出，四处乱窜。

那么JavaScript是怎么来进行解析的吗？它的执行顺序又是如何的呢？在了解这些之前，我们先来认识几个重要的术语：

1、代码块

[javascript] view plain copy

<script type="text/javascript">
alert("这是代码块一");
</script>
<script type="text/javascript">
alert("这是代码块二");
</script>

JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。什么意思呢? 举个例子，你就明白了：

[javascript] view plain copy

<script type="text/javascript">
alert(str);//因为没有定义str，所以浏览器会出错，下面的不能运行
alert("我是代码块一");//没有运行到这里
var test = "我是代码块一变量";
</script>
<script type="text/javascript">
alert("我是代码块二"); //这里有运行到
alert(test); //弹出"我是代码块一变量"
</script>

上面的代码中代码块一中运行报错，但不影响代码块二的执行，这就是代码块间的独立性，而代码块二中能调用到代码一中的变量，则是块间共享性。

2、声明式函数与赋值式函数

JS中的函数定义分为两种：声明式函数与赋值式函数。

[javascript] view plain copy

<script type="text/javascript">
function Fn(){ //声明式函数
}
var Fn = function{ //赋值式函数
}
</script>

声明式函数与赋值式函数的区别在于：在JS的预编译期，声明式函数将会先被提取出来，然后才按顺序执行js代码。

3、预编译期与执行期

事实上，JS的解析过程分为两个阶段：预编译期(预处理)与执行期。
预编译期JS会对本代码块中的所有声明的变量和函数进行处理（类似与C语言的编译），但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值（即只是分配了内存）。

[javascript] view plain copy

举个例子：

[javascript] view plain copy

<script type="text/javascript">
var a=100;
var b=true;
function test(){
alert(a);
alert(b);
b=false;
alert(b);
var a=200;
alert(a/2);
alert(++Math.PI);
alert(Math.PI++);
}
test();
</script>

这段代码执行后的效果就是首先弹出undefined、然后弹出true，接着再弹出其他，也就是说，第一行alert（a）执行时，a并未赋值，而b已被赋值为了true。这是为什么？涉及到两个知识点：

1、变量的作用域

2、js代码的执行顺序

首先，js要预编译，预编译的过程中，为每个变量分配了内存。

第二步，按照代码的顺序执行代码：

第一行，为全局变量a赋值

第二行为局部变量b赋值

第三行进入了函数test，则由于局部变量会在函数内部覆盖同名的全局变量,故此时的状态便是a未赋值，b的值为true

第四行，弹出a值，此时未赋值的a当然要弹出undefined啦。

注意，当我们仅仅定义了函数，而未调用时，函数只是被声明而已，并不执行，比如以下代码：

[html] view plain copy

function loadEvent(){
var a=5;
var b=10;
a=[a,b];
b=a[0];
a=a[1];
alert("a:"+a+",b:"+b);
}
</script>
</head>
<body >
<div id="divTest">
</div>
<button aa="aaa" click="noRepeat">delete</button >
</body>
</html>

[html] view plain copy

</pre><div>由于并未调用loadEvent函数，网页上并无弹出的效果，只有当我们调用了函数，比如：</div><div><pre class="html" name="code"><body onload="loadEvent()">
<div id="divTest">
</div>
<button aa="aaa" click="noRepeat">delete</button >
</body>

此时才会在浏览器上显示弹出效果。
现在，让我们来总结整理下：

step 1. 读入第一个代码块。

step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。

step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。

step 4. 执行代码段，有错则报错（比如变量未定义）。

step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。

step6. 结束。
而根据HTML文档流的执行顺序，需要在页面元素渲染前执行的js代码应该放在前面的<script>代码块中，而需要在页面元素加载完后的js放在元素后面，body标签的onload事件是在最后执行的。

0 0

网络8888端口

网络8888端口

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子摇篮孕育下载胎儿孕育过程平凡孕育伟大孕胴低是什么原因造成的氯胺胴胴的读音矢胴丸莉莎魔胴咖啡魔胴防弹咖啡胴怎么读魔胴胴骨汤做法魔胴防弹咖啡价格孕酮低原因左炔诺孕酮孕酮偏低孕酮是什么孕酮22 孕酮标准值怀孕孕酮低孕酮检查孕酮怎么测孕酮低症状孕酮的作用孕酮过低孕酮检测孕酮偏高孕酮大于40 孕酮指数孕酮20 怀孕孕酮血清孕酮孕酮值孕酮测定孕酮标准查孕酮孕酮怎么看孕妇孕酮低孕酮换算补孕酮孕酮怎么补