使用 jQuery 的 JavaScript 意外对象行为

Question

我有两个 <div>元素，以及以下 JavaScript 代码:

var myObject = {
    $input: $('<input />'),
    insert: function () {
        $('div').append(this.$input);
        $('div').append(' ');
    }
};

myObject.insert();

如我所料，这会产生一个 <input>两个元素中的每一个 <div>元素。

现在，当我创建 myObject 的新实例时并调用insert()我将再次期待 4 <input>元素，每个元素两个 <div> .奇怪的是，我只得到 3 <input>元素!

请参阅此处的示例代码: http://jsfiddle.net/FNEax/

Answer 1

您正在显式创建 1 个输入:

$input: $('<input />',{value:i}),

...但是当您尝试将其附加到多个 div 时隐式克隆它

// 2 divs
$('div').append(this.$input);

然后 Object.create 不会创建新的 $input，因此在第二遍时，它附加(移动)来自第二个 div 的输入(实际上是原始的)到第一个 div，然后进行隐式克隆以填充第二个。

Here's a jsFiddle example每当调用 insert() 时都会增加一个 i 变量，并将其添加为输入值。请注意，它始终设置为 0。

我还对其进行了修改，将一个字符串传递给 insert，这样您就可以看到每个输入来自哪个调用。

第二次调用的两个输入仍然有传递给第一次调用的字符串。

---

编辑:

我在解释中间翻转了它，但概念是一样的。

当调用第二个 insert() 时，首先创建原始副本并添加到第一个 div，然后将原始副本附加到第二个 div(它已经存在的地方)。

jQuery 首先创建克隆，然后在最后添加原始的。

Here's another jsFiddle example向原始元素添加自定义属性，然后在每个 insert() 之后在具有该自定义属性的元素旁边添加一些文本。文本始终添加到第二个 div 中的原始文本旁边。