当函数声明遇到函数表达式时

web前端
0 42

csroad
csroad 举报
06月20日 21:24

那么当函数声明遇到函数表达式时,会有什么样的结果呢,先看下面这段代码:

复制代码

function hoistFunction() {
    foo(); // 2

    var foo = function() {
        console.log(1);
    };

    foo(); // 1

    function foo() {
        console.log(2);
    }

    foo(); // 1
}

hoistFunction();

复制代码

运行后我们会发现,输出的结果依次是2 1 1,为什么会有这样的结果呢?

因为JavaScript中的函数是一等公民,函数声明的优先级最高,会被提升至当前作用域最顶端,所以第一次调用时实际执行了下面定义的函数声明,然后第二次调用时,由于前面的函数表达式与之前的函数声明同名,故将其覆盖,以后的调用也将会打印同样的结果。上面的过程经过预编译之后,代码逻辑如下:

复制代码

// 预编译之后
function hoistFunction() {
    var foo;

    foo = function foo() {
        console.log(2);
    }

    foo(); // 2

    foo = function() {
        console.log(1);
    };

    foo(); // 1

    foo(); // 1
}

hoistFunction();

复制代码

我们也不难理解,下面的函数和变量重名时,会如何执行: