JavaScript提升机制Hoisting详解

前言

刚接触到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。

同样是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的执行机制将会变得清晰明了起来。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript中变量提升 Hoisting

    JavaScript中变量提升 Hoisting

    因为我在写这文章的时候,百度里找资料,找到了园友的一篇文章,写的很好,可是我写了又不想放弃,所以就在里面拿了很多东西过来!~~ [翻译]JavaScript Scoping and Hoisting希望得到大家谅解. 一.案发现场 我们先看一段很简单的代码: 复制代码 代码如下: var v='Hello World'; alert(v); 这个没有疑问吧,弹出"Hello World".OK,我们继续. 我们在看一段Code: 复制代码 代码如下: var v='Hello Worl

  • JavaScript Scoping and Hoisting 翻译

    你知道下面的JavaScript代码执行后会alert出什么值吗? 复制代码 代码如下: var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 如果答案是"10"令你感到惊讶的话,那么下面这个会让你更加困惑: [/code] var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a); [/cod

  • JS中作用域和变量提升(hoisting)的深入理解

    JS中作用域和变量提升(hoisting)的深入理解

    作用域(Scoping) 对于Javascript初学者来说,一个最迷惑的地方就是作用域:事实上,不光是初学者.我就见过一些有经验的javascript程序员,但他们对scope理解不深.javascript作用域之所以迷惑,是因为它程序语法本身长的像C家族的语言.我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间.在这样的一些空间里,外部不能访问内部变量,但内部可以访问外部变量. c语言的变量分为全局变量和局部变量,全局变量的作用范围是任何文件和函数访问(当然,对于非变量定

  • 理解 JavaScript Scoping & Hoisting（二）

    Scoping & Hoisting var a = 1; function foo() { if (!a) { var a = 2; } alert(a); }; foo(); 上面这段代码在运行时会产生什么结果? 尽管对于有经验的程序员来说这只是小菜一碟,不过我还是顺着初学者常见的思路做一番描述: 1.创建了全局变量 a,定义其值为 1 2.创建了函数 foo 3.在 foo 的函数体内,if 语句将不会执行,因为 !a 会将变量 a 转变成布尔的假值,也就是 false 4.跳过条件分支,

  • JavaScript的变量声明提升问题浅析(Hoisting)

    一.变量声明提升 hoisting 英['hɔɪstɪŋ] 美['hɔɪstɪŋ] n. 起重,提升 v. 把-吊起,升起( hoist的现在分词 ) 先来看一个栗子 var cc = 'hello'; function foo(){ console.log(cc); var cc = 'world'; console.log(cc); } foo(); console.log(cc); 这里将会输出 undefined.'world' .'hello' 此处主要有两个知识点: 1.作用域 2.

  • JavaScript中Hoisting详解 (变量提升与函数声明提升)

    JavaScript中Hoisting详解 (变量提升与函数声明提升)

    本文主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 如何将 函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) 这个词是用来解释 变量 和 函数声明 是如何被提升到 函数或全局 作用域顶部的.你在任何的 JavaScript 文档中找不到这个术语,我们说的

  • 深入解读JavaScript中的Hoisting机制

    hoisting机制 javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面. 先看一段代码 var v = "hello"; (function(){ console.log(v); var v = "world"; })(); 这段代码运行的结果是什么呢? 答案是:undefined 这段代码说明了两个问题, 第一,function作用域里的变量v遮盖了上层作用域变量v.代码做少

  • 详解javascript 变量提升（Hoisting）

    简介 "变量提升"意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确. 实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中. 声明变量的方法 var.let.const 不用以上关键字直接赋值的变量会挂载与windows环境下; let a=9 const a=1 var a=6 c=5 声明函数的方法 javascript中声明函数的方法有两种:函数声明式和函数表达式. //函数声明 function say(){ console.log('

  • JavaScript提升机制Hoisting详解

    JavaScript提升机制Hoisting详解

    前言 刚接触到JavaScript的时候,便知道JavaScript是按顺序执行的,是如浏览器的解析DOM树一样的流程,解析DOM结构的时候,如果遇到JS脚本或者外联脚本便会停止解析,继续下载脚本之后,执行脚本,然后再解析DOM. 然而,却因此常常碰到问题. 看如下代码以及输出: var name; console.log(name); // undefined name = 'tom'; age = 10; var age; console.log(age); // 10 上面的代码让我们产生

  • javascript继承机制实例详解

    本文实例讲述了javascript继承机制.分享给大家供大家参考.具体分析如下: 初学javascript一般很难理解Javascript语言的继承机制它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解

  • JavaScript中变量提升机制示例详解

    变量提升 JavaScript的变量提升有两种,用var声明的变量以及用function声明的变量. 用var声明的变量 我们先来看下面这段代码,a的值是多少 代码1 console.log(a); var a; 按照以往编程语言的思路来看,代码自上而下运行,按这种思路,会报错,因为执行到第2行时,变量a还没有定义,所以会报错a is not defined 然而事实上答案是undefined 好,抱着疑惑,我们看下面的代码 var a; console.log(a); 我们发现,这两段代码是一

  • javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内 事件冒泡:自下而上的去触发事件---由内到外 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获 true,事件捕获:false,事件冒泡 一般默认false,即事件冒泡 Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了 下面是我尝试的例子: <!DOCTY

  • MyBatis 动态SQL和缓存机制实例详解

    有的时候需要根据要查询的参数动态的拼接SQL语句 常用标签: - if:字符判断 - choose[when...otherwise]:分支选择 - trim[where,set]:字符串截取,其中where标签封装查询条件,set标签封装修改条件 - foreach: if案例 1)在EmployeeMapper接口文件添加一个方法 public Student getStudent(Student student); 2)如果要写下列的SQL语句,只要是不为空,就作为查询条件,如下所示,这样

  • Python代码块及缓存机制原理详解

    这篇文章主要介绍了Python代码块及缓存机制原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.相同的字符串在Python中地址相同 s1 = 'panda' s2 = 'panda' print(s1 == s2) #True print(id(s1) == id (s2)) #True 2.代码块: 所有的代码都需要依赖代码块执行. ​ 一个模块,一个函数,一个类,一个文件等都是一个代码块 ​ 交互式命令中, 一行就是一个代码块

  • JavaScript CollectGarbage函数案例详解

    首先看一个内存释放的实例: <SCRIPT LANGUAGE="JavaScript"> <!-- strTest = "1"; for ( var i = 0; i < 25; i ++ ) { strTest += strTest; } alert(strTest); delete strTest; CollectGarbage(); //--> </SCRIPT> CollectGarbage,是IE的一个特有属性,用

  • Java中的反射机制示例详解

    Java中的反射机制示例详解

    目录 反射 什么是Class类 获取Class实例的三种方式 通过反射创建类对象 通过反射获取类属性.方法.构造器 更改访问权限和实例赋值 运用场景 反射 反射就是把Java类中的各个成分映射成一个个的Java对象.即在运行状态中,对于任意一个类,都能够知道这个类的所以属性和方法:对于任意一个对象,都能调用它的任意一个方法和属性.这种动态获取信息及动态调用对象方法的功能叫Java的反射机制 每一个Java程序执行必须通过编译.加载.链接和初始化四个阶段 1.编译:将.java.文件编译成字节码.

  • Java多线程之线程通信生产者消费者模式及等待唤醒机制代码详解

    前言 前面的例子都是多个线程在做相同的操作,比如4个线程都对共享数据做tickets–操作.大多情况下,程序中需要不同的线程做不同的事,比如一个线程对共享变量做tickets++操作,另一个线程对共享变量做tickets–操作,这就是大名鼎鼎的生产者和消费者模式. 正文 一,生产者-消费者模式也是多线程 生产者和消费者模式也是多线程的范例.所以其编程需要遵循多线程的规矩. 首先,既然是多线程,就必然要使用同步.上回说到,synchronized关键字在修饰函数的时候,使用的是"this"

  • 基于JavaScript表单脚本(详解)

    基于JavaScript表单脚本(详解)

    什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav

随机推荐