Mixin是JavaScript中用的最普遍的模式,可以就任意一个对象的全部或部分属性拷贝到另一个对象上。从提供的接口来看,有的是对对象的操作,有的是对类的操作。对类的操作又称为掺元类(Mixin classes)几乎所有流行类库都会有Mixin的实现。

比如说:

   jQuery的$.extend 操作对象,将其它对象的属性方法拷贝到目标对象。

  RequireJS的私有的mixin 操作对象,将其它对象的属性方法拷贝到目标对象。

  Underscore.js 的 _.extend,把第二个参数起的所有对象都拷贝到第一个参数

1.掺合对象 (Mixin object)

先看最简单的mixin实现

function mixin(dest, src) {
for (var key in src) {
dest[key] = src[key]
}
} //使用下 var person = {name: 'yudi', age: 24}
var obj = {}
mixin(obj, person)
console.log(obj) // {name: 'yudi', age: 24}

上面的已经将person的所有属性拷贝到obj上了。 但有个缺陷,如果obj上已经有了name: 'rain',那么会被person覆盖。因此需要加个判断,如果dest上已经存在了,就不拷贝。

function mixin(dest, src) {
for (var key in src) {
if (!dest[key]) {
dest[key] = src[key]
}
}
}
//使用
var person = {name: 'yudi', age: 24}
var obj = {name: 'rain'}
mixin(obj, person)
console.log(obj) // Object { name="yudi", age=24}

当然,你可以提供更强大,灵活的Mixin,比如可以将任意多个对象掺合到目标对象

function mixin(dest /*, Any number of objects */) {
var sources = Array.prototype.slice.call(arguments, 1)
for (var i=0; i<sources.length; i++) {
var src = sources[i]
for (var key in src) {
if (!dest[key]) {
dest[key] = src[key]
}
}
}
}
//使用
var person = {name: 'John', age: 29, toString: function(){return 'aa'}}
var permission = {open: 1}
var obj = {name: 'Jack'}
mixin(obj, person, permission)
console.log(obj) // Object { name="Jack", age=29, open=1}

2.掺和类(Mixin Classes)

有的翻译过来叫做掺元类,它是一种不需要用到严格的继承就可以复用代码的一种技术。如果多个类想用到某个类的某个方法,可以通过扩充这些类的原型已达到共享该方法。比如先创建一个包含各种通用方法的类,然后让其它类扩充于它。这个包含通用方法的类就叫掺元类。多数时候它不会直接实例化或调用,而是作为其它类的模板用于扩充。

先看最简单的实现

// 工具方法,实现mixin
function augment(destClass, srcClass) {
var destProto = destClass.prototype
var srcProto = srcClass.prototype
for (var method in srcProto) {
if (!destProto[method]) {
destProto[method] = srcProto[method]
}
}
} function Person() {} // 具有两个方法的类,用于mixin
Person.prototype.getName = function() {}
Person.prototype.getAge = function() {} function Student() {} // 没有任何方法的类 augment(Student, Person) // 调用,拷贝 var s1 = new Student()
console.log(s1) // Student { getName=function(), getAge=function()}

工具函数augment接受两个参数,都是函数类型(类),第一个类会从第二个类的原型上继承其方法。即使用Person类扩充了Student类。

我们知道,某些语言如C++/Python允许子类继承多个父类,但在JavaScript中是不允许的,因为一个构造器只有一个原型对象,不过这可以通过多个掺元类的方式实现扩充,这实际是一种变相多继承的实现。和mixin方法类似,修改下augment方法。

function augment(destClass, /*, Any number of classes */) {
var classes = Array.prototype.slice.call(arguments, 1)
for (var i=0; i<classes.length; i++) {
var srcClass = classes[i]
var srcProto = srcClass.prototype
var destProto = destClass.prototype
for (var method in srcProto) {
if (!destProto[method]) {
destProto[method] = srcProto[method]
}
}
}
} //这样就实现了多继承。

有时不想继承所有的方法,指向拷贝指定的方法,增加一个参数methods

function augment(destClass, srcClass, methods) {
var srcProto = srcClass.prototype
var destProto = destClass.prototype
for (var i=0; i<methods.length; i++) {
var method = methods[i]
if (!destProto[method]) {
destProto[method] = srcProto[method]
}
}
}
function Person() {}
Person.prototype.getName = function() {}
Person.prototype.setName = function() {}
Person.prototype.getAge = function() {}
Person.prototype.setAge = function() {} function Student() {} augment(Student, Person, ['getName', 'setName'])
var s1 = new Student()
console.log(s1) // Student { getName=function(), setName=function()}

  

掺合模式(Mixin)的更多相关文章

  1. javascript模式——Mixin

    Mixin是一种扩展收集功能的方式,能提高代码的复用率. 在javascript中,原型可以继承于其它对象的原型,并且可以为任意数量的实例定义属性.可以利用这一点来促进函数的复用. 下面一段代码就是将 ...

  2. Matlab混入模式(Mixin)

    Mixin是一种类,这种类包含了其他类要使用的特性方法,但不必充当其他类的父类.Matlab无疑是支持多继承的.我们可以利用 Matlab 的这种特性,实现一种叫做 Mixin 的类.MixIn的目的 ...

  3. Mixin模式

    Mixin是JavaScript中用的最普遍的模式,几乎所有流行类库都会有Mixin的实现. Mixin是掺合,混合,糅合的意思,即可以就任意一个对象的全部或部分属性拷贝到另一个对象上. 从提供的接口 ...

  4. 设计模式 Mixin (混入类)

    混入(mix-in)类代表类之间的另一种关系.在C++中,混入类的语法类似于多重继承,但是语义完全不同.混入类回答"这个类还可以做什么"这个问题,答案经常以"-able& ...

  5. Python的Mixin

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826299.html 一:Mixin模式 Mixin编程是一种开发模式,是一种 将多个不同类中的功能单元的 ...

  6. Python SocketServer源码分析

    1      XXXServer 1.1      BaseSever 提供基础的循环等待请求的处理框架.使用serve_forever启动服务,使用shutdown停止.同时提供了一些可自行扩展的方 ...

  7. JavaScript的学习--JavaScript设计模式的总结

    这篇博客只是自己对设计模式的理解的备忘~ 看完了<JavaScript设计模式>这本书,一直没有写博客记录一下,最近抽出时间来重读了一下,就顺便记录一下~ 如果你只是想粗略了解一下Java ...

  8. ES6(六) --- Symbol

    概述: ES5 中属性名都是字符串,这容易就造成命名的冲突,特别是在混入模式(mixin模式)下.为解决这个问题ES6 引入了Symbol, Symbol是一种新的基本数据类型,表示独一无二的值!   ...

  9. Python设计模式 - 基础 - 封装 & 继承 & 多态

    面向对象的核心是对象,世间万物都可以看作对象,任何一个对象都可以通过一系列属性和行为来描述,可以包含任意数量和类型的数据或操作.类是用来描述具有相同属性和方法的所有对象的集合.类通常是抽象化的概念,而 ...

随机推荐

  1. 反汇编调试Android

    https://code.google.com/p/android/issues/detail?id=73076 http://my.unix-center.net/~Simon_fu/?p=527 ...

  2. .net项目常用的库

    1.单元测试框架 Microsoft.VisualStudio.QualityTools.UnitTestFramework.dll 2.Entity Framework 框架

  3. javascript获取文件后缀名

    javascript获取文件后缀名:在需要验证文件格式的时候,首先就要获得文件的格式,下面是一个通过正则表达式获取文件后缀名的一个简单实例. function validate(){ var impo ...

  4. 牛顿迭代,多项式求逆,除法,开方,exp,ln,求幂

    牛顿迭代 若 \[G(F_0(x))\equiv 0(mod\ x^{2^t})\] 牛顿迭代 \[F(x)\equiv F_0(x)-\frac{G(F_0(x))}{G'(F_0(x))}(mod ...

  5. javascript运算符之==和===

    1.== :判断两个数是否相等,在比较之前会自动转化类型再做比较.为确定两个运算数是否相等,这两个运算符都会进行类型转换. 执行类型转换的规则如下: 1.如果一个运算数是 Boolean 值,在检查相 ...

  6. 理解LSTM/RNN中的Attention机制

    转自:http://www.jeyzhang.com/understand-attention-in-rnn.html,感谢分享! 导读 目前采用编码器-解码器 (Encode-Decode) 结构的 ...

  7. idea打jar包

    昨天碰到个问题:使用idea打成jar包,但是在测试环境一直报错.参考: http://blog.csdn.net/aotian16/article/details/52198378 之后发现原来的j ...

  8. js结构化命名的思考

    var koooke ={androidShare:{ show : function() {alert(1000)}}};koooke.androidShare.show(); 以上JS是偶然缩写. ...

  9. angular2 应用 不同的environment 进行 build/serve

    文件目录如下: 命令行使用:ng serve --e=dev/offline/prod build 不同,像上面那样写没用.必须后面再加--prod 如: ng build --e=offline - ...

  10. Thread.Join()的详解

    什么是进程?当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的. 什么是线程?线程是程序中的一个执行流,每个线程都有自己的专有寄 ...