javascript - Chrome 如何管理对 javascript 构造函数的引用

Question

请考虑这段代码:

function A() {
    console.log("first");
}

var f = A;

function A() {
    console.log("second");
}

var g = A;

f();
g();

它在 firebug 中输出“first”、“second”，这是我认为它应该做的。
但它在 Chrome 的控制台或 firefox 中输出“second”，“second”(当从文件执行时，而不是在 firebug 中)。
为什么要更改保留在“f”中的引用我执行第二个“function A(){”??

似乎提升是问题所在(请参阅下面的 apsillers 回答)。但是，为什么这个例子能正常工作(我的意思是第一秒输出):

var A = function A() {
    console.log("first");
}

var f = A;

A = function A() {
    console.log("second");
}

var g = A;

f();
g();

我在第二个函数声明中使用“A = ...”这一事实阻止了此函数的提升？

Answer 1

函数声明为 hoisted to the top of their scope ，所以你的代码被解释成这样:

function A() {
    console.log("first");
}

// overwrite previous A
function A() {
    console.log("second");
}

// variable declarations are hoisted as well
// (not directly related to your problem here, but worth noting)
var f;
var g;

f = A;
g = A;

f();
g();

在任何现代浏览器中生成 second、second 的输出。

在您的第二个示例中，对于var A = ...，您现在使用的是函数表达式，而不是函数声明。函数表达式不提升。

Firebug 怪癖

似乎——出于某种原因——Firebug 没有正确执行函数声明提升:

console.log(bar);  // this line incorrectly produces a ReferenceError!

function bar() { }

此代码片段应该记录 function bar() { }。它可以在任何适当的浏览器环境中执行此操作，但不能在 Firebug 中执行。

编辑:

Firebug 行为的原因是 Firebug 代码在 block 内部运行，并且 function declarations are not valid in blocks .然而，浏览器仍然会在非严格模式下处理它们，只是它们处理它们的方式不同。 Firefox 将它们视为未提升(而 IE 和 Chrome 会提升它们，碰巧)。