变量提升

Posted 2021-01-04 boses

首先先看一段代码

a;
var a = 10;

不知道大家猜的结果是什么，是报错？还是是10，亦或者是undefined，

正确答案是undefined，之所以出现这种情况是因为变量提升到了当前作用域的顶部。

可以这样理解上面的代码

 

var a;
console.log(a);
a = 10;

 

可以清楚看到结果。 但是如果是一个函数呢？

 

foo();
function foo() {};

这里的运行结果会出现什么情况呢？ 报错还是正常运行呢？

答案是正常运行，这里的函数声明同样会被前置到当前作用域的顶层，类似下面代码

 

function foo() {};
foo();

上面就是变量提升的基本规则。

 

 

下面来看一些比较复杂的例子

 

foo();
var foo;
function foo() {
    bar();
    console.log(a);
    var a = 10;
    function bar() {
    
    }
}

 

这里会正常运行，首先代码在编译过程中会先将函数声明和变量声明前置，

这里又涉及到一个规则，就是函数声明优先于变量声明，

上面的例子，会首先将foo()函数声明提升到头部，之后在编译过程中发现已经有foo，变量var foo;这句声明会被忽略掉。

执行的就是下面这段代码

 

function foo() {
    bar();
    console.log(a);
    var a = 10;
    function bar() {
    
    }
}
foo();

 

 在foo内部，我们直接运行a会返回一个undefined，可以看到在全局作用域和函作用域内部都会进行变量提升。

 

如果存在多个函数声明呢？

 

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

 

这里输出的结果是3，因为后面的函数声明会覆盖前面的代码。

 

如果是函数表达式呢？

 

foo(); //TypeError: foo is not a function
var foo = 15;
var foo = function() {
console.log(10);

 

这里会报错，可以看到函数表达式不会像函数声明一样将代码提升到头部，这里因为foo是undefined，这里运行会得到一个错误结果。