JS代码执行顺序

我们的js代码运行在浏览器环境中，浏览器的js引擎解析执行代码的时候，会有执行顺序的问题。

一 函数的执行顺序

以下这种是最符合逻辑的：先声明函数，再执行声明过的函数：

 

<script>
	function test(){
		alert("test()函数执行了...");
	}
	test();
</script>

　　

上面的代码肯定是没有问题的，如果把声明放在执行前面呢？

 

<script>
	test();
	function test(){
		alert("test()函数执行了...");
	}
</script>

　　

运行上面的代码就知道，这样也是没问题的。是不是有点奇怪。实际上，javascript解析引擎并不是一行一行地执行代码，而是一段一段地执行代码。在同一段程序的分析执行中，定义式的函数语句会被优先执行（引自：https://segmentfault.com/a/1190000000660786）。这段解释说明了为什么会出现这样结果。

 

如果声明跟执行在两个<script>标签里面呢？先看第一种情况:

 

<script>
	function test(){
		alert("test()函数执行了...");
	}
</script>
<script>
	test();
</script>

　　

运行上面的代码就知道，这样也没问题。这也是我们在实际开发中，经常引入外部js文件，在本页面新的<script>标签里调用外部js中的函数。实例

 

<script src = "outer.js"></script>
<script>
	//调用引入的外部js中的函数 aaa();
	aaa();
</script>

　　

两个标签里的另一种情况：执行在前，声明在后，代码：

 

<script>
	test();
</script>
<script>
	function test(){
		alert("test()函数执行了...");
	}
</script>

　　

运行上面的代码就知道，函数并没有执行。因为页面上的<script>是按照顺序执行的。执行第一个<script>，这时候test（）函数的声明并没有被执行。所以，会报这样的错误：test is not defined

这也给我们提示，引入外部文件的时候要小心执行顺序的问题。如果调用在前，引入在后，会出现function is not defined的错误。

二.变量执行的问题

前面看到，同一个<script>标签里，函数的调用可以在函数声明之前。类似的，变量可不可以调用在前，申明在后呢.。例子1代码：

 

<script>
	alert(a);
	var a = 20;
</script>

　　

运行上面的程序，会弹出undefined。事实上，我们在使用变量a时，a变量被声明了（注意这个，），只是a还没有被赋值而出现的undefined。以上的代码的执行顺序等价于以下的代码：

 

<script>
	var a;
	alert(a);
    a= 20;
</script>

　　

理解了这些，下面这个经常被问的问题也就会回答了：

 

<script>
	var a = 1;
	function test(){
		alert(a);
		var a = 2;
   	}
	test() //弹出多少？
</script>

　　

这段代码运行的结果是什么呢？答案是undefined。因为函数里面的局部变量a覆盖了外面的全局变量a（js的变量就近原则）；而test()函数里面执行的就是例子1。所以，会弹出undefined。