JavaScript中声明提升的实现方法

发布时间：2020-12-03 09:52:10 阅读：95 作者：小新栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章主要介绍了JavaScript中声明提升的实现方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

一、概述

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中声明提升的实现方法内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!

向AI问一下细节

猜你喜欢