在JavaScript中的return语句后执行代码？

Question

我在网上找到了这个简短的JavaScript代码段：

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

我希望可以忽略bar（）函数中return语句之后的内容，并且变量foo的末尾等于10。 但是令我惊讶的是，控制台输出的内容却大不相同：

1

现在，当我在return语句后删除行时

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

控制台将按预期打印：

10

谁能解释一下是什么原因导致foo在以前的代码版本中返回1？

Answer 1

函数声明被提升到其包含上下文的顶部。 您实际上是在bar函数的顶部创建var foo 。

在bar操作的foo在该函数中是局部的，并且不影响全局上下文的foo 。

http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html

Answer 2

这是由于hoisting 。

编译器基本上会将其转换为：

function bar() {
    function foo() {}
    foo = 10;
    return;       
}

因此，分配前有一个本地foo ，而您只覆盖了本地。 然后，函数foo()也将消失。

Answer 3

tl; dr这是由于函数表达式和函数声明的工作方式（也称为函数提升）： https : //javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

更详细的回复：

将以下console.log放入代码中将帮助您直观地了解正在发生的事情，我想回答您的问题。

var foo = 1;
console.log('0', foo)
function bar() {
    console.log('1', foo)
    foo = 10;
    console.log('2', foo)
    return;
    console.log('3', foo)
    function foo() {}
    console.log('4', foo)
}
console.log('5', foo)
bar();
console.log('6', foo)

输出如下：

'0' 1
'5' 1
'1' function foo() {}
'2' 10
'6' 1

因此，令人怀疑的是，在返回语句之后，console.log（'3'，foo）和console.log（'4'，foo）从未被调用过，这是预期的。 您的问题现在可能是“为什么将我的console.log（'1'，foo）分配给函数foo（）{}”，可以用以下描述函数声明与函数表达式的SO问题来回答，即

function foo(){}

与

var foo = function(){}

为什么在Javascript中定义函数之前就可以使用它？

基本上，当执行bar时， foo的直接定义成为function（）{}，但是这里的关键概念是foo定义是在bar()函数内部的局部定义，并且在bar范围之外，它仍然被分配给1。

关于函数声明和表达式的另一本好书： https : //javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/

Answer 4

这是因为代码被转换为；

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

这是因为JavaScript始终将变量声明而不是初始化移到范围的顶部。