我正在尝试通过使用新创建的 div 作为我的对象的原型来通过 Javascript“扩展”一个 DIV。
据我了解Javascript，在通过“new”创建我的对象的新实例时，原型对象被复制，分配给“this”，然后执行该函数（作为构造函数）。
一切似乎都有效，除了每当我创建另一个对象并将其添加到 DOM 时，它都会“替换”原始 div。更准确地说：构造函数总是更改相同的 div。
使用MyTest.prototype = document.createElement("div");给了我所描述的行为，在我的代码示例中之后的两条注释行也是我尝试过的，但无济于事。
我知道尝试扩展 DOM 是不受欢迎的，但我想了解这种行为，因为我认为我知道原型是如何工作的，而这根本不符合我的想法。
这是我正在尝试做的一个最小示例：
<!DOCTYPE html>
<html>
<head>
<title>Div-Prototype-Test</title>
<script type="text/javascript">
var height = 20;
var top = 0;
function MyTest() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
this.style.backgroundColor = "rgb("+ r +","+ g +","+ b +")";
this.style.position = "absolute";
this.style.width = "500px";
this.style.height = height + "px";
this.style.top = top + "px";
top += height;
document.getElementsByTagName("body")[0].appendChild(this);
}
MyTest.prototype = document.createElement("div");
// MyTest.prototype = document.createElement("div").cloneNode(true);
// MyTest.prototype = new Element();
window.addEventListener(
"load",
function() {
var a = new MyTest();
var b = new MyTest();
var c = new MyTest();
var d = new MyTest();
}
);
</script>
</head>
<body>
</body>
</html>
PS：由于某个 Javascript 框架，我搜索任何改变 Javascript 原型的东西总是导致数百个与我的问题无关的结果 - 如果我错过了一个已经讨论过这个问题的问题，请告诉我。
编辑：
为了让我的问题更清楚：
这是一个我使用对象作为原型的示例 - 它的属性被复制。
function A() {
}
A.prototype = { property: 4 };
A.prototype.set = function(num) {
this.property = num;
}
window.addEventListener(
"load",
function() {
var message = "";
var x1 = new A();
message += "A1 : "+ x1.property +"\n";
x1.set(15);
message += "A1 : "+ x1.property +"\n";
var x2 = new A();
message += "A2 : "+ x2.property +"\n";
alert(message);
}
);
然后警报说：
A1 : 4
A1 : 15
A2 : 4
然而，我的第一个示例中的 Div 似乎没有被复制，它的行为类似于 Singleton 或 Monostate。不应该这样吗？
- Protype 对象被复制到一个新对象中
- 新对象被分配给“this”
- 这是给构造函数的
- this 由构造函数返回（如果没有指定 return 语句）