博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js变量提升与函数提升的机制
阅读量:6268 次
发布时间:2019-06-22

本文共 845 字,大约阅读时间需要 2 分钟。

问题

clipboard.png

在这个例子中它应该输出什么?输出的结果是6。

clipboard.png

这个例子中它又该输出什么?输出的结果是a(),也就是输出了函数指针a。

这虽然是个变量和函数提升的问题,但是这两者到底是怎么提升的?

js是怎么创建变量的

var a=1;var b=2;

这是不是声明了变量就立马接着给声明的变量赋值了?

js解析这个代码时,它实际上是按照如下方式解析的

var a;var b;a=1;b=2;

也就是js会先把所有变量都声明好了之后,然后才进行赋值,并不是声明一个变量就赋值,再声明一个再赋值。js所谓变量提升,提升就是为了事先声明变量。

clipboard.png

上图中左边的例子,js解析时候是按照按照右边的代码解析的。js会把所有变量都集中提升到作用域顶部事先声明好,但是它赋值就就并不是像变量声明那样集中着一个个挨着赋值。原本书写赋值时写在哪里,那么js解析运行到那一行之后才会进行赋值,还没有运行到的就不会事先赋值。也就是变量会事先声明,但是变量不会事先赋值。

函数和变量都提升时,谁提到前面谁提到后面

在作用域中,不管变量和函数写在什么位置,所有变量会被整体提升到作用域顶部,所有函数也会被整体提升到作用域顶部,但是函数整体在变量整体的后面。

clipboard.png

从这个例子中可以看到,变量和函数都整体提升后,函数整体在变量的后面。变量提升之后,但其赋值还是留在原本的位置等js运行到了之后动态赋值,而函数提升之后直接相当于在代码里抽空了。

clipboard.png

在这个更复杂一点的例子中,变量和函数提升后,js实际上就把它转变为了右边的代码在运行。

搞明白这个例子也就搞懂了作用域中变量和函数是怎么提升的。

结语

回到开头的两个问题

clipboard.png

它们各自被js转换后如上

clipboard.png

一个思考题,这个例子该输出什么?

“提升”的本质就是为了事先声明变量和函数,当然函数只有声明式函数才会被提升,字面量函数不会被提升。这种提升就是存在于作用域中,包括全局作用域、函数作用域(闭包形成的作用域也是个函数作用域),总之都是在作用域中声明变量和函数时,会提升到作用域顶部,进行事先声明。

转载地址:http://ryvpa.baihongyu.com/

你可能感兴趣的文章
Cocos2D-x设计模式发掘之中的一个:单例模式
查看>>
很强大的HTML+CSS+JS面试题(附带答案)
查看>>
用树莓派实现RGB LED的颜色控制——C语言版本号
查看>>
VC2012编译CEF3-转
查看>>
java 自己定义异常,记录日志简单说明!留着以后真接复制
查看>>
Android 使用AIDL实现进程间的通信
查看>>
机器学习(Machine Learning)&深度学习(Deep Learning)资料
查看>>
jquery的图片轮播 模板类型
查看>>
C# 获取文件名及扩展名
查看>>
Web安全学习计划
查看>>
输出有序数组的连续序列范围
查看>>
zinnia项目功能分析
查看>>
windows cmd for paramiko
查看>>
SQL经典面试题集锦
查看>>
View学习(一)-DecorView,measureSpec与LayoutParams
查看>>
色彩力量!21款你应该知道的优秀品牌设计
查看>>
SDUT 3503 有两个正整数,求N!的K进制的位数
查看>>
【.Net】C# 根据绝对路径获取 带后缀文件名、后缀名、文件名、不带文件名的文件路径...
查看>>
Redis常用命令速查 <第二篇>
查看>>
CSS规范
查看>>