欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript中声明提升的介绍(代码示例)

程序员文章站 2022-03-21 19:23:56
...

本篇文章给大家带来的内容是关于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中声明提升的介绍(代码示例)的详细内容,更多请关注其它相关文章!

相关标签: JavaScript