如果一个页面中有多个script代码段,那么是javascript是如何执行得?

发表于:
来源:阿酷技术学习
作者:simplefastbest

先来看一段代码:

<script type="text/javascript">  
    function  dodo(argument) {
        console.log('do')
    }
</script>  
<script type="text/javascript">
     dodo();//do
</script>
<script>var a=12;console.log(a)</script>//12
<script>console.log(a)</script> //12

换个位置:

<script type="text/javascript">
     dodo();//Uncaught ReferenceError: dodo is not defined
</script>
<script type="text/javascript">  
    function  dodo() {
        console.log('do')
    }
</script>  
<script>console.log(a)</script> // Uncaught ReferenceError: a is not defined
<script>var a=12;console.log(a)</script>//12

为什么换位置以后,就不能正常执行了呢?

JavaScript解释器在执行脚本时,是按块来执行的。通俗地说,就是浏览器在解析HTML文档流时,如果遇到一个<script>标签,则JavaScript解释器会等到这个代码块都加载完后,先对代码块进行预编译,然后再执行。执行完毕后,浏览器会继续解析下面的HTML文档流,同时JavaScript解释器也准备好处理下一个代码块。

由于JavaScript是按块执行的,所以如果在一个JavaScript块中调用后面块中声明的变量或函数就会提示语法错误。第一端代码就是这情况。

虽然说,JavaScript是按块执行的,但是不同块都属于同一个全局作用域,也就是说,块之间的变量和函数是可以共享的。 这也是第二段代码为什么可以访问前一个块里的a的原因。

script代码块的执行顺序是:

  • step 1. 读入第一个代码块。
  • step 2. 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到step5。
  • step 3. 对var变量和function定义做“预编译处理”(永远不会报错的,因为只解析正确的声明)。
  • step 4. 执行代码段,有错则报错(比如变量未定义)。
  • step 5. 如果还有下一个代码段,则读入下一个代码段,重复step2。
  • step6. 结束。