js函数执行顺序

js函数在执行过程:

1、首先对载入的js文件每个js代码块进行扫描,读入第一个代码块,进行语法扫描处理;

2、如果语法错误,则浏览器报错,该代码块不再进行扫描执行;如果有第二个代码块则进入第二个代码块进行相同的处理动作,依次递推,直至结束;

3、语法没有错,扫描代码中有没有需要做预编译处理的代码,如已定义的变量和定义是函数,有的话则进行预编译处理,处理完之后再进行至上而下的处理;遇到赋值函数时,不做预编译处理(必须先定义后引用),待到调用时再处理。(这一步不会出现报错的情况,因为浏览器只解析正确的声明)

代码理解:

<script type="text/javascript">
    Fn();  //因为是定义式函数,所以Fn() 会被浏览器首先提出来进行预编译处理,称为函数提升,然后再从上而下执行改代码块
    function Fn(){
        alert("代码块1:定义式函数")
    }  //弹出:定义式函数
</script>
<script type="text/javascript">
   var Fn()=function(){
        alert("代码块2:赋值式函数")
    }  //弹出:赋值式函数
    Fn(); //调用必须在赋值式函数后面,否则报错:Fn() is not a function
</script>

4、执行代码,有错报错。(比如变量未定义)

5、执行下一个代码块,回到第2步,重复执行。

6、直至代码结束。

js代码块直接的关系是相互独立的,但变量和方法是共享的。

代码理解:

关系是相互独立的:
<script type="text/javascript">       
alert(str);  //str未定义,浏览器报错,下面代码不执行
test = "我是代码块一变量";  //全局变量test
</script>
<script type="text/javascript">   
alert("我是代码块二");   //弹出"我是代码块二"
alert(test); //弹出 undefined
</script>
变量和方法是共享:
<script type="text/javascript">       
alert("我是代码块一"); 
test = "我是代码块一变量";  //全局变量test
</script>
<script type="text/javascript">   
alert("我是代码块二"); 
alert(test); //弹出"我是代码块一变量"
</script>



阅读更多

没有更多推荐了,返回首页