如何为 JavaScript 数组中存储的对象创建相同的属性和方法？

Question

我只是在尝试使用 JavaScript 中的一些代码来创建属性和方法。以下代码有效，但我想知道是否有更好的方法为数组中的每个对象创建相同的属性和相同的方法。

正如我所说，这只是我在尝试学习 JavaScript：

var contact = []; //set up array
var i = 0;

function displayContact() { //create function to display object contents
    console.log(this.name);
    console.log(this.telephone);
    console.log(this.email);
}

//create two empty objects in array
for (i = 0; i < 2; i = i + 1) {
    contact[i] = {};
}

//Create properties (with some test data)
contact[0].name = "Mr Blue";
contact[0].telephone = "08870 7980 11291";
contact[0].email = "Mister_Blue@somewhere.se";

contact[1].name = "Mr Blue";
contact[1].telephone = "07880 7880 11281";
contact[1].email = "Mister_Blue@somewhere.se";

//create method for each object
for (i = 0; i < 2; i = i + 1) {
    contact[i].logDetails = displayContact;
}

//test the method
for (i = 0; i < 2; i = i + 1) {
    contact[i].logDetails();
}

Answer 1

为了在 JavaScript 中创建多个具有相同属性和方法的对象，我们通常使用函数作为 constructors 和 prototypes。
函数是 JavaScript 中的第一类对象，既可用作常规函数，也可用作构造函数。
构造函数名称应始终以大写字母开头。

// Proper declaring of constructor
function Contact(name, telephone, email) {
    this.name = name;
    this.telephone = telephone;
    this.email = email;
}

// prototype is a crucial mechanism for inheritance realization
Contact.prototype.displayContact = function(){
   console.log(this.name);
   console.log(this.telephone);
   console.log(this.email);
}

// creation of two Contact objects
contact1 = new Contact("Mr Blue", "070 780 1121", "Mister_Blue@somewhere.se");
contact2 = new Contact("Mr Blue", "070 780 1121", "Mister_Blue@somewhere.se");

contact1.displayContact();

现在所有使用Contact构造函数创建的对象都有相同的属性名和共享displayContact方法

Answer 2

选项 1：定义构造函数

您可以通过定义类的构造函数将其转换为以下内容：

 var Contact = function() {
    this.name = '';
    this.telephone = '';
    this.email = '';
  };

  Contact.prototype.logDetails = function() {
    console.log(this.name);
    console.log(this.telephone);
    console.log(this.email);
  };

  var contact = []; //set up array
  var i = 0;

  //create two empty objects in array
  for (i = 0; i < 2; i = i + 1) {
    contact[i] = new Contact();
  }

  //Create properties (with some test data)
  contact[0].name = "Mr Blue";
  contact[0].telephone = "070 780 1121";
  contact[0].email = "Mister_Blue@somewhere.se";

  contact[1].name = "Mr Blue";
  contact[1].telephone = "070 780 1121";
  contact[1].email = "Mister_Blue@somewhere.se";

  //test the method
  for (i = 0; i < 2; i = i + 1) {
    contact[i].logDetails();
  }

详细了解 JavaScript 中的 constructors。

选项 2：使用 Object.create()

当您将原型指定为第一个参数时，可以使用Object.create() 方法轻松创建对象。看例子：

var contact = []; //set up array
  var i = 0,
      proto = {
        logDetails: function() {
          console.log(this.name);
          console.log(this.telephone);
          console.log(this.email);
        }
      };


  //create two empty objects in array
  for (i = 0; i < 2; i = i + 1) {
    contact[i] = Object.create(proto);
  }

  //Create properties (with some test data)
  contact[0].name = "Mr Blue";
  contact[0].telephone = "070 780 1121";
  contact[0].email = "Mister_Blue@somewhere.se";

  contact[1].name = "Mr Blue";
  contact[1].telephone = "070 780 1121";
  contact[1].email = "Mister_Blue@somewhere.se";

  //test the method
  for (i = 0; i < 2; i = i + 1) {
    contact[i].logDetails();
  }

当然您可以定义自定义构造函数来初始化对象属性或创建初始化方法。这是个人喜好。

要熟悉 JavaScript 中的面向对象编程，请阅读introduction。