移动或附着某个图元时，是否打断对该图元的引用

Question

我是JS的新手，仍然不太确定DOM是如何工作的。我有几个尖锐的问题。

如果我引用了DOM元素，比如。。。

var element = document.createElement("DIV");

当我…

foo.appendChild(element);

或者。。。

foo.insertBefore(element, bar);

最后，当我将DOM节点指向变量时，到底存储了什么？幕后有魔法身份证吗？谢谢

Answer 1

当您在JavaScript中引用任何东西时，只要您有，该引用就会保持有效。这包括DOM对象和普通JavaScript对象。

考虑一下这个非DOM的例子可以得到这样的想法：

var objects = {
    one: { foo: 'bar' },
    two: { hoo: 'har' }
};
var won = objects.one;
console.log( 'objects:', objects );
console.log( 'won:', won );
delete objects.one;
console.log( 'objects:', objects );
console.log( 'won:', won );

如果您将其粘贴到JavaScript控制台中，它将记录：

objects: Object {one: Object, two: Object}
won: Object {foo: "bar"}
objects: Object {two: Object}
won: Object {foo: "bar"}

如您所见，从objects中删除one属性对存储在won变量中的附加引用没有影响。

DOM元素也是如此。当您创建DOM元素并保存对它的引用时，该引用—以及它所指的对象—除非你释放了引用，并且没有其他未完成的引用，否则它不会消失。例如，这个函数创建了一个DOM元素，但不保留对它的任何引用：

function silly() {
    var foo = document.createElement('div');
}
silly();

在这里，我们创建一个DOM元素，并在foo变量中放置对它的引用。但随后函数返回，破坏该变量并释放其对DOM元素的引用。该元素现在可以在以后的任何时间进行垃圾收集。

这与您的示例不同，在您的示例中，您实际上保留了一个包含引用的变量。

这在幕后是如何运作的？这取决于特定的JavaScript引擎。大多数JavaScript引擎都是用C或C++编写的，并使用与垃圾收集或类似技术相结合的指针。当您有DOM元素的引用时，通常不会有某种神奇的ID查找来查找它；它更像是C中的直接指针引用。一件事直接指向另一件事，其方式与JavaScript中变量"指向"（保存对对象的引用）的方式非常相似。

当然，正如@Mics所指出的（双关语），具体细节取决于实现。只要JavaScript代码的行为符合规定，它可以是一个神奇的ID查找，或者几乎是任何东西。