JavaScript变量提升解释

时间:2015-09-18 06:35:18

标签: javascript hoisting

我在javascript中看到了关于变量提升的以下文章。文章总结了以下三点。

1. All declarations, both functions and variables, are hoisted to the top of the containing scope, before any part of your code is executed.
2. Functions are hoisted first, and then variables.
3. Function declarations have priority over variable declarations, but not over variable assignments.

Site Point

var showState = function() {
  console.log("Idle");
};

function showState() {
  console.log("Ready");
} 

showState(); 

我知道代码被javascript引擎解释为

function showState() { // moved to the top (function declaration)
    console.log("Ready");
}

var showState; // moved to the top (variable declaration)
showState = function() { // left in place (variable assignment)
    console.log("Idle");
};

showState();

但是,我无法理解摘要中第三点的含义。任何人都可以解释第三点吗?第三点是什么意思?

根据第三点的解释,下面的代码片段应该返回8,功能栏()。但它说未定义,功能栏()。

console.log(foo);
console.log(bar);
var foo = 8;
function bar() {
    console.log("bar");
}

3 个答案:

答案 0 :(得分:2)

从您链接的文章:

  

在上面的代码中,我们看到了函数声明   变量声明的优先级。在下一个例子中   当我们有函数声明和变量时,我们会看到   分配,最后一个优先。

var showState = function() {
  console.log("Idle");
};

function showState() {
  console.log("Ready");
} 

showState();            // output: Idle

函数声明有两件事:

  1. 它声明一个与函数
  2. 同名的变量
  3. 将函数分配给该变量
  4. 这两个都被提升,而不仅仅是变量声明。 (这与var语句不同,后面只有声明被提升的相关作业。

    这意味着尽管= function() {代码是第一个,但以后的函数声明仍然先运行,因此= function() {可以覆盖它。

答案 1 :(得分:0)

您的上一个示例被解释为

function bar() {
    console.log("bar");
}    
var foo;

console.log(foo); // here 'foo' is undefined
console.log(bar); // bar is of type function
foo = 8;

答案 2 :(得分:-1)

基本上 - 假设我们没有特别的顺序

function hello(){};
var sup;
var yo = 4;

随着变量提升订单将成为

    var yo = 4;
    function hello(){};
    var sup;

因为var赋值优先于函数,它优先于函数声明。