前端秃头党

关于JS预编译小结

2022-01-07  本文已影响0人  flyinskybiu

关于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会逐行解释执行。

上一篇 下一篇

猜你喜欢

热点阅读