如何為存儲在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方法