谷歌Chrome console.log失序？

Question

有人能解释一下下面的两个输出吗？

代码1：

console.log(itemsAry);
//loadNextItem();
function loadNextItem(){
    var item = itemsAry.shift();
    console.log(item);
}

结果：

["cat-53", "cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]

(正如预期的那样)。

代码2：

console.log(itemsAry);
loadNextItem();
function loadNextItem(){
    var item = itemsAry.shift();
    console.log(item);
}

结果：

["cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]

cat-53

请注意，cat-53在console.log()输出之前已从原始数组移位，该输出应该在shift操作发生之前发生。这怎么可能呢？或者我错过了什么？

编辑:情况变得更糟：

console.log(itemsAry);
loadNextItem(); loadNextItem(); loadNextItem(); loadNextItem();
function loadNextItem(){
    var item = itemsAry.shift();
    console.log(item);
    console.log(itemsAry);
}

结果：

["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-53
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-57
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-51
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-10

在FireFox中测试后，这似乎是Google Chrome的一个特别问题。FF输出：

["cat-53", "cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-53
["cat-57", "cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-57
["cat-51", "cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-51
["cat-10", "cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]
cat-10
["cat-55", "cat-56", "cat-5", "cat-50", "cat-3", "cat-54", "cat-52", "cat-9", "cat-8", "cat-4", "cat-58", "cat-6", "cat-7"]

输出与预期一致...

Answer 1

console.log总是有点“晚”，当涉及到对象时，你不能指望它。仅原语(字符串等)将直接工作。对于前者，内存中只有一个实例，因此当控制台获取数据时，它可能已经更改了。

当然，这取决于你实际使用的是哪个控制台，但我在Chrome上经常遇到这种情况。

Here is someone who experienced this on Firebug.

Answer 2

我认为你在使用Chrome，对吗？Firebug不能做到这一点(我刚刚检查了- FF8.0，FB1.8.4)，但是Chrome16做到了。

我认为在Chrome中，console.log()是异步执行的，这样就不会中断您的代码或其他东西；实际上，所有的console.log()都是在调用它们的代码完成运行后立即发生的。

编辑:诅咒，忍者！

Answer 3

console.log的行为

execute scope中的console.log快照元素，并在控制台中打印它们。这里有一个演示：

(function () {
  console.log(obj);
  var obj= {};
  obj.new_value = 'hello';
}())

调用console.log时未定义obj。但是它会使用正确的属性new_value打印到控制台中。

firefox的问题

首先，当在火狐中使用function关键字声明函数时，直到代码执行时才会分配函数的名称。

如果您在前面的代码中没有定义loadNextItem，下面的代码将在firefox中生成一个错误(ReferenceError: loadNextItem is not defined)。

loadNextItem();

function loadNextItem (){
    var item = itemsAry.shift();
    console.log(item);
}

此行为在ECMA-262中进行了说明

众所周知，ECMAScript的几个广泛使用的实现都支持将FunctionDeclaration用作语句。然而，在应用于此类FunctionDeclarations的语义中，不同实现之间存在着不可调和的显着差异。由于这些不可调和的差异，将FunctionDeclaration用作语句会导致代码在不同实现之间不能可靠地移植。

然后firefox doesn't support这个行为。