Shulou(Shulou.com)06/03 Report--

This article shows you how to understand JavaScript's Mixin model, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

In JavaScript, we can only inherit a single object. There can be only one [[Prototype]] per object. And each class can only extend one other class.

But sometimes this setting can make people feel limited. For example, I have a StreetSweeper class and a Bicycle class, and now I want one of their mixin:StreetSweepingBicycle classes.

Or, we have a User class and an EventEmitter class to implement event generation (event generation), and we want to add the functionality of EventEmitter to User so that our users can trigger events (emit event).

There is a concept that can help us, called "mixins".

According to Wikipedia, mixin is a class that contains methods that can be used by other classes without inheritance.

In other words, mixin provides a way to implement specific behaviors, but instead of using it alone, we use it to add those behaviors to other classes.

1. A Mixin instance

The easiest way to construct a mixin in JavaScript is to construct an object with practical methods so that we can easily incorporate those practical methods into the prototype of any class.

For example, this mixin named sayHiMixin is used to add some "language features" to User:

/ / mixin let sayHiMixin = {sayHi () {alert (`this.name ${this.name} `);}, sayBye () {alert (`Bye ${this.name}`);}}; / / usage: class User {constructor (name) {this.name = name;}} / / copy method Object.assign (User.prototype, sayHiMixin); / / now User can say hello to new User ("Dude"). SayHi () / / Hello Dude!

There is no inheritance, only a simple method to copy. So User can inherit from another class, and it can also include mixin to "mix-in" other methods, like this:

Class User extends Person {/ /...} Object.assign (User.prototype, sayHiMixin)

Mixin can use inheritance internally.

For example, the sayHiMixin here inherits from sayMixin:

Let sayMixin = {say (phrase) {alert (phrase);}}; let sayHiMixin = {_ _ proto__: sayMixin, / / (or we can use Object.create to prototype here) sayHi () {/ / call the parent method super.say (`Hello ${this.name} `) / / (*)}, sayBye () {super.say (`Bye ${this.name} `); / / (*)}; class User {constructor (name) {this.name = name;}} / / copy method Object.assign (User.prototype, sayHiMixin); / / now User can say hello to new User ("Dude"). SayHi (); / / Hello Dude!

Note that calls to the parent class method super.say () within sayHiMixin (on the line marked (*)) look for the method in the prototype of mixin, not in class.

This is a schematic diagram (see the right side of the figure):

This is because the methods sayHi and sayBye were originally created in sayHiMixin. Therefore, even if they are copied, their internal [[HomeObject]] properties still refer to sayHiMixin, as shown in the figure above.

When super looks for a parent method in [[HomeObject]]. [[Prototype]], it means that it is searching for sayHiMixin. [[Prototype]], not User. [[Prototype]].

II. EventMixin

Now let's construct a mixin for practical use.

For example, an important feature of many browser objects is that they can generate events. Events are a good way to "broadcast information" to anyone in need. So let's construct a mixin so that we can easily add event-related functions to any class/object.

Mixin will provide .trigger (name, [... data]) methods to "generate an event" when something important happens. The name parameter (arguments) is the name of the event, and [... data] is the optional other parameter (arguments) with event data.

There is also the .on (name, handler) method, which adds a handler function as a listener (listener) for events with a given name. This method is called when an event with a given name is triggered, and the parameter (arguments) is obtained from the .trigger call.

…… There is also the .off (name, handler) method, which removes the handler listener (listener).

After adding the mixin, the object user will be able to generate the event "login" when the visitor logs in. Another object, such as calendar, may want to listen for such events to load calendars for people who log in.

Alternatively, when a menu item is selected, menu can generate a "select" event, and other objects can assign handlers to react to the event. and so on.

Here is the code:

Let eventMixin = {

/ * *

* subscription event, usage:

* menu.on ('select', function (item) {...}

, /

On (eventName, handler) {

If (! this._eventHandlers) this._eventHandlers = {}

If (! this._ eventHandlers [eventName]) {

This._ eventHandlers [eventName] = []

}

This._ eventHandlers [eventName] .push (handler)

}

/ * *

* unsubscribe, usage:

* menu.off ('select', handler)

, /

Off (eventName, handler) {

Let handlers = this._eventHandlers?. [eventName]

If (! handlers) return

For (let I = 0; I

< handlers.length; i++) { if (handlers[i] === handler) { handlers.splice(i--, 1); } } }, /** * 生成具有给定名称和数据的事件 * this.trigger('select', data1, data2); */ trigger(eventName, ...args) { if (!this._eventHandlers?.[eventName]) { return; // 该事件名称没有对应的事件处理程序（handler） } // 调用事件处理程序（handler） this._eventHandlers[eventName].forEach(handler =>

Handler.apply (this, args))

}

}

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

.on (eventName, handler)-specifies the function handler to run when an event with the corresponding name occurs. Technically, there is a _ eventHandlers property that stores the handler (handler) for each event name, where it adds the handler you just specified to the list.

.off (eventName, handler)-removes the specified function from the list of handlers.

.trigger (eventName,... args)-generate event: all event handlers (handler) in _ eventHandlers [eventName] are called and... args are passed to them as arguments.

Usage:

/ / create a class class Menu {choose (value) {this.trigger ("select", value);}} / add mixin Object.assign (Menu.prototype, eventMixin) with event-related methods; let menu = new Menu (); / / add an event handler (handler) that is called when selected: menu.on ("select", value = > alert (`Value selected: ${value} `)) / / trigger event = > run the above event handler (handler) and display: / / selected value: 123 menu.choose ("123")

Now, if we want any code to react to menu selections, we can use menu.on (...) To monitor.

Using eventMixin, you can easily add such behavior to multiple classes we want without affecting the inheritance chain.

III. Summary

Mixin-is a general object-oriented programming term: a class that contains methods from other classes.

Some other programming languages allow multiple inheritance. JavaScript does not support multiple inheritance, but you can implement mixin by copying methods into the prototype.

We can use mixin as a way to extend classes by adding a variety of behaviors.

If Mixins accidentally overrides the methods of an existing class, they can become a point of conflict. Therefore, you should usually carefully consider the naming method of mixin to minimize the possibility of such conflicts.

The above is how to understand JavaScript's Mixin model. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.