JavaScript 工厂函数

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

June 07, 2023

3 min read

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

JavaScript 工厂函数介绍

工厂函数是返回新对象的函数。下面创建一个名为 person1 的对象：

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

console.log(person1.getFullName());

输出：

John Doe

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

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

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

console.log(person2.getFullName());

输出：

Jane Doe

在此示例中，person1 和 person2 对象具有相同的属性和方法。问题是您要创建的对象越多，您编写的重复代码就越多。

为避免再次复制相同的代码，您可以定义一个创建 person 对象的函数：

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

当一个函数创建并返回一个新对象时，它被称为工厂函数。这 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());

通过使用工厂函数，您可以创建任意数量的 person 对象在不编写需重复代码的情况下。

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

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

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

function createPerson(firstName, lastName) {
    return {
        firstName: firstName,
        lastName: lastName
    }
}

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

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

而在调用 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());

如果对象有很多方法，则此方方式不可扩展，因为您必须单独手动分配给它们。这就是需要使用 Object.create() 的原因。

Object.create 方法

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

Object.create(proto, [propertiesObject])

所以你可以使用 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;
}

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

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

console.log(person1.getFullName());
console.log(person2.getFullName());

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