IT学习站-137zw.com

more +资源更新Forums

more +随机图赏Gallery

Zabbix 4.0 企业级自动化监控系统实战,完整版Zabbix 4.0 企业级自动化监控系统实战,完整版
Java程序员面试笔试真题与解析 完整pdf扫描版Java程序员面试笔试真题与解析 完整pdf扫描版
价值348元 RabbitMQ消息中间件技术精讲2018视频教程 百度云价值348元 RabbitMQ消息中间件技术精讲2018视频教程 百度云
10节课让你成为滚床单高手  强烈推荐 屌丝的福音10节课让你成为滚床单高手 强烈推荐 屌丝的福音
Spring Boot编程思想(核心篇) PDF 电子书 百度云 网盘下载Spring Boot编程思想(核心篇) PDF 电子书 百度云 网盘下载
最新流出的传智博学谷黑马python5.0课程最新流出的传智博学谷黑马python5.0课程

漫谈JavaScript中的提升机制(Hoisting)

漫谈JavaScript中的提升机制(Hoisting)

[复制链接]
123456819 | 显示全部楼层 发表于: 2019-11-14 10:35:00
123456819 发表于: 2019-11-14 10:35:00 | 显示全部楼层 |阅读模式
查看: 87|回复: 0

你还没有注册,无法下载本站所有资源,请立即注册!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
前言

刚接触到JavaScript的时候,便知道JavaScript是按顺序执行的,是如浏览器的解析DOM树一样的流程,解析DOM结构的时候,如果遇到JS脚本或者外联脚本便会停止解析,继续下载脚本之后,执行脚本,然后再解析DOM。
然而,却因此常常碰到问题。
看如下代码以及输出:  
上面的代码让我们产生了疑惑,我们仅仅声明了name的时候,打印出来值是undefined,按理说,重新声明age之后,age的值应该也是undefined才对,但是输出来的却是10。这究竟是怎么回事儿呢?
我们的通用解释是,遇到了变量提升。
而这样的情况,我们在函数中也会看到,请看下面代码:  
上面代码的输出结果是什么?  
为什么会产生这样的情形呢?我们通用的解释是,函数声明提升了。
而针对这两种情况,就是我们经常遇到的提升机制,也就是我们常说的Hoisting。
而仅仅只是一句提升机制来解释这种现象,还是觉得云里雾里,要是我之前可能也就不明觉厉的哦了一声,然后就不再理会这样的东西了,那么究竟为什么会出现这样的情况呢?
JavaScript是如何被编译的呢

有时候我们会想,一段JS代码是如何执行的呢?其实,在JS代码被执行之前,通常都有一个编译过程。
这个编译过程其实很复杂,但总体来说,逃不过编译过程的步骤,只不过JavaScript是在这个步骤之中对代码做了优化处理。
第一、词法分析

词法分析主要是将一段程序分解成有意义的代码块,便于对分解的代码块做解析。
比如,var age = 10;这一段代码将会被分解成 var、age、=、10、;。这是5个词法单元。
这些单元分析完毕之后,便会给解析器调用,生成相应的AST(抽象语法树)。
第二、解析词法单元

解析词法单元,是为了生成AST,那么到底什么是AST呢,我们来看一段代码以及解析生成的AST。
漫谈JavaScript中的提升机制(Hoisting)  技术博客 500685-20190909075047979-1355907803

同样是var age = 10;这段代码,被解析器解析成了一段树形结构的结构,这个结构,就是抽象语法树AST。你可以通过这个网站来查看生产的AST:AST解析器
而抽象语法树,又是可以转换成可执行代码。这就涉及到编译的第三个阶段。
第三、生成可执行代码

生成可执行代码的过程,相当于是再把AST转换成浏览器可执行的代码,或者是各种语言引擎可执行的代码。
比如我们常见的babel,可以让我们用ES6的语法去开发程序,其实就是依靠babel编译器,将我们的ES6代码编译成ES6的AST,然后将ES6的AST转换成ES5的AST或者ES3的AST,最后将AST转成ES5或ES3的代码来让浏览器执行。
同理,TypeScript的TSC也是一个编译器,做的事情和babel是一样的,只不过两者编译出来的ES6的AST有略微的差别,这样就造成了TypeScript用不了Babel社区的丰富多样的插件,如eslint等。
因为eslint语法检查,正是基于AST做的。
那么上面这个编译过程有什么用呢?
JavaScript中的声明和赋值

理解了语言的编译过程,那么JavaScript中的声明和赋值又是如何的一个流程呢?
比如,var age = 10;这段代码,在JavaScript中的编译方式是如何呢?
在JavaScript中,这段代码大概相当于是如下两个过程:  
函数声明也是如此:  
这个时候,我们再回头来,想一下提升机制是什么?
再看提升

JavaScript的执行,被分为了两个阶段,分别是编译阶段,以及执行阶段。依照这个来看,所谓的提升机制(有的叫做变量提升,考虑到函数的定义,并未用这个名词),就是JavaScript引擎把变量声明和函数声明在编译阶段首先进行默认赋值,之后,在程序执行阶段,才会被代码真正的执行。也就是说,针对声明先提升,后执行。
注意:函数声明和变量都有提升机制,两者之间也有优先级。这都遵循一个原则:函数优先原则。也就是说,函数声明会提升到普通变量声明之前。
总结

变量提升,是一个值得去探究的概念,只有理解了这个概念,我们理解JavaScript的执行机制将会变得清晰明了起来。
文中有什么描述不当的,希望各位大佬能指出,大家共同学习,一起进步。
我的博客:http://www.gaoyunjiao.fun/?p=143


来源:http://www.137zw.com
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
137zw.com IT学习站致力于免费提供精品的java技术教程和python技术教程,CCNA书籍/资料/CCNP书籍/资料教程/CCIE书籍/资料/H3C学习/认证/一级建造师考试/微软学习/认证/包括基础教程和高级实战教程,同时也提供分享网站源码下载和互联网相关一系列的技术教程,我们想做的就是让知识分享更有价值!(IT学习站官方唯一域名地址:www.137zw.com 请谨防假冒网站!)本站所有资源全部收集于互联网或网友自行分享,分享目的仅供大家学习与参考,如无意中侵犯您的合法权益,请联系本站管理员进行删除处理!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

浙ICP备19022368号-1|Archiver|手机版|IT学习站-137zw.com

GMT+8, 2020-7-11 00:34 , Processed in 0.178231 second(s), 33 queries .

快速回复 返回顶部 返回列表