据我了解,当通过“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。难道不应该像这样吗?
- 原型对象被复制到一个新对象中
- 将新对象分配给“this”
- 将此对象传递给构造函数
- 构造函数返回此对象(如果没有指定返回语句)
MyTest.prototype
中有一个属性x
,并且您有var test = new MyTest(); test.x ='abc';
,那么您实际上向test
对象添加了一个新的x
属性,并隐藏了原型中的x
属性。但是,在您的代码中,您不会向每个对象添加新属性。所有实例都引用style
属性,该属性仍在原型中,并属于您创建的单个div。 - Impx1.set(15);
时,它执行了set()
函数内的代码:this.property = num;
,其中x1
是this
,15
是num
,所以它执行了x1.property = 15;
。这在对象x1
中创建了一个 新 属性名为property
的属性。因此发生的情况是:在对象x1
中找到了值为15
的x1.property
。在对象x2
中没有找到x2.property
,因此查找继续进入原型。在那里,它被找到并具有值4
。 - Imp