浅谈JS变量声明和函数声明提升

2023年12月18日 159次阅读 来源: 前端攻城小牛

很多时候，在直觉上，我们都会认为JS代码在执行时都是自上而下一行一行执行的，但是实际上，有一种情况会导致这个假设是错误的。

a = 2;
var a;
console.log(a);

按照传统眼光，console.log(a)输出的应该是undefined，因为var a在a = 2之后。但是，输出的是2。

再看第二段代码：

console.log(a);
var a = 2;

有人会想到第一段代码，然后回答undefined。还有人会认为a在使用前未被声明，因此抛出ReferenceError异常。遗憾的是，结果是undefined。

为什么呢？

从编译器的角度看问题

JS在编译阶段，编译器的一部分工作就是找到所有声明，并用合适的作用域将他们关联起来。对于一般人来说var a = 2仅仅是一个声明，但是，JS编译器会将该段代码拆为两段，即：var a和a = 2。var a这个定义声明会在编译阶段执行，而a = 2这个赋值声明会在原地等待传统意义上的从上到下的执行。

所以，在编译器的角度来看，第一段代码实际上是这样的：

var a;  // 编译阶段执行
a = 2;
console.log(a);

所以，输出的是2。

类似的，第二个代码片段实际上是这样执行的：

var a;
console.log(a);
a = 2;

这样的话，很明显，输出的应该是undefined，因为只对a进行了定义声明，没有对a进行赋值声明。

从上面这两个例子可以看出，变量声明会从它们在代码中出现的位置被移动到当前作用域的最上方进行执行，这个过程叫做提升。

函数提升

下面，再来看一段代码

foo();

function foo () {
    console.log(a);
    var a = 2;
}
在这个例子中，输出undefined而不会报错，因为，函数变量也能提升。即，实际上像如下的情况运行。

function foo () {
    var a;
    console.log(a);
    a = 2;//欢迎加入全栈开发交流圈一起学习交流：864305860
}

foo();

说到这里，你是不是认为提升很简单，只要把变量都放到当前作用域最上方执行就好了？

下面，我来说一种意外情况：函数表达式的提升情况。

函数表达式的提升情况

foo();

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

你是不是想说，这个例子不是和之前的那个差不多吗？输出的当然是undefined呀。但是，结果是，不输出，因为JS报了TypeError错误！

因为，函数表达式不会进行提升！

该例子的实际运行情况是这样的：

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

由于执行时，在作用域中找得到foo（该作用域最上方声明了foo），所以不会报ReferenceError错误，但是，foo此时没有进行赋值（如果foo是一个函数声明而不是函数表达式，那么就会赋值），也就是说实际上foo()是对一个值为undefined的变量进行函数调用，所以，理所应当抛出TypeError异常。

值得一提的是，即使是具名的函数表达式，名称标识符在赋值之前也无法在所在作用域中使用，即：

foo();  // TypeError
bar();  // ReferenceError

var foo = function bar () {}

函数优先

函数声明和变量声明都会被提升，但是有一个值得注意的细节，那就是，函数会首先提升，然后才是变量！

看下面这一段代码：

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

这一段代码会输出1，原因就在于，函数优先。

这一段代码可以转换为以下形式：

function foo () {
    console.log(1);
}
var foo;    // 重复声明，被忽略
foo();      // 输出1
foo = function () {
    console.log(2);
}

如果，在代码的结尾再执行一次foo函数，此时，输出的是1。

function foo () {
    console.log(1);
}
var foo;    // 重复声明，被忽略
foo();      // 输出1
foo = function () {
    console.log(2);
}
foo();      // 输出2

因为，尽管重复的声明会被忽略了，但是后面的函数还是可以覆盖前面的函数。

明白了这个道理，你就可以理解下面这个问题了：

foo();
var a = true;
if (a) {
    function foo () {
        console.log("a");
    }
} else {
    function foo () {
        console.log("b");//欢迎加入全栈开发交流圈一起学习交流：864305860
    }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力

你猜这道题输出的结果是什么？是b！为什么？因为foo进行了两次的声明，但是，后一次函数覆盖了前一次的函数。所以调用foo时，永远调用的都是console.log(“b”)。

总结

1.所有声明（变量和函数）都会被移动到各自作用域的最顶端，这个过程被称为提升

2.函数表达式等各种赋值操作并不会被提升

3.函数优先原则

4.尽量避免产生提升问题

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

    原文作者：前端攻城小牛
    原文地址: https://www.jianshu.com/p/0968634075e3
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞