3

我现在正在学习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(){} 这样的代码。

谢谢！

4

4 回答 4

2

原型影响 的原型HTMLElement，它document.createElement创建了——因此得名。这是关于它的原型文档。

本机扩展

这一切背后都有一个秘密。

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

于 2013-06-25T17:36:18.877 回答
1

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

于 2013-06-25T17:37:26.083 回答
1

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

正如其他海报所指出的那样，PrototypeJS 向 HTMLElement 的原生 Javascript 定义添加了额外的方法和属性。

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

编辑更多信息

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

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

原型链的最简单示例

 DIVElement -> HTMLElement -> Object

这样一个新的 div 元素就得到了 DIVElement 原型、HTMLElement 原型、Object 原型的所有方法。

这也是为什么不建议扩展 Object 原型的原因，因为一切都是从该原型复制而来的。

因此，PrototypeJSHTMLElement.prototype使用大多数浏览器本机不存在的新方法扩展对象，以便每当在 javascript 中创建新的 HTML 元素时，它都会获取 PrototypeJS 方法的副本。

对于源代码中的特定位置

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

这是许多功能检测的最后，以查看浏览器支持哪些元素等。

于 2013-06-25T21:08:43.213 回答
0

谢谢大家，我想我知道 protytype.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'));

我认为这是进行本机扩展的代码片段。

于 2013-06-26T08:51:10.080 回答