JavaScript提升机制提升详解

前言

当我第一次接触JavaScript的时候，我就知道JavaScript是按顺序执行的，这和在浏览器中解析DOM树的过程是一样的。解析DOM结构时，如果遇到JS脚本或者外展脚本，我会停止解析。下载脚本后，我会执行脚本，然后解析DOM。

然而，他们经常遇到问题。

请看下面的代码和输出：

var名称；console.log(名称)；//undefinedname=' Tom '；年龄=10岁；年龄不同；console.log(年龄)；//10上面的代码让我们疑惑。当我们只声明名称时，打印的值是未定义的。显而易见，在重新声明年龄之后，年龄的值也应该是未定义的，但是输出是10。这到底是怎么回事？

我们的一般解释是，我们遇到了变量提升。

在这种情况下，我们也可以在函数中看到它，请看下面的代码：

log()；console.log(名称)；var name=' tom函数log() { console.log('这是日志')；}以上代码的输出是什么？

输出结果：

这是为什么logundefined会产生这样的情况呢？我们的一般解释是函数声明得到了改进。

针对这两种情况，就是我们经常遇到的升降机构，也就是我们常说的吊装。

只是一个解释这个现象的推广机制，但我还是觉得雾蒙蒙的。如果我以前没有意识到，我会忽略这样的事情。那么究竟为什么会发生这种情况呢？

JavaScript是如何编译的

有时我们会想，一段JS代码是如何执行的。事实上，在执行JS代码之前，通常会有一个编译过程。

这个编译过程其实很复杂，但总的来说，它逃不出编译过程的步骤，只不过JavaScript在这一步优化了代码。

一、词汇分析

词法分析主要是将一个程序分解成有意义的代码块，便于解析分解后的代码块。

例如，var age=10此代码将被分解为var、age、=、10、这是五个词汇单位。

分析完这些单元后，解析器将调用它们来生成相应的AST(抽象语法树)。

第二，分析词汇单位

解析词法单元就是生成AST，那么什么是AST呢？让我们看一段代码并分析生成的AST。

同样是var age=10解析器将这段代码解析成树结构，这就是抽象语法树AST。你可以通过这个网站查看AST:AST解析器

抽象语法树可以转换成可执行代码。这涉及到编译的第三阶段。

第三，生成可执行代码

生成可执行代码的过程相当于将AST转换为浏览器可执行代码或各种语言引擎可执行的代码。

例如，我们常见的巴别塔可以让我们使用ES6语法来开发程序。其实我们是依靠巴贝尔编译器把我们的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=未定义；//隐式赋值，编译阶段年龄=10；//变量赋值执行阶段的函数声明也是如此：

//这段代码是一个完整的函数声明。在编译阶段，首先执行所有声明，然后依次执行代码操作。函数log () {console.log('这是log')}这时候我们再回去思考一下提升机制。

看促销

JavaScript的执行分为两个阶段，即编译阶段和执行阶段。按照这种观点，所谓的提升机制(有的叫变量提升，考虑到函数的定义，这个名词就不用了)是指JavaScript引擎在编译阶段首先给变量声明和函数声明赋值默认值，然后在程序执行阶段将代码实际执行。也就是说，先提升申报，再执行申报。

注意：函数声明和变量都有提升机制，两者之间是有优先级的。所有这些都遵循一个原则：功能优先的原则。也就是说，函数声明将在普通变量声明之前升级。

摘要

变量推广是一个值得探索的概念。只有理解了这个概念，我们才能清楚地理解JavaScript的执行机制。

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