每天一个前端小技巧（二）：预编译过程（面试常见判断输出值）

预编译

作用域的创建阶段，就是预编译阶段，在预编译时，主要做了以下事情

1.创建AO对象（js变量对象，提供给js引擎自己去访问的对象）

2.找到形参和变量的声明，作为AO对象的属性名，值为undefined

3.实参和形参相统一

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

具体案例如下：

分别判断以下值的输出为多少

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)

分析过程

AO: {
	a: undefined 1 function a(){}
	c: undefined 2 function c(){}
	d: undefined
	b: undefined
}

通过以上方式我们可以知道具体的输出值了

function fn(a, c) {
            console.log(a) // 本来a传进来的值为1，但是函数声明会覆盖变量的声明，所以这里的a值为function a(){}
            var a = 123
            console.log(a) // a为123 因为被重新赋值为123
            console.log(c) // 本来c传进来的值为2，但是函数声明会覆盖变量的声明，所以这里的c值为function c(){}
            function a() {}
            if (false) { // 不会进入到这个判断
                var d = 678
            }
            console.log(d) // d为undefined
            console.log(b) // b为undefined
            var b = function() {}
            console.log(b) // function(){}
            function c() {}
            console.log(c) // function c(){}
        }

        fn(1, 2)

以上就是预编译的案例分析啦，小伙伴们可以多找题试试