forループを使用してタイプ「RoundDiv」の5つの新しいオブジェクトを作成しています。これには、空の配列であるプロパティ「weirdArray」があります。「init（）」メソッドを呼び出すと。「someValue」は「weirdArray」にプッシュされます。
問題は、「someValue」が「RounDiv」タイプの新しいオブジェクトが作成されるたびに1回だけプッシュされることですが、「roundDiv」をクリックすると、コンソールログに配列内の5つの要素が表示されますが、1つしかないはずです。
"use strict";
var roundDivPrototype = {
weirdArray: new Array(),
init: function(label) {
this.weirdArray.push("someValue");
var me = this;
var body = document.body;
var div = document.createElement("div");
div.className = "roundDiv";
div.innerText = label;
div.addEventListener("click", function(e) {
alert("Length of array: " + me.weirdArray.length);
console.log(me.weirdArray); //me=this
});
body.appendChild(div);
}
};
var RoundDiv = function(label) {
this.init(label);
};
RoundDiv.prototype = roundDivPrototype;
for (var i = 0; i < 5; i++) {
new RoundDiv(i);
}body {
background-color: teal;
text-align: center;
width: 100%;
}
.roundDiv {
display: inline-block;
height: 100px;
width: 100px;
background-color: whitesmoke;
margin: 10px;
border: solid;
border-radius: 50%;
text-align: center;
font-size: 5em;
box-sizing: border-box;
cursor: pointer;
line-height: 100px;
}<body>
<script src="js/main.js"></script>
</body>私は問題の可能な解決策を見つけました：
"use strict";
var roundDivPrototype = {
weirdArray: undefined,
init: function(label) {
this.weirdArray = new Array(); //Change in code above
this.weirdArray.push("someValue"); //Change in code above
var me = this;
var body = document.body;
var div = document.createElement("div");
div.className = "roundDiv";
div.innerText = label;
div.addEventListener("click", function(e) {
alert("Length of array: " + me.weirdArray.length); //me=this
console.log(me.weirdArray); //me=this
});
body.appendChild(div);
}
};
var RoundDiv = function(label) {
this.init(label);
};
RoundDiv.prototype = roundDivPrototype;
for (var i = 0; i < 5; i++) {
new RoundDiv(i);
}body {
background-color: teal;
text-align: center;
width: 100%;
}
.roundDiv {
display: inline-block;
height: 100px;
width: 100px;
background-color: whitesmoke;
margin: 10px;
border: solid;
border-radius: 50%;
text-align: center;
font-size: 5em;
box-sizing: border-box;
cursor: pointer;
line-height: 100px;
}<body>
<script src="js/main.js"></script>
</body>問題の可能な解決策を見つけましたが、「RoundDiv」タイプの新しいオブジェクトを作成しているときに「weirdArray」の以前の値が存在する理由を知りたいのですが...
あなたの貢献に深く感謝します:)
最初の例でweirdArrayは、オブジェクトプロトタイプをインスタンス化して、この配列プロパティを静的にします。したがって、各RoundDivオブジェクトは同じ配列を共有してデータを格納します。
init2番目の例のように関数でインスタンス化すると、問題が解決します。新しいweirdArrayを作成するたびに、の新しいインスタンスが作成されますRoundDiv。
各例について、新しい配列が作成される回数、時期、および各後の配列サイズを示すこのフィドルを参照してくださいpush。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加