Mixins

JavaScript Mixins

In JavaScript, it is possible to inherit only from one object. There can be a single [[Prototype]] for an object. A class can extend only one class. （在JavaScript中，只能从一个对象继承。对象可以有单个[[Prototype]]。一个类只能扩展一个类。）

But, at times it can meet limiting. For example, you have a StreetSweeper class and a class Bike and intend to mix them and have StreetSweepingBicycle. In this case, you can use the concept, called “mixins”. （但是，有时它可能会遇到限制。例如，您有一个StreetSweeper类和一个Bike类，并打算将它们混合并使用StreetSweepingBicycle。在这种情况下，您可以使用名为“mixins”的概念。）

A mixin can be described as a class, which contains methods that can be used by other classes without inheriting from it. That is, mixin provides methods implementing a specific behavior. It is not used alone but for adding the behavior to other classes. （混入可以被描述为一个类，其中包含可以被其他类使用而不从中继承的方法。也就是说， mixin提供了实现特定行为的方法。它不是单独使用，而是用于将行为添加到其他类。）

Discovering Mixins on Examples #

Discovering Mixins on Examples （在示例中发现Mixins）

In JavaScript, the easiest way of implementing a mixin is to create an object with efficient methods, so that one could merge them to a prototype of any class. （在JavaScript中，实现混入最简单的方法是使用高效方法创建对象，以便可以将它们合并到任何类的原型中。）

In the example below, sayWelcomeMixin is applied for adding “speech” to the user:

// mixin
let sayWelcomeMixin = {
 sayWelcome() {
   console.log(`Welcome ${this.userName}`);
 },
 sayBye() {
   console.log(`Bye ${this.userName}`);
 }
};
class User {
 constructor(userName) {
   this.userName = userName;
 }
}
// copy the methods
Object.assign(User.prototype, sayWelcomeMixin);
// now User can say welcome
new User("John").sayWelcome(); // Welcome John!

So, there is no inheritance just copying. Hence, User can inherit from another class, including the mixin to mix in additional methods, as follows:

class User extends Person {
 // ...
}
Object.assign(User.prototype, sayWelcomeMixin);

Also, mixins can benefit from inheritance between themselves. （此外，混合子可以从它们之间的继承中受益。）

Let’s see the following case:

let sayMixin = {
 say(phrase) {
   console.log(phrase);
 }
};
let sayWelcomeMixin = {
 __proto__: sayMixin, //(or Object.create can be used to set the prototype here)
 sayWelcome() {
   // calling the parent method
（//调用父方法）
   super.say(`Welcome ${this.name}`);
 },
 sayBye() {
   super.say(`Bye ${this.name}`); 
 }
};
class User {
 constructor(name) {
   this.name = name;
 }
}
// copy the methods
Object.assign(User.prototype, sayWelcomeMixin);
// now User can say hi
new User("John").sayWelcome(); // Welcome John!

Consider that calling to the parent method super.say() from sayWelcomeMixin. （考虑从sayWelcomeMixin调用父方法super.say ()。）

EventMixin #

EventMixin

An essential feature of many browser objects is the ability to generate events. Let’s try to create a mixin that will allow to easily add event-related functions to any object/class. （许多浏览器对象的一个基本功能是能够生成事件。 让我们尝试创建一个混入，以便轻松地将事件相关函数添加到任何对象/类。）

Mixin provides the .trigger(name, […data]) method for generating an event when an important thing happens to it. The name of the event is denoted by the name argument. It is followed by additional arguments. （Mixin提供了.trigger (name, [… data])方法，用于在重要事件发生时生成事件。事件的名称由name参数表示。然后是其他参数。）

Also, the method .on(name, handler), adding the handler function as the listener to events with the given name. It is called when an event with a given name is occurs, getting the arguments from the .trigger call. and, finally, the .off(name, handler) method deletes the handler listener. （此外，方法.on (name, handler) ，将处理程序函数添加为具有给定名称的事件的侦听器。当发生具有给定名称的事件时调用它，从.trigger调用获取参数。最后， .off (name, handler)方法删除处理程序侦听器。）

After adding the mixin, an event “login” is generated by the object user whenever the visitor logs in. （添加mixin后，每当访问者登录时，对象用户都会生成一个事件“login”。）

A menu is capable of generating the “select” event when an item of menu is selected. Other objects can assign handlers for reacting to that event. （菜单能够在选择菜单项时生成“SELECT”事件。其他对象可以分配处理程序来对该事件做出反应。）

Summary #

Summary （概要）

Mixin is considered a generic object-oriented programming term. It is a class containing methods for other classes. （Mixin被认为是一个通用的面向对象编程术语。它是一个包含其他类的方法的类。）

Multiple inheritances aren’t supported by JavaScript, but mixins may be performed via copying methods into prototype. Mixins can also be used for augmenting a class by adding multiple behaviors such as event-handling. （JavaScript不支持多重继承，但可以通过将方法复制到原型中来执行混入。 Mixin还可用于通过添加多个行为（如事件处理）来增强类。）

Sometimes mixins can become a point of conflict (for instance, when they accidentally overwrite the existing method of the class). Therefore, it would be best if you thought well about naming methods of a mixin to minimize the risks. （有时，混入可能成为冲突点（例如，当它们意外覆盖类的现有方法时）。因此，您最好仔细考虑混合物的命名方法，以尽量减少风险。）