es6 使用修飾器實現Mixin模式

在修飾器的基礎上，可以實現mixin模式。所謂mixin模式，就是物件繼承的一種替代方案，中文譯為「混入」（mix in），意為在乙個物件之中混入另外乙個物件的方法。

請看下面的例子。

const
foo=

};
class

myclass
{}
object

.assign
(myclass
.prototype
,foo
);
let obj 

=new
myclass
();
obj

.foo
()// 'foo'

上面**之中，物件foo有乙個foo方法，通過object.assign方法，可以將foo方法「混入」myclass類，導致myclass的例項obj物件都具有foo方法。這就是「混入」模式的乙個簡單實現。

下面，我們部署乙個通用指令碼mixins.js，將 mixin 寫成乙個修飾器。

export
function
mixins
(...
list
);
}

然後，就可以使用上面這個修飾器，為類「混入」各種方法。

import
from
'./mixins'
;
const

foo=

};
@mixins

(foo
)
class

myclass
{}
let obj 

=new
myclass
();
obj

.foo
()// "foo"

通過mixins這個修飾器，實現了在myclass類上面「混入」foo物件的foo方法。

class myclass extends mybaseclass

上面**中，es6myclass繼承了mybaseclass。如果我們想在myclass裡面「混入」乙個foo方法，乙個辦法是在myclass和mybaseclass之間插入乙個混入類，這個類具有foo方法，並且繼承了mybaseclass的所有方法，然後myclass再繼承這個類。

let 
mymixin=(
superclass
)=>
class
extends
superclass 

};

上面**中，mymixin是乙個混入類生成器，接受superclass作為引數，然後返回乙個繼承superclass的子類，該子類包含乙個foo方法。

接著，目標類再去繼承這個混入類，就達到了「混入」foo方法的目的。

class
myclass
extends
mymixin
(mybaseclass
)
let c 

=new
myclass
();
c

.foo
();// "foo from mymixin"

如果需要「混入」多個方法，就生成多個混入類。

class
myclass
extends
mixin1
(mixin2
(mybaseclass
))

這種寫法的乙個好處，是可以呼叫super，因此可以避免在「混入」過程中覆蓋父類的同名方法。

let 
mixin1=(
superclass
)=>
class
extends
superclass 

};
let 

mixin2=(
superclass
)=>
class
extends
superclass 

};
class

s
}
class

c extends
mixin1
(mixin2(s
))
}

上面**中，每一次混入發生時，都呼叫了父類的super.foo方法，導致父類的同名方法沒有被覆蓋，行為被保留了下來。

new
c().
foo()
// foo from c
// foo from mixin1
// foo from mixin2
// foo from s

es6 使用修飾器實現Mixin模式

ES6裡的修飾器Decorator

ES6裡的修飾器Decorator

es6通過Mixin模擬多繼承

es6 使用修飾器實現Mixin模式

ES6裡的修飾器Decorator

ES6裡的修飾器Decorator

es6通過Mixin模擬多繼承

相關推薦