Question

所有我现在正在学习prototype.js。有些东西看起来很奇怪。例如，下面是我在firebug中运行的代码片段，url是http://api.prototypejs.org/dom/Element/，因为页面中有prototype.js。

var el2 = document.createElement('div');
var k=0;
for(var i in el2){ k++};
console.log(k);

结果是262，非常奇怪。因为如果我在没有prototype.js的页面中运行相同的代码，结果是195.我的问题是prototype.js如何影响document.createElement方法。我在prototype.js中查询document.createElement，我找不到像document.createElement = function（）{}这样的代码。

谢谢！

Answer 1

Prototype影响HTMLElement的原型，document.createElement创建 - 因此得名。 Here’s the Prototype documentation on that.

原生扩展

这背后有一个秘密。

在支持向原生对象原型添加方法的浏览器中   例如HTMLElement 元素上的所有 DOM扩展都可用   默认情况下，无需调用Element.extend()，美元功能   或任何东西！

Answer 2

document.createElement只是创建一个HTMLElement，它由prototype.js扩展。有关详细信息，请参阅http://prototypejs.org/learn/extensions.html。

Answer 3

根据您发布的代码，您循环遍历元素对象并计算该元素对象上的属性数。

正如其他海报所述，PrototypeJS为HTMLElement的原生Javascript定义添加了额外的方法和属性。

请查看Element命名空间http://api.prototypejs.org/dom/Element/，其中列出了PrototypeJS添加的所有方法和属性。

使用更多信息进行编辑

PrototypeJS如何向元素添加新方法？

首先，您需要了解javascript原型的工作原理 - 最简单的定义是它是构建对象的蓝图，当创建该类型的新对象时，该对象具有该蓝图中定义的所有方法以及原型链的任何进一步发展。

原型链的最简单示例

 DIVElement -> HTMLElement -> Object

所以新的div元素获取DIVElement原型，HTMLElement原型和Object原型的所有方法。

这也是为什么不建议扩展Object原型的原因，因为所有内容都是从原型中复制的。

然后PrototypeJS使用在大多数浏览器中原生不存在的新方法扩展HTMLElement.prototype对象，这样每当在javascript中创建新的HTML元素时，它就会获得PrototypeJS方法的副本。

对于源代码中的特定位置

Object.extend(GLOBAL.Element, {
  extend:     extend,
  addMethods: addMethods
});

这是许多功能检测的结尾，以查看浏览器支持的元素等。

Answer 4

感谢所有人，我想我知道prototype.js如何进行原生扩展。

(function(div) {

if (!Prototype.BrowserFeatures.ElementExtensions && div['__proto__']) {
    window.HTMLElement = { };
    window.HTMLElement.prototype = div['__proto__'];
    Prototype.BrowserFeatures.ElementExtensions = true;
}

div = null;})(document.createElement('div'));

我认为这是进行原生扩展的代码片段。

Prototype.js＆amp;使用document.createElement（）

4 个答案:

原生扩展