JavaScript之预编译

前言

前面我们在讲JavaScript的作用域时提到了预编译，今天我就介绍一下预编译。 学好一门语言我们一定要知道该语言的运行机制。所以说学习JavaScript也是一样的，首先我们要知道JavaScript运行的三个阶段，分别是语法分析、预编译、解释执行。这篇文章主要给大家介绍一下JavaScript的预编译。

1、预编译前奏

• 暗示全局变量

  任何变量，如果变量未经声明就赋值，此变量就为全局对象所有。这也是我们在前面的JavaScript作用域中提到过。

  eg: a = 123;

  上面的变量a 未经声明就赋值了，所有变量a是全局对象所有。

• 一切声明的全局变量，全是window的属性

  eg:var a = 123; ===> window.a = 123

  变量a是全局变量，所以也是window对象的属性。

2、预编译

预编译四部曲

第一步：创建AO对象

第二步：找形参和变量声明，将变量和形参名作为AO属性名，值为undefined

第三步 将实参值和形参统一

第四步 在函数体里面找函数声明，值赋予函数体

结下来我们通过代码来分析

    function fn(a){
        var a = 123;
        function a(){}
        var b = function(){}
        function d(){}
        return {
            a,
            b
        }
    }
    fn(1);

我们来分析一下上面的代码，根据前面说的预编译的四部曲

第一步创建AO对象

    var AO = {}

第二步找形参和变量声明，将变量和形参名作为AO属性名，值为undefined

    var AO = {
        a: undefined,
        b: undefined
    }

第三步将实参值和形参统一

    var AO = {
        a: 123,
        b: function(){}
    }

第四步在函数体里面找函数声明，值赋予函数体

    var AO = {
        a: 123,
        b: function(){},
        d: function(){}
    }

注意：这里有个小小的知识点，大家一定要知道函数声明和函数表达式的区别。上面的代码中

   function fn(a){
        var a = 123;
        function a(){} //函数声明
        var b = function(){} //函数表达式，匿名函数
        function d(){} //函数声明
        return {
            a,
            b
        }
    }

大家仔细看一下，其实很容易理解，函数表达式， var b = function(){} 将一个函数赋值给了一个变量构成了一个表达式，顾名思义这种就是函数表达式。那剩下的一种就是函数声明了。

最后我们在回过头分析一下预编完四部曲完成之后生成的AOd对象

    var AO = {
        a: 123,
        b: function(){},
        d: function(){}
    }

当我们执行函数fn时，如果我们要获取a、b、d的值的时候，其实就是从预编译结束之后的AO对象里取值了。