JS的一点问题——加载顺序

最新推荐文章于 2025-01-24 00:12:51 发布

码代马

最新推荐文章于 2025-01-24 00:12:51 发布

阅读量1.7k

点赞数 1

文章标签： JavaScript

本文探讨了JavaScript的加载顺序及预处理机制，详细解释了全局变量、DOM加载及事件处理的执行流程，以及变量和函数声明的提升现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于JavaScript的加载顺序以以下一段程序开始：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 测试js的加载顺序 -->
		<script>
			var a = "1234";
			$(function(){
				a = "Hello";
			})
			var b = a;
			var c = "";
			function thing() {
				c = a;
				document.writeln("a :" + a + "<br>");
				document.writeln("b :" + b + "<br>");
				document.writeln("c :" + c + "<br>");
			}	
		</script>
		<button type="button" onclick="thing()">点击打印</button>
	</body>
</html>

结果如下图：
在这里插入图片描述

在上述程序中，在JavaScript块中先执行全局变量，当DOM加载完后执行 a=“Hello”；，最后点击事件发生后执行thing()函数。

先处理后加载

在一个JavaScript文件或一个JavaScript代码块的内部，浏览器会先对代码进行预处理（编译），然后再执行。
预处理会跳过执行语句，只处理声明语句，同样也是按从上到下按顺序进行的。包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。即使声明是在调用的下方进行的，但浏览器仍然先声明再调用（执行），这个现象叫做“提升”。所以，即便一个函数的声明在下方，在前面仍然可以正常执行这个函数。
注意1：对于声明并赋值的语句，例如 var a = 1，在预处理阶段会把这句话拆成两句：