console.log 是如何工作的？

Question

第一个例子：

在以下示例中：http://jsfiddle.net/maniator/ScTAW/4/
我有这个js：

var storage = (function () {
    var store = [];
    return {
        "add": function (item) {
            store.push(item);
        },
        "get": function () {
            return store;
        }
    };
}());

storage.add('hi there')
console.log(storage, storage.get(), storage.add('hi there #2'));

这是打印到控制台的内容：

对象 [“你好”，“你好 #2”] 未定义

有人会认为控制台应该只说：

对象 [“你好”] 未定义

因为第二次推送不会在值被记录之后发生，因此不应显示。

---

第二个例子：

在以下示例中：http://jsfiddle.net/maniator/ScTAW/5/

我使用相同的 storage 变量，但我是这样记录的：

storage.add('hi there')
console.log(storage, storage.get(), (function() {
    storage.add('hi there #2');
    console.log('TESTING');
})());

打印到控制台的是：

测试
目的 [“你好”，“你好 #2”] 未定义

嗯嗯，现在很奇怪不是吗？可以期待看到：

对象 [“你好”] 未定义
测试

为什么会这样？控制台日志机制的幕后发生了什么？

Answer 1

在大多数（如果不是全部）命令式编程语言中，传递给函数调用的任何参数都必须在调用函数之前进行评估（所谓的Eager evaluation）。此外，它们通常按从左到右的顺序进行评估（例如，对于 C，它是未定义的），但是在这两个示例中，评估参数的顺序并不重要。这在详细查看发生的情况时应该很明显：

如前所述，在调用console.log 之前，必须先执行storage.get()，返回store 数组。然后storage.add('hi there #2') 将被执行（或相反），所以它的结果（在这种情况下是undefined，因为add 不返回任何东西）可以作为第三个参数传递给console.log。这意味着一旦console.log 将使用参数(storage, storage.store, undefined) 调用，store 数组已经包含“hi there #2”，因此会产生您观察到的结果。

在第二个例子中，推理还是一样的，只是函数调用有点模糊。乍一看，似乎有一个函数作为第三个参数传递给 console.log 函数；但它实际上是一个函数调用（观察最后的()）。所以storage.add('hi there #2')会被执行，然后console.log('TESTING')和undefined匿名函数执行的结果会再次传递给console.log。

如果您确实将函数传递给console.log，它将打印该函数定义，并且不执行任何操作。所以：

storage.add('hi there')
console.log(storage, storage.get(), (function() {
    storage.add('hi there #2');
    console.log('TESTING');
}));

，最后没有()，结果：

Object
 ["hi there"] function () {
    storage.add('hi there #2');
    console.log('TESTING');
}

我希望这能让事情变得更清楚。

Answer 2

console.log 的所有参数将首先被迭代和评估以组合输出。在迭代您传递的参数时，会对对象进行更改并调用函数。 记录器迭代参数后，输出数据。

因为对象是 byRef，所以您对 storage.store 对象的“第二个参数”更改会反映在控制台输出中。因为参数是迭代的，所以在组装输出之前调用最后一个参数中的函数调用，因此在看到第一个console.log 调用的输出之前，您会看到函数调用的输出。

那么值得注意的是，console.log 的输出不会向您显示在调用console.log 时它们存在的对象。对于对象，您实际得到的是对象的引用句柄。因此，在将句柄添加到console.log 的输出之后对对象所做的任何更改仍将反映在对象本身中。由于句柄仅指向对象本身，因此您不会像调用函数时那样获得显示对象状态的输出，而是像现在那样指向对象的实时链接。

Answer 3

当你像这样打电话给console.log时

console.log(storage, storage.get(), storage.add('hi there #2'));

storage.add('hi there #2') 被评估，返回值被传递给console.log。评估它会导致数组项立即添加到store。

与storage.get() 相同 -> store。如此有效，语句变为：

console.log(storage, store, [return value of add which is undefined]);

当它打印时，store 被评估并且它的内容被输出，这就是你看到["hi there", "hi there #2"]的原因

---

在您的第二个示例中，首先评估匿名函数并传递结果。

Answer 4

您的存储添加函数已完全评估之前 console.log 被调用，因为它是一个参数。

这并不特定于 console.log，这是每种命令式编程语言的工作原理。