Javascript - 制作对象数组并理解构造函数答案

【问题标题】：Javascript - make array of objects and understanding constructorsJavascript - 制作对象数组并理解构造函数
【发布时间】：2018-01-24 14:42:16
【问题描述】：

我知道以前有人问过这个问题，但它们总是特定于项目，我找不到我要找的东西。

我需要一个 javascript 中的对象数组。我已将一个类声明为：

var svgData = {.....}

（关键字类在 esversion 中不可用：5）我有一个数组变量：

var svgContent = [];

我试着像在 C# 中那样做：

svgContent[0] = new svgData();

但是，您通常会为它创建一个构造函数，据我所知，它在 javascript 中不存在。我一直在使用这样的功能：

function SvgData (....) {
    this.var = ...; 
    etc.
}

但问题是这个和类之间没有链接，因此我有一个问题，当我尝试使用这样的 for 循环访问数组中的变量时：

for(var i = 0; i < length; i ++){
    console.log(svgContent[i].var);
}

它重复返回相同的数字（它只是覆盖了自己，因为我这样做的方式已将每个数组元素链接到完全相同的变量 svgData{}。如何创建类（对象）的实例？以及如何将构造函数链接到变量？

【问题讨论】：

“this 和 class 之间没有联系” - 你是什么意思？您是否使用svgContent[i] = new SvgData() 创建对象实例？
不，但是如果我这样做了，那么构造函数 SvgData() 甚至在使用该类是什么意思？当然我可以创建一个名为 Create() 的函数并且它仍然可以工作吗？在 C# 中，您在类中编写构造函数。
我认为您需要阅读经典类和 javascript OOP 之间的区别。 javascript 做的事情有很大不同。一个很好的资源是 Eric Elliot 编写的 Programming Javascript Applications
JavaScript 没有你所知道的类。
你的“班级”var svgData 没有意义。函数SvgData 基本上是你的类定义。不过你可以使用原型。

标签： javascript class object constructor

【解决方案1】：

您可以轻松更改您的代码以获得您想要的（据我所知）：

function SvgData(value) {
    this.var = value;
    // ...
}

// use this instead of your svgData variable:
SvgData.prototype = {
    // ...
}

var svgContent = [];

svgContent.push(new SvgData("value"));

Read more on JavaScript prototypes.

【讨论】：

【解决方案2】：

您应该考虑到 JavaScript 是一种独立语言并以自己的方式实现事物的事实。根据您的问题，我了解您想要一个对象数组（它仍然是 JS 中的一个对象，只是具有一些特殊属性），并且您希望这些对象由模板（比如说“类”）制成。

您已经提到没有构造函数，因为没有类。但是您使用function SvgData 的方式正是您设计“类”的方式。这称为构造函数，它的特殊之处在于它除了对this 对象的赋值之外没有其他语句，因此它隐式返回this 对象（构造函数是任何返回this 对象的函数）。

语法：new SvgData 基本上是语法糖：创建一个新的空对象（来自“new”）并为其分配从接下来的任何函数返回的 this 对象。

function SvgData (val) {
    this.var = val;
}

var myLength = 10;
var myArr = [];

for (var i = 0; i < myLength; i ++) {
    myArr.push(new SvgData(i));
}

console.log(myArr);

这应该做你想做的事。你可以测试一下here。

【讨论】：