[JavaScript] JS的执行顺序

背景：

之前在做前端部分开发的时候经常会遇到，调用的变量或者函数报“未定义”等错误，很纳闷儿，命名在下方定义了的。也一直以为只要是在程序里定义了的变量或者函数，再在任何位置调用都没问题的想法，其实这些理解都是不对的，今天慢慢梳理一下JS的执行顺序吧，如果可能，可以研究一下JS内核处理。

 

内容：

1. JS函数：JS函数可以分为“赋值式”函数和“定义式”函数

    浏览器在处理JS的时候，先会对JS进行扫描，排除一些语法错误，比如少个括号了之类的，其次对“定义式”函数进行预处理（或叫预解析），最后从上往下依次执行。如果遇到代码块，也就是<script>包围起来的代码，会对每个代码块进行独立的扫描，再对全局代码进行顺序执行。

 

    步骤如下：

step1. 读入第一个代码段

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

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

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

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

step6. 结束

    实例如下：

//“定义式”函数定义 
Fn1(); 
function Fn1(){ 
alert("Hello World!"); 
} 

输出结果：Hello World!

 

//“赋值式”函数定义 
Fn2(); 
var Fn2 = function(){ 
alert("Hello wild!"); 
}

报错：Fn2 is not a function

 

2. 变量提升

 

JS中，函数和变量声明总是被解释器悄悄的“提升”到方法体的最顶部，并且，变量赋值并没有被提升而函数体会一同被提升，这也是体现了函数声明比变量声明拥有更高优先级。

例子如下：

以下两个函数是一回事：

function foo() {  
    if (false) {  
        var x = 1;  
    }  
    return;  
    var y = 1;  
}  
function foo() {  
    var x, y;  
    if (false) {  
        x = 1;  
    }  
    return;  
    y = 1;      
}  

 

一下是两种不同的函数声明方式在遇到变量提升时的区别：

function test() {  
    foo(); // TypeError "foo is not a function"  
    bar(); // "this will run!"  
    var foo = function () { // 变量指向函数表达式  
        alert("this won't run!");  
    }  
    function bar() { // 函数声明 函数名为bar  
        alert("this will run!");  
    }  
}  
test(); 

参考资料：

1. Javascript作用于与变量提升：http://blog.csdn.net/sunxing007/article/details/9034253#quote