JavaScript之声明提高

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

1、概述

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 定义声明会在编译阶段进行，赋值和其余操做则是在执行阶段进行。

因此，先有声明，再有赋值和执行，这就是变量和函数的声明提高。

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

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

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

不管函数声明放在变量声明前，仍是后，变量声明都覆盖了函数声明。

3、每一个域都会进行声明提高

如下代码会输出 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();
复制代码

4、函数表达式不会声明提高

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

// 函数声明
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