跳至主要內容

工厂模式

patternsreadingdesign patternvanillafactory-pattern大约 2 分钟约 521 字

通过工厂模式,我们可以使用工厂函数来创建新对象。当一个函数在不使用 new 关键字的情况下返回一个新对象时,它就是一个工厂函数!

假设我们的应用程序需要许多用户。我们可以创建带有名、姓和电子邮件属性的新用户。工厂函数还会为新创建的对象添加一个 fullName 属性,并返回 namelastName

const createUser = ({ firstName, lastName, email }) => ({
  firstName,
  lastName,
  email,
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
})

完美!现在,我们可以通过调用 createUser 函数轻松创建多个用户。

<p>打开调试控制台查看输出</p>
const createUser = ({ firstName, lastName, email }) => ({
  firstName,
  lastName,
  email,
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
})

const user1 = createUser({
  firstName: 'John',
  lastName: 'Doe',
  email: 'john@doe.com'
})

const user2 = createUser({
  firstName: 'Jane',
  lastName: 'Doe',
  email: 'jane@doe.com'
})

console.log(user1)
console.log(user2)

如果我们要创建相对复杂且可配置的对象,工厂模式就会非常有用。可能发生的情况是,键和值的值取决于特定的环境或配置。使用工厂模式,我们可以轻松创建包含自定义键和值的新对象!

const createObjectFromArray = ([key, value]) => ({
  [key]: value
})

createObjectFromArray(['name', 'John']) // { name: "John" }

优点

当我们需要创建多个共享相同属性的较小对象时,工厂模式非常有用。工厂函数可以根据当前环境或用户特定配置轻松返回自定义对象。

缺点

在 JavaScript 中,工厂模式不过是一个不使用 new 关键字就能返回对象的函数。ES6 箭头函数 允许我们创建小型工厂函数,每次都隐式返回一个对象。

const createDog = (name, breed) => ({ name, breed })

不过,在许多情况下,创建新实例比每次创建新对象更节省内存。

class User {
  constructor(firstName, lastName, email) {
    this.firstName = firstName
    this.lastName = lastName
    this.email = email
  }

  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

const user1 = new User({
  firstName: 'John',
  lastName: 'Doe',
  email: 'john@doe.com'
})

const user2 = new User({
  firstName: 'Jane',
  lastName: 'Doe',
  email: 'jane@doe.com'
})

参考