JavaScript之声明提升

本文一共 600 字，读完只需 3 分钟

一、概述

JS 中，我们会理所当然地认为代码是一句一句地执行的，但并不完全正确。

singer = "周杰伦";
var singer; 
console.log(singer); // 周杰伦

sing();  // 故事的小黄花
function sing() {
    console.log("故事的小黄花");
}
复制代码

以上第一段代码，如果按照正常流程，后面的 var singer会重新把值默认声明为 undefined，但结果却是 '周杰伦'；

以上第二段代码，会理解成，先执行，后声明，就会报错，但结果却没有。

以上代码块其实是可以改写成这样的：

var singer = undefined;
singer = "周杰伦";
console.log(singer); // 周杰伦
 

function sing() {
    console.log("故事的小黄花");
}
sing();  // 故事的小黄花

复制代码

这是因为：

JS 定义声明会在编译阶段进行，赋值和其他操作则是在执行阶段进行。

所以，先有声明，再有赋值和执行，这就是变量和函数的声明提升。

二、函数声明优先于变量声明；

var foo = "bar";
function foo() {
    
}
typeOf(foo);  // string

var foo = "bar";
function foo() {
    
}
typeOf(foo);  // string
复制代码

无论函数声明放在变量声明前，还是后，变量声明都覆盖了函数声明。

三、每个域都会进行声明提升

以下代码会输出 10，是为什么呢？

var foo = 1;
function bar() {
    if (!foo) {
        var foo = 10;
    }
    alert(foo);
}
bar();
复制代码

因为:

每个域都会进行声明提升。

上面代码相当于：

var foo = 1;
function bar() {
    var foo = undefined;
    if (!foo) { // !foo === true
        var foo = 10;
    }
    alert(foo);
}
bar();
复制代码

四、函数表达式不会声明提升

首先，什么是函数表达式？

// 函数声明
function foo() {
    console.log("函数声明");
}

// 函数表达式
var foo = function() {
    console.log("函数表达式");
}
复制代码

函数表达式，不会声明提升，所以：

foo();  // Uncaught TypeError: foo is not a function

// 函数表达式
var foo = function() {
    console.log("函数表达式");
}
复制代码

总结

JavaScript 中存在一种声明提升的机制，有变量声明和函数声明。JS 引擎会在编译阶段查找每个作用域的声明，而赋值和运算则在执行时进行。

函数定义分为函数声明和函数表达式，其中，函数声明有声明提升，函数表达式则没有。

欢迎关注我的个人公众号“谢南波”，专注分享原创文章。

掘金专栏 JavaScript 系列文章

1. JavaScript之变量及作用域
2. JavaScript之声明提升
3. JavaScript之执行上下文
4. JavaScript之变量对象
5. JavaScript原型与原型链
6. JavaScript之作用域链
7. JavaScript之闭包
8. JavaScript之this
9. JavaScript之arguments
10. JavaScript之按值传递
11. JavaScript之例题中彻底理解this
12. JavaScript专题之模拟实现call和apply