JavaScript在HTML中的执行顺序与运行机制

最新推荐文章于 2022-10-08 10:39:30 发布

Daniel799

最新推荐文章于 2022-10-08 10:39:30 发布

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/u012664198/article/details/53107466

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1.JavaScript在HTML中的执行顺序与HTML的加载顺序相同。
执行顺序参考如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsOrder</title>
    <script>
        function onLoadAlert() {
            alert("Last onload")
        }
    </script>
    <script>
        alert("first in head")
    </script>
</head>
<body onload="onLoadAlert()">
<script>
    alert("Second in body")
</script>
</body>
<script>
    alert("Third after body")
</script>
</html>

2.JavaScript在不同代码块之间的执行顺序与代码块的出现顺序一致。在不同的代码块之间，变量和方法共享。变量和方法使用的代码块，必须在申明的代码块之后。
如下代码，alert（str1）和fn1都不会执行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsOrder</title>
    <script>
        alert(str1)
        fn1()
    </script>
</head>
<body>
<script>
    var str1="hello."
    function fn1() {
        alert("This is Function 1.")
    }
</script>
</body>
</html>

3.JavaScript在代码块内部的执行顺序，是按照先预编译，后执行的顺序。预编译处理的是声明式函数和变量。在预编译时，只是声明，并未赋值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsOrder</title>
</head>
<body>
<script>
    var str1="Hello."
    fn1();   //Result：Hello.This is function 1.
    function fn1() {
        alert(str1+"This is function 1.")
    }

    fn2();  //Result: undefinedThis is function 2.
    var str2="Hi."
    function fn2() {
        alert(str2+"This is function 2.")
    }
</script>
</body>
</html>

虽然fn1（）在函数的申明之前，但是由于声明函数预编译，所以可以找到fn1（）函数，出现正确结果。
fn2（）出现undefined,是因为在编译过程中，并没有赋值。先执行fn2（），此时，str2并未赋值。

Daniel799

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript在HTML中的执行顺序与运行机制

1.JavaScript在HTML中的执行顺序与HTML的加载顺序相同。执行顺序参考如下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsOrder</title> <script> function onLoadAlert() {
复制链接

扫一扫

专栏目录