javascript - appendChild 返回无法读取未定义的属性 'containerDiv'

Question

我正在尝试将一个 div 元素添加到我的顶级 div 容器中，但由于某种原因我收到了一个错误。

这是我的代码。这是一个按钮，一旦您点击它，就会在屏幕上添加一个框。

为了避免 this. 的 jQuery 错误，我在类的顶部定义了一个变量，称为 self

var self = this;

所以这修复了 jQuery 错误。

$(this.button).click(function() {
        self.newContainer = new divGenerator();

        self.containerDiv.parentNode.appendChild(self.newContainer.divContainer);

    });

真正奇怪的是当我打印出来

console.log("self.newContainer: "+self.newContainer.containerDiv);

结果是“self.newContainer: [object HTMLDivElement]”。 HTMLDivElement 正是我所需要的，对吧？它是一个节点，appendChild() 需要一个节点元素。所以一切似乎都是正确的。但事实并非如此。为什么？

Answer 1

在我看来(我可能读错了，你必须发布 divGenerator 的内部结构才能确定)你的问题只是一个命名错误……如果你愿意的话，这是一个错字。在以下行中:

self.containerDiv.parentNode.appendChild(self.newContainer.divContainer);

我注意到您在 self.newContainer 上调用 divContainer 而不是 containerDiv。除非您还有一个定义为 divContainer 的属性，否则我猜您只需要将属性调用的名称更改为 containerDiv，就像其他情况一样你的代码。

---

边栏:我注意到你提到

To avoid the jQuery bug with this, I defined a variable on top of my class, called self

据我所知，jQuery 中没有这样的“错误”。相反，您对 this 的用法感到困惑，它是作为引用当前函数上下文(即您当前正在操作的对象)的关键字。

事实上，您的解决方案是 JavaScript 中的一个常见习语，允许您通过分配给外部范围内的 this 的变量来引用封闭上下文。我推荐阅读 this article阐明您对 this 结构的理解以及它可以和应该如何使用。