Question

背景

首先，我想提一下，找出

的差异的SO搜索

（主机对象） DOM-Javascript对象（var domJSobj = document.createElement("div")）和
（原生对象）纯Javascript对象（var pureJSobj = {}）

已经完成，但我仍然无法声称我发现了很多（很棒的是，有这样的问题答案：what-is-the-difference-between-native-objects-and-host-objects）。也许我在这里忽略了一些东西，然后非常感谢评论。

我也在阅读MDN Mozillas Docu on DOM and Javascript之前先问一下这个问题。

问题

作为一个小“无胶”我开始在Javascript控制台玩，我遇到了一些第一个陷阱（由于我对（本机对象）的行为的期望，这对于（主机对象）是不正确的）。要清楚许多事情 - 首先看来 - 看起来很相似：

var nativeObject = {}; //create new object
nativeObject.someAttribute = "something"; //set some attribute
nativeObject.someMethod = function() { return this.someAttribute; } // define some method 

console.log(nativeObject.someAttribute); // "something"
console.log(nativeObject.someMethod());  // "something"

var hostObject = document.createElement("div"); //create a "div" one type of host object
hostObject.someAttribute = "something"; //set some attribute
hostObject.someMethod = function() { return this.someAttribute; } // define some method

console.log(hostObject.someAttribute); // "something"
console.log(hostObject.someMethod());  // "something"

对我来说，首先看来（主机对象）和（本机对象）一样可用，并且已经有更多：

console.log(nativeObject.tagName);  // undefined
console.log(hostObject.tagName);  // "DIV"

因为它已经拥有了所有漂亮的DOM属性。

我的问题是关于如果我决定（错误地）使用（主机对象）而不是简单（本机对象）的错误列表（可能出现问题）？

我已经意识到了这一点：

速度考虑（我假设本地对象创建得更快）
内存使用考虑因素（本地对象也可能更好）

无论如何我看不出太多麻烦（如果这些考虑在一个案例中不是很重要）呢？这就是问题的原因。

我认为这个问题的答案最好显示/说明一个潜在的陷阱，即糟糕或不可能使用a的情况或情况（（主对象）在（本机对象）上。通过这种方式，这个问题应该遵循传递真实事实的SO质量要求，而不是引发仅仅基于意见的讨论。

Answer 1

对我来说，使用基于DOM的对象的缺陷是，从创建它的那一刻起，它就已经拥有了许多属性。您的document.createElement("div")对象具有id属性和title属性以及style属性，该属性是其自身的对象，等等。如果要使用基于DOM的属性对象存储任意数据，您需要注意不要将属性命名为已经存在的东西，否则可能会出现意外结果;例如，在我在Chrome中的测试中，代码hostObject.id = null实际上会导致hostObject.id成为""而不是真null;或hostObject.id = false会导致代码中定义的"false"变量为false（即字符串，而不是真hostObject）。

尝试将此添加到您的代码中：

for (property in document.createElement("div"))
  console.log(property);

在Chrome中，我看到列出了134个属性。这是很多可能避免的地雷。除此之外，浏览器的属性也不同。 Firefox中的相同代码列出了192个属性。

如果您真的打算将它用作DOM对象，我只会创建一个DOM对象。然后属性有一些目的;否则它们只是代码中的潜在错误。就像评论说的那样，KISS;我的意思是，当然，我可以决定在Date对象中保存整数值123456789：

myInt = new Date(123456789);
myInt.getTime(); // returns 123456789

但那有什么意义呢？为什么不做myInt = 123456789？就像我不使用Date对象来存储整数数据一样，不要使用DOM对象来存储任意数据。

陷阱使用DOM-Javascript VS纯Javascript对象？

背景

问题

1 个答案: