JavaScript提升机制Hoisting详解


Posted in Javascript onOctober 23, 2019

前言

刚接触到JavaScript的时候,便知道JavaScript是按顺序执行的,是如浏览器的解析DOM树一样的流程,解析DOM结构的时候,如果遇到JS脚本或者外联脚本便会停止解析,继续下载脚本之后,执行脚本,然后再解析DOM。

然而,却因此常常碰到问题。

看如下代码以及输出:

var name;
console.log(name);  // undefined
name = 'tom';

age = 10;
var age;
console.log(age); // 10

上面的代码让我们产生了疑惑,我们仅仅声明了name的时候,打印出来值是undefined,按理说,重新声明age之后,age的值应该也是undefined才对,但是输出来的却是10。这究竟是怎么回事儿呢?

我们的通用解释是,遇到了变量提升。

而这样的情况,我们在函数中也会看到,请看下面代码:

log();
console.log(name);
var name = 'tom';
function log() {
  console.log('this is log');
}

上面代码的输出结果是什么?

输出结果:

this is log
undefined

为什么会产生这样的情形呢?我们通用的解释是,函数声明提升了。

而针对这两种情况,就是我们经常遇到的提升机制,也就是我们常说的Hoisting。

而仅仅只是一句提升机制来解释这种现象,还是觉得云里雾里,要是我之前可能也就不明觉厉的哦了一声,然后就不再理会这样的东西了,那么究竟为什么会出现这样的情况呢?

JavaScript是如何被编译的呢

有时候我们会想,一段JS代码是如何执行的呢?其实,在JS代码被执行之前,通常都有一个编译过程。

这个编译过程其实很复杂,但总体来说,逃不过编译过程的步骤,只不过JavaScript是在这个步骤之中对代码做了优化处理。

第一、词法分析

词法分析主要是将一段程序分解成有意义的代码块,便于对分解的代码块做解析。

比如,var age = 10;这一段代码将会被分解成 var、age、=、10、;。这是5个词法单元。

这些单元分析完毕之后,便会给解析器调用,生成相应的AST(抽象语法树)。

第二、解析词法单元

解析词法单元,是为了生成AST,那么到底什么是AST呢,我们来看一段代码以及解析生成的AST。

JavaScript提升机制Hoisting详解

同样是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中,这段代码大概相当于是如下两个过程:

var age = undefined;   // 隐式赋值,编译阶段
age = 10;  //变量赋值  执行阶段

函数声明也是如此:

// 这一段代码就是一个完整的函数声明,在编译阶段中,会先执行所有声明,才会依次执行代码操作。
function log() {
  console.log('this is log')
}

这个时候,我们再回头来,想一下提升机制是什么?

再看提升

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

注意:函数声明和变量都有提升机制,两者之间也有优先级。这都遵循一个原则:函数优先原则。也就是说,函数声明会提升到普通变量声明之前。

总结

变量提升,是一个值得去探究的概念,只有理解了这个概念,我们理解JavaScript的执行机制将会变得清晰明了起来。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
JavaScript 事件的一些重要说明
Oct 25 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 #Javascript
p5.js临摹动态图形的方法
Oct 23 #Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 #Javascript
p5.js实现动态图形临摹
Oct 23 #Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 #Javascript
微信小程序 生成携带参数的二维码
Oct 23 #Javascript
使用p5.js临摹动态图形
Oct 23 #Javascript
You might like
如何使用PHP计算上一个月的今天
2013/05/23 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
php实现socket推送技术的示例
2017/12/20 PHP
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python抓取京东图书评论数据
2014/08/31 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
Python类super()及私有属性原理解析
2020/06/15 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
美国时尚在线:Showpo
2017/09/08 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
公安纪律作风整顿剖析材料
2014/10/10 职场文书
模范班主任事迹材料
2014/12/17 职场文书
工程主管竞聘书
2015/09/15 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
nginx内存池源码解析
2021/11/20 Servers