Question

我正在使用for循环创建5个“RoundDiv”类型的新对象，它有一个属性“weirdArray”，这是一个空数组。在调用“init（）”方法时。 “someValue”被推入“怪异阵营”。

问题是每次创建“RounDiv”类型的新对象时“someValue”只被推送一次，但是在点击任何“roundDiv”时，控制台日志会显示数组中的5个元素，而应该只有一个元素。 / p>

    "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”中的先前值存在...

您的贡献深表感谢：）

Answer 1

在第一个示例中，您在对象原型中实例化weirdArray，使此数组属性为静态。因此，您的每个RoundDiv对象将共享相同的数组以存储您的数据。

像在第二个示例中那样在init函数中实例化它可以解决问题。每次创建新的weirdArray时，都会创建一个RoundDiv的新实例。

请参阅this fiddle，其中显示了每个示例创建新数组的次数，时间以及每个push之后的数组大小。

在javascript中创建新对象时，其中的数组属性不会初始化为新对象

1 个答案: