オブジェクトのプロトタイプとして新しく作成された div を使用して、Javascript を介して DIV を「拡張」しようとしています。
Javascriptを理解しているので、「new」を介してオブジェクトの新しいインスタンスを作成すると、プロトタイプオブジェクトがコピーされ、「this」に割り当てられ、関数が(コンストラクターとして)実行されます。
別のオブジェクトを作成してDOMに追加するたびに、元のdivが「置換」されることを除いて、すべてが機能しているようです。より正確に言うと、コンストラクターは常に同じ div を変更します。
を使用MyTest.prototype = document.createElement("div");すると、説明した動作が得られます。コード例のその後にある 2 つのコメント行は、私も試しましたが、役に立ちませんでした。
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-Framework のため、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」に割り当てられます
- これはコンストラクタに渡されます
- これはコンストラクターによって返されます (return ステートメントが指定されていない場合)