js执行顺序详解

最新推荐文章于 2024-07-14 14:30:57 发布

guoxu_guoxu

最新推荐文章于 2024-07-14 14:30:57 发布

阅读量634

点赞数

分类专栏： js

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

`转载：点击打开链接`

`1.函数的声明与调用`

JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种，浏览器对于不同的方式有不同的解析顺序。

//定义式函数定义

function Fn1(){
alert("hello");
}

//赋值式函数定义
var Fn1 = function(){
alert("hello");
}

页面加载过程中，浏览器会对页面上或载入的每个js代码块(或文件)进行扫描。如果遇到定义式函数，则进行预处理(类似于C等的编译)，处理完成之后再开始由上至下执行；遇到赋值式函数，则只是将函数赋给一个变量，不进行预处理，待调用到的时候才进行处理。下面举个简单的例子：

//定义式函数
Fn1();
function Fn1(){
alert("hello");
}

正常执行，弹出“hello”。浏览器对Fn1函数进行了预处理，再从Fn1();开始执行。

//赋值式函数
Fn1();
var Fn1 = function(){
alert("hello");
}

浏览器报错，Fn2 is not a function。浏览器未对Fn2进行预处理，依序执行，所以报错Fn2未定义。

2.代码块及js文件的处理。

“代码块”是指一对<script type=”text/javascript”></script>标签包裹着的js代码，文件就是指文件。

浏览器对每个块或文件进行独立的扫描，然后对全局的代码进行顺序执行。所以，在一个块（文件）中，函数可以在调用之后进行“定义式”声明。但在两个块中，定义函数所在的块必须在函数调用所在的块之前。

<script>
Fn1();
</script>
<script>
function Fn1(){
alert("hello");
}
</script>

//报错：Fn1 is not defined,两个代码块换下顺序就可以了。

3.重复定义函数会覆盖前面的定义

这和变量的重复定义是一样的

function Fn1(){
alert("1");
}
function Fn1(){
alert("2")
}
Fn1();

//弹出"2"

如果是这样呢：

Fn1();
function Fn1(){
alert("1");
}
function Fn1(){
alert("2");
}

//还是弹出2。原因在第一部分已经写过。

不在一个代码块内就不会被覆盖了。

4.body的onload函数与body内部函数的执行

body内部的函数会先于onload的函数执行：

<!doctype html>
<html>
<head>
<script type="text/javascript">
function fnLoad(){
alert("fnLoad");
}
</script>
</head>
<body οnlοad="fnLoad();">
<script>
alert("body");
</script>
</body>
</html>

//先弹出"body"，后弹出"fnLoad"

body的onload事件触发条件是body内容加载完成，而body中的js代码会在这一事件触发之前完成。(原因看第5部分)

guoxu_guoxu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js执行顺序详解

转载：点击打开链接1.函数的声明与调用JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种，浏览器对于不同的方式有不同的解析顺序。//定义式函数定义function Fn1(){alert("hello");}//赋值式函数定义var Fn1 = function(){alert("hello");}页面加载过程中，浏览器会对页面上或载入的
复制链接

扫一扫