混合模式

作者:Choi Yang

发表于:2023-02-22

更新于:4 个月前

字数统计:949 字

阅读时长:3 分钟

阅读量:

mixin 是一个对象，我们可以使用它向另一个对象或类添加可重用的功能，而不需要使用继承的方式。

注意，我们不能单独使用 mixin：它们的唯一目的是在没有继承的情况下向对象或类添加功能。

mixin 使用

假设对于我们的应用程序，我们需要创建多个狗。然而，我们创建的狗只有一个 name 属性，如下代码所示：

class Dog {
  constructor(name) {
    this.name = name
  }
}

一只狗除开拥有名字外，它应该还会汪汪叫，摇尾巴，玩！

我们可以创建一个 mixin，为我们提供 bark、wagTail 和 play 属性，而不是直接添加到 Dog 中。

开头咱们说过，一个 mixin 就是一个对象，因此我们创建一个名为 dogFunctionality 的对象。

const dogFunctionality = {
  bark: () => console.log('Woof!'),
  wagTail: () => console.log('Wagging my tail!'),
  play: () => console.log('Playing!'),
}

我们可以通过 Object.assign 方法将上述 dogFunctionality 对象添加到 Dog 的原型中，也就是 Dog.prototype。

class Dog {
  constructor(name) {
    this.name = name
  }
}

const dogFunctionality = {
  bark: () => console.log('Woof!'),
  wagTail: () => console.log('Wagging my tail!'),
  play: () => console.log('Playing!'),
}

Object.assign(Dog.prototype, dogFunctionality)

那么在实例化 Dog 后，每一个实例对象都能访问 Dog 上的方法，包括在原型上的方法，因为我们可以通过原型链的方式去往上找。

不妨来示例化一下吧，new 出来一个宠物，名叫做 pet1，我们来访问一下上述新增加的方法试试：

const pet1 = new Dog('Daisy')

pet1.name // Daisy
pet1.bark() // Woof!
pet1.play() // Playing!

会发现能正常使用，那么我们通过 mixin 方式可以轻松将自定义的一些方法添加到类或对象当中，不需要使用继承的方式。

mixin 本身也可以继承

虽然我们可以在没有继承的情况下使用mixin添加方法，但 mixin 本身也可以使用继承。

比如说，大多数哺乳动物(除了海豚，也许还有其他物种)能走路和睡觉，而狗也是哺乳动物，应该也是要会走路和睡觉。

下面我们再创建一个名为 animalFunctionality 的 mixin 添加走路和睡觉的方法。

const animalFunctionality = {
  walk: () => console.log('Walking!'),
  sleep: () => console.log('Sleeping!'),
}

我们可以使用 Object.assign 将这些属性添加到 dogFunctionality 原型中。在上述例子中，目标对象是 dogFunctionality。

const animalFunctionality = {
  // xxx
}

const dogFunctionality = {
  // xxx
}

Object.assign(dogFunctionality, animalFunctionality)
Object.assign(Dog.prototype, dogFunctionality)

Demo

那么我们可以 new 来试试，又新增了 walk 和 sleep 方法。

日常编码

日常编码中的一个 mixin 例子就是浏览器环境中的 Window 对象了，它从 WindowOrWorkerGlobalScope 和 WindowEventHandlers 中混合了很多属性方法。

比如，我们常用的一些 setTimeout 、setInterval、indexedDB 和 isSecureContext。

由于它是一个 mixin，因此仅用于向对象去添加功能，而不能创建 WindowOrWorkerGlobalScope 类型的对象，我们来看看下方的例子：

可以发现，我们直接去访问 WindowOrWorkerGlobalScope 或者 WindowEventHandlers 是访问不到的。

React (ES6 前)

在引入 ES6 类之前，mixin 经常被用来为 React 组件添加功能。React团队不鼓励使用mixin，因为它很容易给组件增加不必要的复杂性，使其难以维护和重用。

React 团队鼓励使用更高阶的组件，这些组件现在通常可以被 Hooks 取代。

结语

mixin 允许我们轻松地向对象添加属性方法，而不需要将功能注入到对象的原型中。因为修改一个对象的原型被认为是一种糟糕的做法，它会导致原型污染和对于属性方法来源的不确定性。

Contributors

Choi Yang