当前位置:首页 >  站长 >  编程技术 >  正文

浅谈JavaScript 声明提升

 2020-10-28 14:19  来源: 脚本之家   我来投稿 撤稿纠错

  【推荐】海外独服/站群服务器/高防

这篇文章主要介绍了JavaScript 声明提升的相关资料,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下

1 引例及基本原理

在学习JavaScript声明提升之前,我们先看下面这个例子:

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

运行结果会是什么?你可能会有以下的猜测:

1.报错ReferenceError: a is not defined;

2.打印2;

3.打印undefined。

正确的结果是第三种,打印undefined。

下面让我们来看看具体的原因。其实,对于var a=2;这条语句,JavaScript会将其视为两个声明:

定义声明var a,会在编译阶段进行;

赋值声明a=2,会留在原地等待执行阶段进行。

而所谓的声明提升:就是JavaScript会把var变量声明和函数声明都会被提升到各自作用域的顶部,而赋值操作并不会被提升。

因此,上面的例子实际是按照这样的流程来处理:

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

我们还需要知道,不仅仅是var变量声明会提升,函数声明同样也会提升,现在来看下面这个例子

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

这个例子的运行结果为:打印undefined。这段代码实际上会被理解为为下面的形式:

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

2 关于声明提升的常见问题

2.1 函数表达式

先看一个函数表达式的例子:

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

上面代码的运行结果为:打印undefined。实际上,变量标识符foo被提升了,但它的赋值操作并没有被提升,我们可以理解为下面的形式:

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

结论:函数声明会被提升,但函数表达式不会被提升。

2.2 声明的优先级

function a(){}
var a;
console.log(a);

var a;
function a(){}
console.log(a);

如果在同一个作用域内,存在同名的函数声明和var变量声明,那么会发生什么样的情况呢?我们同样再来看一个例子:

上面的两种写法,运行结果均为打印a(){}。也就是说,如果在同一个作用域内,存在同名的函数声明和var变量声明,则函数声明的优先级更高。

还有一种情况:如果同一个作用域内,存在多个同名的函数声明。这种情况下,后面声明的会覆盖前面声明的。

3 练习题

3.1 第一题

var getName;//与函数声明同名,故失效
function getName() {
 console.log(2);
}
getName = function() {//赋值
 console.log(1);
};
getName();

答案:打印1

解析:提升后的顺序如下

3.2 第二题

var a = 1;
function b(){
 a = 10;
 return;
 function a(){
  console.log(a);
 }
}
b();
console.log(a);

答案:打印1

解析:首先,我们需要梳理清楚声明的提升。

本题有几个关键点,我们需要明白:

函数b内的a函数虽然在return之后,但它并没有失效,它会发生声明提升,从而提升到b函数作用域的顶部。

很多童鞋(比如我TAT)可能会错误地认为这题的答案是10,认为我们在最后调用了b函数,修改了全局变量a。实际上,由于函数a发生了声明提升,导致在函数b内“遮蔽”了全局作用域中的变量a,因此,a=10;其实是将函数a重新赋值。为了进一步测验,大家可以把a函数注释掉,会发现此时的答案就变成了10。

注:本题还涉及到了闭包的相关知识,这一题详细的解析请见参考资料[2],讲得非常详细。

var a;//全局变量a发生了声明提升
function b(){
 function a(){//函数a发生声明提升
   console.log(a);
  }
 a = 10;//因为函数a离它最近,因此赋值给函数a
 return;
}
a = 1;//赋值给了全局变量a
b();
console.log(a);

4 参考资料

[1] 《你不知道的JavaScript》

[2] js中变量名与函数名重名的问题,Charles_Tian

[3] 函数声明与变量声明的提升机制优先级问题,一个菜鸟的奋斗史

以上就是浅谈JavaScript 声明提升的详细内容,更多关于JavaScript 声明提升的资料请关注脚本之家其它相关文章!

来源:脚本之家

链接:https://www.jb51.net/article/195552.htm

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
javascript
java

相关文章

  • 参加Java培训班有用吗?这个问题大家要怎么看待

    在众多的编程培训中,Java软件开发作为老牌儿的编程主流,从发展前景上看,无论是现在还是将来,依然会持续火爆的状态。对于当下年轻人想要快速的掌握这项技术,进入到这个行业,最为热议的话题是“参加Java培训班有用吗”。小编可以肯定的回答,是有用的,学习的根据来自于兴趣,如果大家是真的热爱这行,在加上专

    标签:
    java
  • 动力节点南京Java培训口碑教学,满分教学就业体验

    江南佳地,邂逅金陵,动力节点南京Java培训校区,为长三角地带的发展注入专业Java教培力量,动力节点自09年成立至今,专注Java培训教学,一直秉承着“为学员服务”的唯一教育理念,坚持口碑教学,被业界称为“口口相传的Java培训黄埔军校”。

    标签:
    java
    java培训
  • 动力节点广州Java培训,为大家撑起一个IT的未来

    广州动力节点Java培训机构,一直以来专注Java的教学,深耕教育,稳扎稳打,在行业具有“口口相传的黄埔军校”之称,有句话说的好“没有量变的积累,哪来质变的飞跃”动力节点和你一起,扎扎实实做教育,你们扎扎实实学本领,时刻准备着,有朝一日,风自会来。

    标签:
    java
    在线培训
  • 动力节点成都Java培训招生源于口碑,业界巨头

    为了能够搭乘互联网的快车,实现人生的逆转,不少年轻人选择动力节点成都Java培训,动力节点作为Java职业培训,没有理由不去担起这份沉甸甸的信任,所以,自09年创立起,一直专注于Java的教学,将全部的资源

    标签:
    java
    培训机构
  • 参加动力节点北京Java培训会让学者更加有信心

    通过Java培训出来的同学与没参加过培训的同学差距还是有不少的,同学一直以来对参加培训都保持着犹豫的心态,其实大家了解后会发现,不管是对零基础还是有编程认知的同学来讲,参与更加密集、系统化的培训

    标签:
    java
    培训机构

热门排行

信息推荐