es6 Decorator類的修飾器

2021-08-15 08:46:36 字數 3859 閱讀 8274

許多物件導向的語言都有修飾器（decorator）函式，用來修改類的行為。目前，有乙個提案將這項功能，引入了 ecmascript。

@testable


class


mytestableclass




function


testable


(target


)


mytestableclass


.istestable 


// true
上面**中，es6@testable就是乙個修飾器。它修改了mytestableclass這個類的行為，為它加上了靜態屬性istestable。testable函式的引數target是mytestableclass類本身。

基本上，修飾器的行為就是下面這樣。

@decorator


class


a {}


// 等同於


class


a {}


a 


=decorator(a


)||a;
也就是說，修飾器是乙個對類進行處理的函式。修飾器函式的第乙個引數，就是所要修飾的目標類。

function


testable


(target


)
上面**中，testable函式的引數target，就是會被修飾的類。

如果覺得乙個引數不夠用，可以在修飾器外面再封裝一層函式。

function


testable


(istestable


)


}


@testable


(true


)


class


mytestableclass


{}


mytestableclass


.istestable 


// true


@testable


(false


)


class


myclass


{}


myclass


.istestable 


// false
上面**中，修飾器testable可以接受引數，這就等於可以修改修飾器的行為。

注意，修飾器對類的行為的改變，是**編譯時發生的，而不是在執行時。這意味著，修飾器能在編譯階段執行**。也就是說，修飾器本質就是編譯時執行的函式。

前面的例子是為類新增乙個靜態屬性，如果想新增例項屬性，可以通過目標類的prototype物件操作。

function


testable


(target


)


@testable


class


mytestableclass


{}


let obj 


=new


mytestableclass


();


obj


.istestable 


// true
上面**中，修飾器函式testable是在目標類的prototype物件上新增屬性，因此就可以在例項上呼叫。

下面是另外乙個例子。

// mixins.js


export


function


mixins


(...


list


)


}


// main.js


import


from


'./mixins'


const


foo=




};


@mixins


(foo


)


class


myclass


{}


let obj 


=new


myclass


();


obj


.foo


()// 'foo'
上面**通過修飾器mixins，把foo類的方法新增到了myclass的例項上面。可以用object.assign()模擬這個功能。

const


foo=




};


class


myclass


{}


object


.assign


(myclass


.prototype


,foo


);


let obj 


=new


myclass


();


obj


.foo


()// 'foo'
實際開發中，react 與 redux 庫結合使用時，常常需要寫成下面這樣。

class


myreactcomponent


extends


react


.component


{}


export


default


connect


(mapstatetoprops


,mapdispatchtoprops


)(myreactcomponent


);
有了裝飾器，就可以改寫上面的**。

@connect


(mapstatetoprops


,mapdispatchtoprops


)


export


default


class


myreactcomponent


extends


react


.component


{}
相對來說，後一種寫法看上去更容易理解。

ES6裡的修飾器Decorator

修飾器 decorator 是乙個函式，用來修改類的行為。es6 引入了這項功能，目前 babel 轉碼器已經支援decorator 首先，安裝babel core和babel plugin transform decorators。由於後者包括在babel preset stage 0之中，所以改...

es6中的裝飾器decorator

裝飾器是一種與類 class 相關的語法，用來注釋或修改類和類方法。可以看下面的例子 testable class mytestableclass function testable target mytestableclass.istestable true所以，實際上 decorator cla...

ES6裡的修飾器Decorator

修飾器 decorator 是乙個函式，用來修改類的行為。es6 引入了這項功能，目前 babel 轉碼器已經支援decorator 首先，安裝babel core和babel plugin transform decorators。由於後者包括在babel preset stage 0之中，所以改...