html中引入外部script顺序问题

问题描述：

第一个是测试用的html
图片说明
第二个是快排

，第三个是各种辅助函数，专门写到sortTestHelper.js里面的了

关于上面这几张张图（代码能跑）
我有个问题，书上说第一个script元素包含的代码解析完才会解析第二个，...
我的前面的各种排序方法都用到了后面的sortTestHelper.js里的方法（比如说swap()），
解释器在第一个script元素遇到swap()它都还没有解析到最后一个元素，它怎么知道swap()
方法是什么，它为什么不报错？

能描述一下解释和执行的这个流程大概是什么样的？（知识背景：我知道变量提升和函数提升）

答

js按照块来执行，即你说的第一个script元素包含的代码解析完才会解析第二个，但是不是完全各个块分离开的，它包含一个预编译阶段和执行阶段，
具体步骤如下（我在网上找的）
step 1. 读入第一个代码块。

step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。

step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。

step 4. 执行代码段，有错则报错（比如变量未定义）。

step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。

step6. 结束。

所以，你的代码执行顺序应该是，先读入这些标签包含的代码，做语法分析，并进行预编译，此时swap()已经声明，然后再执行swap()就不会报错啦。</p>

答

swap是事件函数中执行的吧，需要点击之类的事件才触发，此时你的sortTestHelper已经加载完毕了，当然不会报错

如果你是直接在mergesort里面调用了swap肯定会出错，应为就是按照书上说的先后顺序加载js的，会找不到swap函数


<script>
    document.onclick = function () { abc() }//事件中调用，触发onclick之前下面的script已经解析好存在abc了，点击执行匿名函数中的abc肯定不会错
    //注意click和下面这个代码顺序不能反，反了执行abc()报错就不会执行onclick事件的添加，点击document无响应
    abc();//出错，因为下面的脚本没解析到，没有abc函数你调用报错
</script>
<script>
    function abc() { alert('abc')}
</script>

html中引入外部script顺序问题

相关推荐