javascript的执行和预解析

  很久以前遇到过一个面试题目，的的确确是面试官问我的问题，下面是这个问题的代码部分。由于年少无知，没有回答上，被无情pass了。

var u ='hello world';
;(function(){
    alert(u);
    var u = 'bonjour la monde';
})();
//请问alert的结果是什么?.

  一开始毫不犹豫地想到 alert出来的是hello world; 面试官一脸无奈看着我，耸耸肩，我就大概知道被鄙视了。其实结果是undefined，但是一直没想通这样一个结果。后来才明白，JavaScript解析过程分为两个阶段，一个是预解析阶段，另外一个就是执行阶段。

  执行阶段我们应该都很明白是什么意思

var u = 'hello world';
alert(u);

   这段代码的结果是在浏览器中弹出出hello world不错，很简单，同样简单的还有下面的代码

alert(u);
var u = 'hello world';

  结果是undefinded。因为u是在alert之后初始化的。所以按照从上到下的执行顺序来说，这样的结果是我们能够接受的。那么下面的代码呢？

u();
function u() {
    alert('hello world');
}

  结果是alert弹出hello world；这是为什么呢？u()明显地是在function函数上面先调用的，为什么函数能够执行呢？

  其实在执行代码之前，浏览器会对js代码做预解析，解析的原则是这样的: 对该环境内用var声明变量进行提升到顶部的动作，并给它一个初始值undefined，同样，浏览器也会对function做提升动作，但是值是function返回的值，而不是undefined。并且按照命名唯一的原则，会将后声明的函数覆盖之前声明的同名函数上。如果你对上述说明不是很明白，我们可以换一种说法:浏览器在刷新的时候会悄悄地去执行。界面的js代码，不过它的执行方式是把所有在环境（window 或者 function）内声明的var 变了全部置顶并初始化为undefined。所以我们一开始面试官出题的代码在预解析之后可以等同于以下代码。

var u = 'hello world';
;(function(){}
    var u;//或者var u = undefined;
    alert(u);
    u = 'bonjour la monde';
})();

  有两个变量u，第一个是全局变量u，它是在window这个大环境内声明的，第二个是局部变量，它是在匿名函数function内声明的，因为匿名函数内包含着一个块级作用域，所以我们也可以说匿名函数内包含着一个不同于window的另一个环境。按照我们在上面提到的解析原则，在这个环境内的var变量都会提升到顶部，并且初始化为undefined，所以代码看起来就是上面的那个样子。而解析原则也会对函数提升，但是初始值不是undefined而是该函数本身，也就是说不会改变。那么下面两段代码可以说是同样的效果:

/解析前的函数
(function(){
    say();
    function say() {
        alert('hello world');
    }
});
//解析后的同效函数
(function(){
    var say = function() {
        alert('hello world');
    }
    say();
});

  解析原则还包括对同名函数的覆盖，下面两段代码可以说明解析前后的状态。

//预解析前
(function () {
    function say() {
        alert('hello world');
    }

    say()

    function say() {
        alert('bonjour la monde');
    }
})
//解析后的等效函数
(function(){
    var say = function() {
        alert('hello world')
    }
    var say = function() {
        alert('bonjour monde')
    }

    say();
});

  现在，相信你应该对js的预解析过程有清楚的了解了。需要注意的是，用var和函数命名(function someFun())的方式声明一个函数都没有问题，这取决与项目的需要或者代码的规范或者个人的喜好，但是遇到以上的问题比如用var声明，那么在此之前你是不能够调用它的,而用function name() 方式命名，在同一个环境或者作用域内，你可以在任何地方调用它。