JavaScript专题之一：变量提升与预编译-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

前言
一、有趣的现象
二、Js的预解析
三、提升之间的优先级
四、ES6
写在最后

（相关免费学习推荐：javascript视频教程）

前言

本篇文章是《JavaScript专项进阶系列》的第一篇文章，全系列大概会包含例如：

防抖节流
扁平化
深浅拷贝
数组去重
排序
…

等等经典的专项知识点。取名为专项进阶是因为它们在很多场合的“出镜率高”很高，为了避免化身google内容搜索师，《JavaScript专项进阶系列》诞生了！！！

在这里插入图片描述

一、有趣的现象

按照大家的常识，JavaScript代码在执行是一定是自上而下的，你需要输出一个字符串，当然需要提前声明一个保存string类型的变量。如果深奥的道理我都能懂，于是我阅读了下面的代码。

1.1 我以为的开局

1	`var` `str =` `'123';console.log(str);` `// 123`

我们调换一下代码的位置在再看：

1	`console.log(str);` `// undefinedvar str = '123';`

我好像找到规律了!!!

当我看完了前两段代码并且进行了“深度思考”后，我好像找到规律了，那就是：在当前代码块后函数中，在变量声明和初始化之前使用变量，会拿不到正确的值。

1.2 实际上是这样的

带着上面的“结论”我来到了这里

1 2	`var` `val =` `'余光';(function(){` `console.log(val);` `// 余光})();`

果然如此！，在变量声明和初始化之后耶稣也阻挡不了我拿到val的值，我说的！！！

当我看到下面一段代码时，我已经产生了动摇，此事必要蹊跷。

var val = '余光';(function(){
    console.log(val); // undefined
    var val = '测试';})();

Ps：如果大家立即执行函数存在疑问，不妨看看《JavaScript之深入理解立即调用函数表达式（IIFE）》吧～

这…我怂了，是什么原因导致这样的现象发生的呢？Js又是如果处理的呢？

二、Js的预解析

在当前的作用域内，无论在哪里变量声明，在幕后，都会进行一次看不见的移动。

注意：仅声明被“移动”。即声明和赋值在某些时候被动分开了。而这次看不见的移动实际上就是Js在编译阶段的解析。

来看一段《你知不知道的Js》中经典的例子：

1	`name =` `'余光';` `// 未添加关键字（未声明），name为全局变量，，即window.name = '余光'var name; // 再次声明name，此时name未进行初始化，它的值是undefined吗？console.log(name); // ？`

结果是成功打印“余光”，这样看不见的移动就发生在Js预解析（编译）之中。

2.1 核心：预解析

为了搞明白这个核心问题，我们需要回顾一下，引擎会在解释JavaScript代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来。感兴趣的小伙伴可以阅读《JavaScript中的变量对象》和《从作用域到作用域链》这两篇文章哦～

因此，发生这样的事情，包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。当你看到var a = 2；时，可能会认为这是一个声明。但JavaScript实际上会将其看成两个声明：var a；和a = 2;。

第一个定义声明是在编译阶段进行的。
第二个赋值声明会被留在原地等待执行阶段。

即代码是这样写的：

1	`// 我们看到的代码：var name = '余光';`

但Js会将它解析成：

1	`// 声明(Declaration)var name; // 声明但未初始化，所以分配 undefined// 初始化(Initialization)name = '余光'; // 初始化（赋值）`

所以本小结的一段代码应该这样分析：

1	`var` `name;` `// 声明name提到作用域顶部，并被分配了一个undefinedname = '余光'; // 进行初始化操作console.log(name); // '余光'`

2.2 注意：只有声明被提升了

只有声明会被提升，而赋值和其他代码逻辑会在执行到代码的位置时才会生效。所以会有下面的问题：

foo();function foo(){
    console.log(name); // undefined
    var name = '余光';}

函数被提升了，自然可以正常执行，但变量仅仅是声明被提升了。

2.3 每个作用域都会进行提升操作

还是上面的代码：

foo();function foo(){
    console.log(name); // undefined
    var name = '余光';}

实际它在编译时是这样的：

function foo(){
    var name; // 声明
    console.log(name); // undefined
    name = '余光'; // 初始化}foo(); // 函数执行

三、提升之间的优先级

既然我们知道了变量和函数会被提升，他们之间又是如何判断优先级的呢？

3.1 函数会被首先提升，然后才是变量

我们分析下面的代码：

foo();var foo; // 1function foo(){
    console.log('余光');}foo = function(){
    console.log('小李');}

本着函数优先提升的原则，他会被解析成这样：

function foo(){
    console.log('余光');}foo(); // 余光foo = function(){
    console.log('小李');}

注意，var foo 因为是一个重复声明，且优先级低于函数声明所以它被忽略掉了。

3.2 函数字面量不会进行函数提升

最直观的例子，就是在函数字面量前调用该函数：

1 2	`foo();var` `foo =` `function(){` `console.log(1);}// TypeError: foo is not a function`

这段程序中：

变量标识符foo被提升并分配给所在作用域（在这里是全局作用域），因此在执行foo()时不会导致ReferenceError（），而是会提示你 foo is not a function。
然后就是执行foo，foo此时并没有赋值（注意变量被提升了）。由于对undefined值进行函数调用而导致非法操作，因此抛出TypeError异常。

四、ES6和小结

ES6新增了两个命令let和const，用来声明变量，有关它们完整的概念我会在《ES6基础系列》中总结，提起它们，是因为变量提升在它们身上不会存在。