关于JS预编译小结

关于JS预编译过程理解。

看一到常见面试题，请问下面输出的值是多少？

        function fn(a, c) {
            console.log(a) 
            var a = 123 
            console.log(a)
            console.log(c) 
            function a() { }
            if (false) {
                var d = 678
            }
            console.log(d) 
            console.log(b) 
            var b = function () { }
            console.log(b) 
            function c() { }
            console.log(c) 
        }
        fn(1,2)

正确答案：

        function fn(a, c) {
            console.log(a) //function a() { }
            var a = 123 
            console.log(a) //123
            console.log(c) //function c() { }
            function a() { }
            if (false) {
                var d = 678
            }
            console.log(d) // undefined
            console.log(b) // undefined
            var b = function () { }
            console.log(b) //function () { }
            function c() { }
            console.log(c) //  function c() { }
        }
        fn(1,2)

不知道各位有没有答对呢？接下来看一下JS在预编译阶段都做了些啥，你就能理解为啥是这些输出了！

1. js会创建ao对象（供js引擎自己去访问的）

2. 找到形参和变量的申明并且会赋值undefined

3. 实参和形参相统一

4. 找函数声明 会覆盖变量的声明

接下来我们看一下这个函数作用域生成的ao对象的过程

//js创建ao对象
ao {

}
//找到形参和变量的申明
ao {
  a ：undefined
  c : undefined
  d : undefined
  b : undefined
}
//实参和形参相统一
ao {
  a ：1
  c :   2
  d : undefined
  b : undefined
}
//找函数声明 会覆盖变量的声明
ao {
  a ：function a() { }
  c :   function c() { }
  d : undefined
  b : undefined
}

到此为止预编译阶段结束，之后js会逐行解释执行。