JavaScript执行顺序详解-优快云博客

本文深入解析JavaScript执行顺序，包括同一块或文件内、多个代码块和文件中的处理方式，以及预处理与赋值函数的区别。

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

js 执行顺序：
1、同一个js块或js文件中的情况
JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种，浏览器对于不同的方式有不同的解析顺序。
页面加载过程中，浏览器会对页面上或载入的每个js代码块(或文件)进行扫描，如果遇到定义式函数，
则进行预处理(类似于C语言中的编译)，处理完成之后再开始由上至下执行；遇到赋值式函数，则只是将函数赋给一个变量，
不进行预处理，待调用到的时候才进行处理。
定义式函数：

<script type="text/javascript">
fn()
function fn(){
  alert('hello world!');
}
</script>

输出结果：正常执行，弹出“Hello World!”，浏览器对Fn进行了预处理，再从Fn();开始执行。
重复函数，后者会覆盖前者：

<script type="text/javascript">
fn()
function fn(){
  alert('hello world!');
}
fn()
function fn(){
  alert('test!');
}
</script>

正常执行，弹出的都是“test!”
赋值式函数：

<script type="text/javascript">
fn()
var fn = function(){
  alert('hello world!');
}
</script>

输出结果：会报错，因为赋值式函数不会被预处理。

再看，下面例子：

<script type="text/javascript">
fn()
var fn = function(){
  alert('hello world!');
}
fn()
function fn(){
	alert('test');
}
</script>

输出结果：先弹出“test”,再弹出“hello world!”

2、多个代码块和js文件中的处理
“代码块”是指一对<script></script>标签包裹着的js代码，文件就是指js文件
浏览器对每个块或文件进行独立的扫描，然后对全局的代码进行顺序执行。
所以，在一个块(文件)中，函数可以在调用之后进行“定义式”定义；
但在两个块中，定义函数所在的块必须在函数被调用的块之前。
如：

<script type="text/javascript"> 
fn(); 
</script> 
<script type="text/javascript"> 
function fn(){ 
alert("Hello World!"); 
} 
</script>

// 报错：Fn is notdefined，两个块换过来就对了

3、<head>部门的先于<body>里面的js执行