深刻浅出javascript （1）—— 变量提高

提到前端面试，对于 javascript 语言层面的考察，这几个概念是避不开的：执行上下文，变量提高，闭包，This，做用域，做用域链，原型链，Event Loop等。
与其说面试很机械，倒不如说这就是 javascript 语音最最核心的概念，弄不清楚这些概念，那你必定不是一名合格的前端开发er。
因此，接下来我会分几篇文章来说这几个核心概念，并将他们串起来，让你们能够更好的全方位理解。
下面进入正题，今天第一篇文章咱们来讲 —— 变量提高。

先看代码：

showName() 
console.log(myname) 
var myname = 'wens' 
function showName() { 
    console.log('函数showName被执行'); 
}

使用过 JavaScript 开发的程序员应该都知道，JavaScript 是按顺序执行的。若按照这个逻辑来理解的话，那么：

• 当执行到第 1 行的时候，因为函数 showName 尚未定义，因此执行应该会报错；
• 执行第 2 行的时候，因为变量 myname 也未定义，因此一样也会报错。然而实际执行结果却并不是如此， 以下图：

第 1 行输出“函数 showName 被执行”，第 2 行输出“undefined”，这和想象中的顺序执行有点不同啊！

经过上面的执行结果，咱们已经知道了函数或者变量能够在定义以前使用，那若是使用没有定义的变量或者函数，JavaScript 代码还能继续执行吗？为了验证这点，咱们能够删除第 3 行变量 myname 的定义，以下所示：

showName() 
console.log(myname) 
function showName() { 
    console.log('函数showName被执行'); 
}

这时候 JavaScript 引擎就会报错，结果以下：

从上面两段代码的执行结果来看，咱们能够得出以下三个结论。

1. 在执行过程当中，若使用了未声明的变量，那么 JavaScript 执行会报错。
2. 在一个变量定义以前使用它，不会出错，可是该变量的值会为 undefined，而不是定义时的值。
3. 在一个函数定义以前使用它，不会出错，且函数能正确执行。

第一个结论很好理解，由于变量没有定义，这样在执行 JavaScript 代码时，就找不到该变量，因此 JavaScript 会抛出错误。

可是对于后两个结论，就挺让人费解的：

• 变量和函数为何能在其定义以前使用？这彷佛代表 JavaScript 代码并非一行一行执行的。
• 一样的方式，变量和函数的处理结果为何不同？好比上面的执行结果，提早使用的 showName 函数能打印出来完整结果，可是提早使用的 myname 变量值倒是 undefined，而不是定义时使用的“wens”这个值。

变量提高（Hoisting）

要解释这两个问题，咱们须要先了解下什么是变量提高。

不过在介绍变量提高以前，咱们先经过下面这段代码，来看看什么是 JavaScript 中的声明和赋值。

var myname = 'wens'

这行代码须要这样理解：

var myname //声明部分 
myname = 'wens' //赋值部分

上面是变量的声明和赋值，那接下来咱们再来结合代码看看函数的声明和赋值：

function foo(){ 
    console.log('foo') 
} 
var bar = function(){ 
    console.log('bar') 
}

第一个函数 foo 是一个完整的函数声明，也就是说没有涉及到赋值操做；
第二个函数和上面那一行变量的赋值同样，是先声明变量 bar，再把function(){console.log('bar')}赋值给 bar。

好了，理解了声明和赋值操做，那接下来咱们就能够聊聊什么是变量提高了。

所谓的变量提高，是指在 JavaScript 代码执行过程当中，JavaScript 引擎把变量的声明部分和函数的声明部分提高到代码开头的行为。变量被提高后，会给变量设置默认值，这个默认值就是咱们熟悉的 undefined。

针对第一个代码片断，咱们来模拟一下变量提高：

// 把变量 myname提高到开头， 
// 同时给myname赋值为undefined 
var myname = undefined 

// 把函数showName提高到开头 
function showName() { 
    console.log('showName被调用'); 
} 

showName() // 因此这里能够正常执行
console.log(myname) // 因此这里能够正常打印myname的值

// 去掉var声明部分，保留赋值语句 
myname = 'wens'

从代码中能够看出，对原来的代码主要作了两处调整：

• 第一处是把声明的部分都提高到了代码开头，如变量 myname 和函数 showName，并给变量设置默认值 undefined；
• 第二处是移除本来声明的变量和函数，如var myname = 'wens'的语句，移除了 var 声明，整个移除 showName 的函数声明。

经过这两步，就能够实现变量提高的效果。你也能够执行这段模拟变量提高的代码，其输出结果和第一段代码是彻底同样的。

JavaScript 代码的执行流程

从字面意义上来看，“变量提高”意味着变量和函数的声明会移动到代码的最前面，就像咱们所模拟的那样。其实这并不许确。实际上变量和函数声明在代码里的位置是不会改变的。由于一段 JavaScript 的可执行代码(executable code) 在真正被执行以前还要先经历引擎的编译

编译阶段

上面说到 JavaScript 的可执行代码(executable code)，那么哪些是可执行代码呢？

其实很简单，就三种：

1. 当 JavaScript 执行全局代码的时候，会编译全局代码并建立全局执行上下文，并且在整个页面的生存周期内，全局执行上下文只有一份。
2. 当调用一个函数的时候，函数体内的代码会被编译，并建立函数执行上下文，通常状况下，函数执行结束以后，建立的函数执行上下文会被销毁。
3. 当使用 eval 函数的时候，eval 的代码也会被编译，并建立执行上下文。

那么编译阶段和变量提高存在什么关系呢？

为了搞清楚这个问题，咱们仍是回过头来看上面那段模拟变量提高的代码，为了方便介绍，能够把这段代码分红两部分。

从上图能够看出，输入一段代码，通过编译后，会生成两部份内容：执行上下文（Execution context）和可执行代码。

执行上下文是 JavaScript 执行一段代码时的运行环境，好比调用一个函数，就会进入这个函数的执行上下文，在这里肯定该函数在执行期间用到的诸如 this、变量、对象以及函数等。

关于执行上下文的细节，我会在下一篇文章作详细介绍，如今咱们只须要知道，在执行上下文中存在一个变量环境的对象（Viriable Environment），该对象中保存了变量提高的内容，好比上面代码中的变量 myname 和函数 showName，都保存在该对象中。

咱们能够简单地把变量环境对象当作是以下结构：

VariableEnvironment: 
    myname -> undefined, 
    showName -> function {console.log(myname)}

接下来，咱们再结合代码来分析下是如何生成变量环境对象的:

showName() 
console.log(myname) 
var myname = 'wens' 
function showName() { 
    console.log('函数showName被执行'); 
}

咱们逐行分析上述代码：

• 第 1 行和第 2 行，因为这两行代码不是声明操做，因此 JavaScript 引擎不会作任何处理；
• 第 3 行，因为这行是通过 var 声明的，所以 JavaScript 引擎将在环境对象中建立一个名为 myname 的属性，并使用 undefined 对其初始化；
• 第 4 行，JavaScript 引擎发现了一个经过 function 定义的函数，因此它将函数定义存储到堆 (HEAP）中，并在环境对象中建立一个 showName 的属性，而后将该属性值指向堆中函数的位置。

这样就生成了变量环境对象。接下来 JavaScript 引擎会把声明之外的代码编译为字节码，至于字节码的细节，我也会在后面文章中作详细介绍。如今有了执行上下文和可执行代码了，那么接下来就到了执行阶段了。

执行阶段

JavaScript 引擎开始执行“可执行代码”，按照顺序逐行执行。下面咱们就分析下这个执行过程：

• 当执行到 showName 函数时，JavaScript 引擎便开始在变量环境对象中查找该函数，因为变量环境对象中存在该函数的引用，因此 JavaScript 引擎便开始执行该函数，并输出“函数 showName 被执行”结果。
• 接下来打印“myname”信息，JavaScript 引擎继续在变量环境对象中查找该对象，因为变量环境存在 myname 变量，而且其值为 undefined，因此这时候就输出 undefined。
• 接下来执行第 3 行，把“wens”赋给 myname 变量，赋值后变量环境中的 myname 属性值变为“wens”，变量环境以下所示：

VariableEnvironment: 
    myname -> wens, 
    showName -> function {console.log(myname)}

好了，以上就是一段代码的编译和执行流程。实际上，编译阶段和执行阶段都是很是复杂的，包括了词法分析、语法解析、代码优化、代码生成等，全部的这些内容我都会在接下来的文章中介绍，在本篇文章中咱们暂时只介绍变量提高相关内容。

代码中出现相同的变量或者函数怎么办？

如今咱们知道了，在执行一段 JavaScript 代码以前，会编译代码，并将代码中的函数和变量保存到执行上下文的变量环境中，那么若是代码中出现了重名的函数或者变量，JavaScript 引擎会如何处理？

相同变量

咱们看下面的代码：

console.log(myName);
var myName = 'wens';
console.log(myName);
var myName = 'leon';
console.log(myName);

咱们来分析下其完整执行流程：

• 首先是编译阶段。遇到了第一个 myName 变量，在环境对象中建立 myName 并赋予undefined 初始值。接下来是第二个 myName 变量，此时变量环境对象中已经存在 myName ，因此跳过这个过程。
• 接下来是执行阶段。第一个log输出 undefined ，由于这时候没有给 myName 再次赋值。第二行myName变量被赋值 wens， 因此第二个log输出 wens。同理，第三个log输出leon。

综上所述，一段代码若是定义了两个相同名字的值，那么最终的值取决于被赋予的最新的值，若是没有就是初始值undefined。

相同函数

咱们先看下面这样一段代码：

function showName() { 
    console.log('wens'); 
} 
showName(); 
function showName() { 
    console.log('leon'); 
} 
showName();

在上面代码中，咱们先定义了一个 showName 的函数，该函数打印出来“wens”；而后调用 showName，又定义了一个 showName 函数，这个 showName 函数打印出来的是“leon”；一段代码中出现了同名的函数，并分别调用。
咱们来分析下其完整执行流程：

• 首先是编译阶段。遇到了第一个 showName 函数，将函数定义存储到堆中，并在环境对象中建立一个 showName 的属性指向堆中定义的函数。接下来是第二个 showName 函数，发现变量环境中已经存在一个 showName 函数了，此时，堆中定义的 showName 函数会被这个 showName 函数覆盖掉。这样变量环境中的 showName 函数就指向了第二个 showName 函数了。
• 接下来是执行阶段。先执行第一个 showName 函数，但因为是从变量环境中查找 showName 函数，而变量环境中只保存了第二个 showName 函数，因此最终调用的是第二个函数，打印的内容是“leon”。第二次执行 showName 函数也是走一样的流程，因此输出的结果也是“leon”。

综上所述，一段代码若是定义了两个相同名字的函数，那么最终生效的是最后一个函数。

总结

好了，今天就到这里，下面我来简单总结下今天的主要内容：

• JavaScript 代码执行过程当中，须要先作变量提高，而之因此须要实现变量提高，是由于 JavaScript 代码在执行以前须要先编译。
• 在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为 undefined；在代码执行阶段，JavaScript 引擎会从变量环境中去查找自定义的变量和函数。
• 若是在编译阶段，存在两个相同的变量，那么值取决于被赋予的最新的值，若是没有就是初始值undefined。
• 若是在编译阶段，存在两个相同的函数，那么最终存放在变量环境中的是最后定义的那个，这是由于后定义的会覆盖掉以前定义的。

以上就是今天所讲的主要内容，接下来的文章咱们会重点介绍执行上下文。