实战演练：JavaScript 构造函数模式，打造你的第一个项目！

构造函数模式简介

构造函数模式是 JavaScript 中创建和管理对象最常见的方式之一。它是一种使用 new 关键字来创建对象，并使用 prototype 属性来继承父对象的方法和属性的模式。

创建一个构造函数

要创建一个构造函数，您需要使用 function 关键字并将其名称大写。例如：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

此构造函数创建了一个名为 Person 的对象，它有两个参数：name 和 age。这些参数将被用作对象的属性。

使用 new 关键字创建对象

要使用构造函数创建对象，您需要使用 new 关键字，后跟构造函数的名称和参数。例如：

var person = new Person("John Doe", 30);

这将创建一个名为 person 的对象，它有两个属性：name 和 age，其值分别为 "John Doe" 和 30。

访问对象属性

要访问对象属性，您可以使用点运算符。例如：

console.log(person.name); // "John Doe"
console.log(person.age); // 30

继承父对象的方法和属性

您可以使用 prototype 属性来继承父对象的方法和属性。例如：

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

person.greet(); // "Hello, my name is John Doe"

这将向 Person 构造函数的 prototype 属性添加一个名为 greet 的方法。这个方法可以被所有使用 Person 构造函数创建的对象使用。

使用构造函数模式创建第一个项目

现在，我们将使用构造函数模式来创建一个简单的项目。这个项目将创建一个名为 TodoList 的对象，它将存储一系列待办事项。

创建一个构造函数

首先，我们需要创建一个名为 TodoList 的构造函数。这个构造函数将接受一个参数：items，它是一个数组，其中包含待办事项。

function TodoList(items) {
  this.items = items;
}

添加方法

接下来，我们将向 TodoList 构造函数添加一些方法。这些方法将用于管理待办事项列表。

TodoList.prototype.addItem = function(item) {
  this.items.push(item);
};

TodoList.prototype.removeItem = function(item) {
  var index = this.items.indexOf(item);
  if (index > -1) {
    this.items.splice(index, 1);
  }
};

TodoList.prototype.markItemAsCompleted = function(item) {
  var index = this.items.indexOf(item);
  if (index > -1) {
    this.items[index].completed = true;
  }
};

TodoList.prototype.getCompletedItems = function() {
  return this.items.filter(function(item) {
    return item.completed;
  });
};

使用构造函数模式创建对象

现在，我们可以使用 TodoList 构造函数来创建对象。例如：

var todoList = new TodoList([
  {
    text: "Buy groceries",
    completed: false
  },
  {
    text: "Clean the house",
    completed: false
  },
  {
    text: "Go to the gym",
    completed: true
  }
]);

这将创建一个名为 todoList 的对象，它包含三个待办事项。

使用对象的方法

现在，我们可以使用 todoList 对象的方法来管理待办事项列表。例如：

todoList.addItem({
  text: "Learn JavaScript",
  completed: false
});

todoList.removeItem("Clean the house");

todoList.markItemAsCompleted("Buy groceries");

var completedItems = todoList.getCompletedItems();

结论

构造函数模式是 JavaScript 中创建和管理对象的最常见的方式之一。它使用 new 关键字来创建对象，并使用 prototype 属性来继承父对象的方法和属性。在本教程中，我们向您展示了如何使用构造函数模式来创建您的第一个项目。