码迷,mamicode.com
首页 > 其他好文 > 详细

变量提升

时间:2018-09-04 19:02:34      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:span   比较   define   正确答案   class   表达   函数   fine   code   

首先先看一段代码

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,这里运行会得到一个错误结果。

变量提升

标签:span   比较   define   正确答案   class   表达   函数   fine   code   

原文地址:https://www.cnblogs.com/boses/p/9586132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!