函数声明与变量声明的提升机制优先级问题

男娘i 2022-01-20 00:27 325阅读 0赞

博客地址：[提升机制][Link 1]

## 一次群里的讨论引发的思考 ##

问题：以下代码会输出什么？

var getName = function() {
      console.log(1)
    }
    function getName() {
      console.log(2)
    }
    getName()
    复制代码

开始我以为会是2，因为后面的代码会覆盖前面的，但是答案往往会偏离我们的想法ε=(´ο｀\*)))唉。看了群里的大神提了一句：**函数提升 优于变量**，开始思考提升机制。

## 函数提升优于变量提升 ##

这句话没毛病，红皮书111页说道：**解析器在向执行环境中加载数据时会率先读取函数声明，并使其在执行任何代码之前可用(可访问)，即函数声明提升**、JavaScript上卷中第40页提到**函数声明是优于变量提升的**。可见代码

console.log(getName)
    var getName = 1;
    function getName() {
      console.log(2)
    }
    复制代码

输出为函数getName

## 问题升级 ##

先来看代码：

/* 
    * 函数声明优于变量声明
    * 函数表达式会将变量提升，但是代码在执行的时候才会被赋值
    */
    test();
    console.log(test);
    function test() {
      console.log('我是函数');
    }
    console.log(test);
    var test = '我是变量';
    console.log(test);
    var test = function (params) {
      console.log('我是函数表达式');
    }
    console.log(test);
    test();
    复制代码

这次，我加入了函数表达式，结果如下：

解释：函数声明优于变量声明，所以第一个console.log(test)会输出函数test(),test()输出'我是函数'。而变量只有当代码执行到该语句的时候才会被赋值并且覆盖内存。所以第三个console.log(test)输出的是变量'我是变量'。最后函数表达式又覆盖了前面的代码，所以最后一个console.log(test)输出函数表达式test()，test()输出'我是函数表达式'。

## 再升一级 ##

这次，我把代码顺序调换一下

test();
    console.log(test);
    var test = '我是变量';
    console.log(test);
    var test = function (params) {
      console.log('我是函数表达式');
    }
    console.log(test);
    function test() {
      console.log('我是函数');
    }
    console.log(test);
    test();
    复制代码

结果如下：

这次我将函数声明放到了最下面，但是却没有最后一次执行test()输出的却是我是函数表达式。解释：函数在提升的时候解析器就已经解析过一遍了，代码执行到函数这里不会再次解析也就不会再次赋值。因此就不会出现覆盖前面代码这一说。

> 注意：不要学了一点就忘记别的了啊，如果两个函数名一样，后面的会覆盖前面的(认为是在函数解析的时候覆盖，即提升的时候就覆盖了)

console.log(test);
    function test() {
      console.log('我是函数');
    }
    console.log(test);
    function test() {
      console.log('我是函数表达式');
    }
    console.log(test);
    test();
    复制代码

结果：

望指正

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fblog.silviaxu.com%2F2019%2F03%2F11%2FJS%2Fpromote%2F