新しく作成したdivをオブジェクトのプロトタイプとして使用して、JavascriptでDIVを「拡張」しようとしています。DIV要素を拡張するときに、いくつかの要素を作成するにはどうすればよいですか?
"new"を介してオブジェクトの新しいインスタンスを作成する際に、Javascriptを理解しているので、プロトタイプオブジェクトがコピーされ、 "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
私の最初の例では事業部は、しかし、それはシングルトンまたはMonostateのように振る舞い、コピーされていないようです。このようにはならないのでしょうか?
- PROTYPEオブジェクトは、新しいオブジェクトが、これは何のreturn文がない場合、これは(コンストラクタによって返されるコンストラクタ
- に与えられている「この」
- に割り当てられている新しいオブジェクト
- にコピーされます指定された)
これは私が理解していないことです。異なるオブジェクトをプロトタイプとして使用すると、そのオブジェクトとそのプロパティがコピーされます。そのプロパティの1つを変更すると、元のプロトタイプのプロパティは変更されません。 – sirion
これらはコピーされません。 'MyTest.prototype'に' x'などのプロパティがあり、 'var test = new MyTest();がある場合。 test.x = 'abc'; '実際には新しい' x'プロパティを 'test'オブジェクトに追加し、プロトタイプの' x'プロパティを隠します。ただし、コードでは、すべてのオブジェクトに新しいプロパティを追加しません。すべてのインスタンスは 'style'プロパティを参照します。これはプロトタイプであり、作成した単一のdivに属します。 – Imp
しかし、なぜこの原則は私の2番目の例には当てはまりませんか? (あなたがあなたの答えを書いた後に追加したもの) – sirion