js代码的执行顺序

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

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

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

1、代码块

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

JS是按照代码块来进行编译和执行的,代码块间相互独立,但变量和方法共享。什么意思呢? 举个例子,你就明白了:
<script type="text/javascript">
      alert(str);//因为没有定义str,所以浏览器会出错,下面的不能运行
      alert("我是代码块一");//没有运行到这里
      var test = "我是代码块一变量";
</script>
<script type="text/javascript">
      alert("我是代码块二"); //这里有运行到
      alert(test); //弹出"我是代码块一变量"
</script>

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

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

JS中的函数定义分为两种:声明式函数与赋值式函数。
<script type="text/javascript">
     function Fn(){ //声明式函数
             
     }
         
     var Fn = function{  //赋值式函数
             
     }
</script>
声明式函数与赋值式函数的区别在于:在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码。

3、预编译期与执行期

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

注意,当我们仅仅定义了函数,而未调用时,函数只是被声明而已,并不执行,比如以下代码:
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>

</pre><div>由于并未调用loadEvent函数,网页上并无弹出的效果,只有当我们调用了函数,比如:</div><div><pre class="html" name="code"><body οnlοad="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
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript 代码执行顺序可以分为以下几个阶段: 1. 解析阶段:JavaScript 引擎会先对代码进行解析,生成执行上下文和变量环境。 2. 创建阶段:在执行代码之前,JavaScript 引擎会先创建变量和函数的声明,这个过程叫做变量提升。 3. 执行阶段:JavaScript 引擎会按照代码书写的顺序执行代码,包括赋值操作、函数调用和表达式计算等。 下面是五道面试题以及讲解: 1. ```javascript console.log(a); var a = 1; ``` 输出结果是 `undefined`。 原因是变量 `a` 在执行之前会进行变量提升,在执行时相当于: ```javascript var a; console.log(a); a = 1; ``` 所以 `console.log(a)` 输出的是 `undefined`。 2. ```javascript var a = 1; function test() { console.log(a); var a = 2; } test(); ``` 输出结果是 `undefined`。 原因是在函数 `test` 内部,变量 `a` 发生了变量提升,在执行时相当于: ```javascript function test() { var a; console.log(a); a = 2; } ``` 所以 `console.log(a)` 输出的是 `undefined`。 3. ```javascript console.log(typeof x); ``` 输出结果是 `undefined`。 原因是变量 `x` 没有声明,所以在执行时会抛出错误,但是由于使用了 `typeof` 运算符,所以不会抛出错误,而是返回 `undefined`。 4. ```javascript var a = 1; function test() { a = 2; console.log(a); var a = 3; } test(); console.log(a); ``` 输出结果是 `2` 和 `1`。 原因是在函数 `test` 内部,变量 `a` 发生了变量提升,在执行时相当于: ```javascript function test() { var a; a = 2; console.log(a); a = 3; } ``` 所以 `console.log(a)` 输出的是 `2`,在函数外部的 `console.log(a)` 输出的是 `1`。 5. ```javascript var a = {}; var b = { key: 'b' }; var c = { key: 'c' }; a[b] = 123; a[c] = 456; console.log(a[b]); ``` 输出结果是 `456`。 原因是对象属性名在内部是通过字符串形式存储的,所以变量 `b` 和 `c` 在转换成字符串后是一样的,相当于: ```javascript a['[object Object]'] = 123; a['[object Object]'] = 456; ``` 所以 `console.log(a[b])` 输出的是 `456`。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值