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

How can I create identical properties and methods to objects stored in an array in JavaScript?

本文关键字：创建 属性 方法 对象 数组 存储 JavaScript      更新时间：2023-09-26

我只是在尝试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();
}

为了在 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方法

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

相关文章：