浅谈JavaScript 声明提升


Posted in Javascript onSeptember 14, 2020

1 引例及基本原理

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

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

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

1.报错ReferenceError: a is not defined;

2.打印2;

3.打印undefined。

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

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

  1. 定义声明var a,会在编译阶段进行;
  2. 赋值声明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 声明的优先级

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

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

上面的两种写法,运行结果均为打印a(){}。也就是说,如果在同一个作用域内,存在同名的函数声明和var变量声明,则函数声明的优先级更高。
还有一种情况:如果同一个作用域内,存在多个同名的函数声明。这种情况下,后面声明的会覆盖前面声明的。

3 练习题

3.1 第一题

var getName = function() {
 console.log(1);
}
function getName() {
 console.log(2);
}
getName();

答案:打印1

解析:提升后的顺序如下

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

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 声明提升的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery.validate使用攻略 第三部
Jul 01 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
vue实现搜索过滤效果
May 28 Javascript
layui使用label标签的方法
Sep 14 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 #Javascript
详解JavaScript 高阶函数
Sep 14 #Javascript
vue实现简单计算商品价格
Sep 14 #Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 #Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 #Javascript
swiper自定义分页器的样式
Sep 14 #Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 #Javascript
You might like
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
JS解析XML实例分析
2015/01/30 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
python获取多线程及子线程的返回值
2017/11/15 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
Python 复平面绘图实例
2019/11/21 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
python破解同事的压缩包密码
2020/10/14 Python
python 下载文件的多种方法汇总
2020/11/17 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
环保建议书300字
2014/05/14 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
2014年技术部工作总结
2014/12/12 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL