JavaScript 工厂函数 - JavaScript 教程

摘要: 在本教程中，您将了解 JavaScript 工厂函数，它们是返回对象的函数。

JavaScript 中工厂函数简介

工厂函数是一个函数，它返回一个新的对象。以下创建一个名为 person1 的 person 对象

let person1 = {
  firstName: 'John',
  lastName: 'Doe',
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  },
};

console.log(person1.getFullName());Code language: JavaScript (javascript)

输出

John Doe

person1 对象有两个属性：firstName 和 lastName，以及一个返回全名的 getFullName() 方法。

假设您需要创建另一个类似的对象，名为 person2，您可以复制以下代码

let person2 = {
  firstName: 'Jane',
  lastName: 'Doe',
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  },
};

console.log(person2.getFullName());Code language: JavaScript (javascript)

输出

Jane Doe

在此示例中，person1 和 person2 对象具有相同的属性和方法。

问题是，您要创建的对象越多，重复的代码就越多。

为了避免一遍又一遍地复制相同的代码，您可以定义一个创建 person 对象的函数

function createPerson(firstName, lastName) {
  return {
    firstName: firstName,
    lastName: lastName,
    getFullName() {
      return firstName + ' ' + lastName;
    },
  };
}Code language: JavaScript (javascript)

当一个函数创建并返回一个新对象时，它被称为工厂函数。createPerson() 是一个工厂函数，因为它返回一个新的 person 对象。

以下显示了如何使用 createPerson() 工厂函数创建两个对象 person1 和 person2

function createPerson(firstName, lastName) {
  return {
    firstName: firstName,
    lastName: lastName,
    getFullName() {
      return firstName + ' ' + lastName;
    },
  };
}

let person1 = createPerson('John', 'Doe');
let person2 = createPerson('Jane', 'Doe');

console.log(person1.getFullName());
console.log(person2.getFullName());Code language: JavaScript (javascript)

通过使用工厂函数，您可以创建任意数量的 person 对象，而无需重复代码。

当您创建对象时，JavaScript 引擎会为其分配内存。如果您创建许多 person 对象，JavaScript 引擎需要大量内存空间来存储这些对象。

但是，每个 person 对象都包含相同 getFullName() 方法的副本。这不是有效的内存管理。

为了避免在每个对象中重复相同的 getFullName() 函数，您可以从 person 对象中删除 getFullName() 方法

function createPerson(firstName, lastName) {
    return {
        firstName: firstName,
        lastName: lastName
    }
}Code language: JavaScript (javascript)

并将此方法移动到另一个对象

var personActions = {
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  },
};Code language: JavaScript (javascript)

在对 person 对象调用 getFullName() 方法之前，您可以将 personActions 对象的方法分配给 person 对象，如下所示

let person1 = createPerson('John', 'Doe');
let person2 = createPerson('Jane', 'Doe');

person1.getFullName = personActions.getFullName;
person2.getFullName = personActions.getFullName;

console.log(person1.getFullName());
console.log(person2.getFullName());Code language: JavaScript (javascript)

如果对象有许多方法，这种方法不可扩展，因为您必须手动分别分配它们。这就是 Object.create() 方法发挥作用的原因。

Object.create() 方法

Object.create() 方法使用现有的对象作为新对象的原型创建一个新对象

Object.create(proto, [propertiesObject])Code language: CSS (css)

因此，您可以按如下方式使用 Object.create()

var personActions = {
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  },
};

function createPerson(firstName, lastName) {
  let person = Object.create(personActions);
  person.firstName = firstName;
  person.lastName = lastName;
  return person;
}Code language: JavaScript (javascript)

现在，您可以创建 person 对象并调用 personActions 对象的方法

let person1 = createPerson('John', 'Doe');
let person2 = createPerson('Jane', 'Doe');

console.log(person1.getFullName());
console.log(person2.getFullName());
Code language: JavaScript (javascript)

代码运行良好。但是，在实践中，您很少使用工厂函数。相反，您使用类或构造函数/原型模式。

摘要

工厂函数是一个返回新对象的函数。
使用 Object.create() 创建一个使用现有对象作为原型的对象。

本教程对您有帮助吗？