（JavaScript）Mixin 模式

Mixin 模式

在 JavaScript 中，我们只能继承单个对象。每个对象只能有一个 [[Prototype]]。并且每个类只可以扩展另外一个类。
mixin 是一个包含可被其他类使用而无需继承的方法的类。

一个 Mixin 实例

最简单的构造mixin方式：构造一个拥有实用方法的对象

// 创建一个对象来构造minin
let sayHiMixin = {sayHi() {alert(`Hello ${this.name}`);},sayBye() {alert(`Bye ${this.name}`);}
};// 用法：
class User {constructor(name) {this.name = name;}
}// 拷贝方法
Object.assign(User.prototype, sayHiMixin);// 现在 User 可以打招呼了
new User("Dude").sayHi(); // Hello Dude!

上面的代码只包含简单方法的拷贝。所以User还可以继承另一个类。mixin和继承可以共存。

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

Minin 可以在自己的内部使用继承

let sayMixin = {say(phrase) {alert(phrase);}
};let sayHiMixin = {__proto__: sayMixin, // (或者，我们可以在这儿使用 Object.create 来设置原型)sayHi() {// 调用父类方法super.say(`Hello ${this.name}`); // (*)},sayBye() {super.say(`Bye ${this.name}`); // (*)}
};class User {constructor(name) {this.name = name;}
}// 拷贝方法
Object.assign(User.prototype, sayHiMixin);// 现在 User 可以打招呼了
new User("Dude").sayHi(); // Hello Dude!

注意：

当把sayHiMixin中的方法复制到User.prototype中去的时候，[[Homeobject]]内部属性仍旧引用的是sayHiMixin。也就是表面上是new User("Dude").sayHi();实际上是 sayHiMixin.sayHi()。所以，当super在[[HomeObject]].[[Prototype]] 中寻找父方法时，意味着它搜索的是 sayHiMixin.[[Prototype]]，而不是 User.[[Prototype]]。

EventMixin

构造一个mixin，将与事件相关的函数添加到任意 class/object 中

Mixin提供的方法

.trigger(name, [...data])：在发生重要事情的时候生成一个事件
.on(name, handler)：为具有给定名称的事件添加了 handler 函数作为监听器，当具有给定 name 的事件触发时将调用该方法，并从 .trigger 调用中获取参数。
.off(name, handler)：删除 handler 监听器

let eventMixin = {/*** 订阅事件，用法：*  menu.on('select', function(item) { ... }*  _eventHandlers属性：储存每个事件名称对应的处理程序（handler）*/on(eventName, handler) {//如果还没有_eventHandlers属性，就创建一个if (!this._eventHandlers) this._eventHandlers = {};//如果这个名称的事件不存在，就创建一个if (!this._eventHandlers[eventName]) {this._eventHandlers[eventName] = [];}//在_eventHandlers属性添加这个名称的事件对应的处理程序this._eventHandlers[eventName].push(handler);},/*** 取消订阅，用法：*  menu.off('select', handler)* 从处理程序列表中删除指定的函数*/off(eventName, handler) {//this._eventHandlers如果存在，获取它的[eventName]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));}
};

用法：

// 创建一个 class
class Menu {choose(value) {this.trigger("select", value);}
}
// 添加带有事件相关方法的 mixin
Object.assign(Menu.prototype, eventMixin);let menu = new Menu();// 添加一个事件处理程序（handler），在被选择时被调用：
menu.on("select", value => alert(`Value selected: ${value}`));// 触发事件 => 运行上述的事件处理程序（handler）并显示：
// 被选中的值：123
menu.choose("123");

（JavaScript）Mixin 模式相关推荐

Js的Mixin 模式
Mixin 模式在 JavaScript 中,我们只能继承单个对象.每个对象只能有一个 [[Prototype]].并且每个类只可以扩展另外一个类. 但是有些时候这种设定(译注:单继承)会让人感到受 ...
ES6 （二十二）Class 的继承、extends关键字、super 关键字（函数调用（constructor）、对象（父类原型对象））、原型对象(原型链)、Mixin 模式
ES6 (二十二)Class 的继承.extends关键字.super 关键字(函数调用(constructor).对象(父类原型对象)).原型对象(原型链).Mixin 模式文章目录 ES6 (二 ...
是时候开始使用JavaScript严格模式了怎样启用javascri
E是时候开始使用JavaScript严格模式了怎样启用javascriCMAScript5将严格模式(strictmode)引入了Javascript中,目的是允许开发人员能够选择"更好&q ...
JQuery日记6.5 Javascript异步模式（一）
理解力JQuery前实现异步队列,有必要理解javascript异步模式. Javascript异步其实并不严重格异步感,js使某些片段异步方式在将来运行,流不必等待继续向下进行. 在多线程的语言中最 ...
javascript严格模式
javascript 严格模式为什么使用严格模式: 消除javascript语法的一些不合理,不严谨之处,减少一些怪异之处: 消除代码运行的一些不安全之处,保证代码运行的安全提高编译器的效率,增加 ...
window 程序报错自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
mixin模式 python_总结了 90 条写 Python 程序的建议
这是一名5年经验的 Python小伙伴总结的90条python建议,如果你也在学pythpn,准备要学习python,希望这篇文章对你有用. 一.首先建议1.理解Pythonic概念--详见Pyth ...
浅谈python MRO与Mixin模式
MRO(Method Resolution Order) In object-oriented programming languages with multiple inheritance, the ...
es6 使用修饰器实现Mixin模式
使用修饰器实现Mixin模式在修饰器的基础上,可以实现Mixin模式.所谓Mixin模式,就是对象继承的一种替代方案,中文译为"混入"(mix in),意为在一个对象之中混入另外 ...
es6 Mixin 模式的实现
Mixin 模式的实现 ES6 Mixin 指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口.它的最简单实现如下. const a = { a: 'a' }; const b = { b: ...

（JavaScript）Mixin 模式

Mixin 模式

一个 Mixin 实例

注意：

EventMixin

（JavaScript）Mixin 模式相关推荐

最新文章

热门文章