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

Question

I'm just experimenting with some code in JavaScript to create properties and methods. The following code works, but I want to know if there is a better way to create the same properties and same methods for each object in the array.

As I said, this is just me experimenting with learning 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

Option 1: defining a constructor

You can transform it to the following, by defining the constructor of a class:

 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();
  }

Read more about the constructors in JavaScript.

Option 2: using Object.create()

Object can be created easily with Object.create() method, when you specificy as the first argument the prototype. See the example:

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();
  }

Of course you can define custom constructor to initialize the object properties or create an initialization method. It's a personal preference.

To get familiar with object oriented programming in JavaScript, read this introduction .

Answer 2

To create multiple objects with identical properties and methods in JavaScript we are usually using functions as constructors and prototypes .
Functions are first class objects in JavaScript and can be used as regular functions and as constructors as well.
The constructor name should always begin with capital letter.

// 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();

Now all the objects that were created with Contact constructor have same property names and shared displayContact method