如何为存储在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

选项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中构造函数的更多信息。

选项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中的面向对象编程，请阅读本介绍 。

Answer 2

为了在JavaScript中创建具有相同属性和方法的多个对象，我们通常使用函数作为构造函数和原型 。
函数是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方法