浅谈JavaScript 声明提升

这篇文章主要介绍了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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:SEO优化专员,转转请注明出处:https://www.chuangxiangniao.com/p/900712.html

(0)
上一篇 2025年1月4日 02:04:23
下一篇 2025年1月4日 02:05:02

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 对javascript网站渗透测试安全检测漏洞方法

    最近渗透测试工作比较多没有空闲的时间来写文章,今天由我们Sine安全的渗透主管来普及一下javascript的安全测试基础,很多客户想要了解具体js的调用漏洞或提交playload的过程以及是如何拿到最高权限和绕过登录等等执行命令漏洞之类的…

    2025年1月4日
    100
  • 国内三款知名java商城系统浅析:shop++、shopnc、javashop

    在众多商家决定搭建一个独立的网上商城系统时,就开始苦恼,市面上这么多商城系统到底该选哪一个才好呢?我们又如何选到靠谱又实用的商城系统呢? 最近我也在了解商城系统的应用程序,市面上的商城系统颇为混杂,以下是本人针对国内三款知名java商城系统…

    建站经验 2025年1月4日
    100
  • 渗透测试对Java架构网站漏洞检测方法

    近期对平台安全渗透测试中遇到有JAVA+mysql架构的网站,针对此架构我们Sine安全渗透工程师整理了下具体的漏洞检测方法和防护修复方法,很多像执行框架漏洞获取到系统权限,以及跨权限写入木马后门等等操作,希望大家在渗透测试的道路中发现更多…

    2025年1月4日
    100
  • java教程:java基础教程带你入门

    Java作为一种面向对象的编辑语言一直在世界编程语言排行榜中稳居第一名。因此想要成为一名优秀的互联网工作者,java的应用学习是基本,零基础或基础薄弱的人下边这套java教程会让你迅速入门。 java教程的基础教程首先是java的简介,在第…

    编程技术 2025年1月4日
    100
  • js实现特别简单的钟表效果

    这篇文章主要为大家详细介绍了js实现特别简单的钟表效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了js实现钟表效果的具体代码,供大家参考,具体内容如下                *…

    2025年1月4日
    100
  • JavaScript 如何计算文本的行数的实现

    这篇文章主要介绍了JavaScript 如何计算文本的行数的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 需求:根据行数决定是否限制展开和收起。 思路:用2个块统…

    2025年1月4日
    100
  • JavaScript实现串行请求的示例代码

    这篇文章主要介绍了JavaScript实现串行请求的示例代码,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下 使用async和await var fn = async function(promiseArr) { fo…

    编程技术 2025年1月4日
    200
  • JavaScript正则表达式匹配字符串字面量

    第一次遇到这个问题, 是大概两年前写代码高亮, 从当时的解决方案到现在一共有三代, 嘎嘎. 觉得还是算越来越好的. 第一代: //那个时候自己正则还不算很精通, 也没有(?:…)这种习惯, 是以寻找结束引号为入口写出的这个正则.…

    编程技术 2025年1月4日
    200
  • AJAX实现数据的增删改查操作详解java后台

    这篇文章主要介绍了AJAX实现数据的增删改查操作,结合实例形式详细分析了ajax结合java后台实现数据库增删改查相关操作技巧,需要的朋友可以参考下 本文实例讲述了AJAX实现数据的增删改查操作。分享给大家供大家参考,具体如下: 主页:in…

    2025年1月4日
    200
  • js+canvas实现画板功能

    这篇文章主要为大家详细介绍了js+canvas实现画板功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了js+canvas实现画板功能的具体代码,供大家参考,具体内容如下 1.实现了画图…

    编程技术 2025年1月4日
    200

发表回复

登录后才能评论

联系我们

156-6553-5169

在线咨询: QQ交谈

邮件:253000106@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

联系微信