关于JS中变量提升的规则和原理的一点理解

Posted 2020-10-21 西风瘦码

上篇文章中讲到变量提升和函数提升的先后顺序时蒙了，后来去查了一下资料，特别整理一下。

在《你不知道的javascript（上卷）》一书的第40页中写到：函数会首先被提升，然后才是变量。

书中的一个代码示例是：

foo(); //1
var foo;
function foo() {
    console.log(1);
}   
foo = function() {
    console.log(2);
}

这个例子相对比较好理解，就是foo这个函数会先被声明再作用域的开始部分，实际上这个代码片段会被引擎理解为如下形式：

function foo() {
    console.log(1);
}
foo(); //1
foo = function() {
    console.log(2);
}

可是，当在网上看到这个一个例子时一开始我也是对运行结果不太理解的:

console.log(foo);    // function foo(){...}
function foo(){
    console.log("函数声明");
}
var foo = "变量";

咋一看这段代码输出的应该是undefined啊，因为根据规则是先提升函数，然后才是变量，所以不应该是这样吗？

function foo(){
    console.log("函数声明");
}
var foo = undefined;

这个理解最大的一个误区在于变量提升时只是声明了变量，并没有赋值，也就是

var foo;

仅此而已！我们平时在这种声明之前打印变量之所以是undefined是因为只是声明了，其他地方并没有赋值，所以是undefined，像这样的：

console.log(wanc);  //undefined
var wanc = ‘66‘;

可是在上面的例子中，变量和函数都是存在的，而且是先提升的函数foo，然后是声明变量var foo;声明变量的过程中并没有改变变量的值，所以最上面打印的还是函数foo;

由此一个小问题引出的思考：有问题就要多查资料，包括网上的和书上的，对比不同人的理解，最终的目的就是要做到知其然并且知其所以然，加油！

参考资料：

• http://bbs.csdn.net/topics/392018835
• 《你不知道的JavaScript（上）》