DOM 元素是否通过引用传递给 console.log？ [复制]答案

【问题标题】：Are DOM elements passed by reference to console.log? [duplicate]DOM 元素是否通过引用传递给 console.log？ [复制]
【发布时间】：2014-09-15 03:08:25
【问题描述】：

我什至不确定我在这里问的是什么。我只知道这不是我所期望的。

我有一个页面脚本（见下文），它通过 ID 获取对元素的引用，然后在其上调用一些函数。每个函数将元素（或其textContent）记录到控制台，修改文本内容，然后调用下一个函数。让我困惑的是这些更改是如何记录的。

If I log element.textContent, I get the behavior I expected：每个日志都打印上一个函数留下的字符串。

If I log the element itself, I get a different behavior*：每个日志输出元素的最终状态，而不是调用日志时的状态。

这让我认为元素是通过引用传递的，导致所有引用在脚本继续时一起更新，而元素的文本内容是按值记录的。

如果这是真的，我怎么知道会发生哪种行为？所有 DOM 引用都是按引用传递的，而字符串（原语）是按值传递的吗？据我了解，JavaScript 通过引用传递对象，通过值传递原语。这就是这里发生的事情吗？

*JS Bin 的输出比 Chrome 提供的要详细得多，但它确实将元素描述为 object 类型。我使用的完整代码如下（使用element.textContent，而不是element）。

<html>
<body>
<p id="paragraph">First paragraph</p>
<script>
  (function () {
    'use strict'

    var one = function () {
      console.log(example.textContent)
      example.textContent = example.textContent.replace('paragraph', 'call')
      two()
    }
    var two = function () {
      console.log(example.textContent)
      example.textContent = example.textContent.replace('First', 'Second')
      three()
    }
    var three = function () {
      console.log(example.textContent)
      example.textContent = example.textContent.replace('Second', 'Third')
      console.log(example.textContent)
    }

    var example = document.getElementById('paragraph')
    console.log(example.textContent)
    one()
  })()
</script>
</body>
</html>

【问题讨论】：

任何对象都是通过引用传递的（准确地说：引用是通过值传递的）。任何字符串都按值传递。
对 - 作为值的对象总是引用。
这不是传递值的问题。相反，它是console.log 的问题-console.log 在传递引用时不会拍摄引用所指对象的快照。因此，您记录的值始终是您在控制台中检查时的值，而不是您调用 console.log 时的值。
@zerkms 一个对象是通过引用传递的，但是引用是通过值传递的？恐怕我没有跟上。
传统上，这个console.log 问题一直作为console.log 问题的其他问题之一的副本而关闭，但我今天懒得找到它们。有人关闭这个。

标签： javascript html dom console.log

【解决方案1】：

如果这是真的，我怎么知道会发生哪种行为？

阅读相关 API 的文档。例如，DIV element 的 HTML5 规范包括一个指向 interface HTMLDivElement API 的链接，它告诉您各种方法和属性返回什么。

很遗憾，HTML5 并未包含所有相关信息，因此您还必须检查其他规范，例如 W3C DOM Core 与 textContent。

您还可以在 Mozilla 开发者网络 (MDN) 上查看各种 web APIs。可能最简单的方法是调用方法或访问属性，然后使用 typeof 查看它返回的内容。

【讨论】：