一直沒理解Decorator的作用栖茉，但最近在很多框架和庫中看到它的身影篮绿，尤其是React和Redux，還有mobx中吕漂，所以專門查了一下資料亲配，記錄一下。
修飾器（Decorator）是一個(gè)函數(shù)惶凝，用來修改類的行為吼虎。不是很理解這種抽象概念，還是看代碼講解實(shí)際些苍鲜。
//定義一個(gè)函數(shù)思灰，也就是定義一個(gè)Decorator，target參數(shù)就是傳進(jìn)來的Class混滔。
//這里是為類添加了一個(gè)靜態(tài)屬性
function testable(target) {
target.isTestable = true;
}
//在Decorator后面跟著Class洒疚，Decorator是函數(shù)的話，怎么不是testable(MyTestableClass)這樣寫呢遍坟？
//我只能這樣理解：因?yàn)檎Z法就這樣拳亿，只要Decorator后面是Class晴股，默認(rèn)就已經(jīng)把Class當(dāng)成參數(shù)隱形傳進(jìn)Decorator了愿伴。
@testable
class MyTestableClass {}
console.log(MyTestableClass.isTestable) // true
但上面這樣只傳了一個(gè)Class作為參數(shù)不夠靈活怎么辦？
我們可以在外層套一個(gè)函數(shù)电湘，只要最后返回的是一個(gè)Decorator即可隔节，管你套多少個(gè)函數(shù)傳多少個(gè)參數(shù)都無所謂鹅经。
function testable(isTestable) {
return function(target) {
target.isTestable = isTestable;
}
}
//注意這里，隱形傳入了Class怎诫，語法類似于testable(true)(MyTestableClass)
@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true
@testable(false)
class MyClass {}
MyClass.isTestable // false
下面是修改類的prototype對(duì)象
function testable(target) {
target.prototype.isTestable = true;
}
@testable
class MyTestableClass {}
let obj = new MyTestableClass();
obj.isTestable // true
概念大概理解了瘾晃，修飾器不僅可以修飾類，還可以修飾類的屬性
//假如修飾類的屬性則傳入三個(gè)參數(shù)幻妓，對(duì)應(yīng)Object.defineProperty()里三個(gè)參數(shù)蹦误，具體不細(xì)說
//target為目標(biāo)對(duì)象，對(duì)應(yīng)為Class的實(shí)例
//name為所要修飾的屬性名肉津，這里就是修飾器緊跟其后的name屬性
//descriptor為該屬性的描述對(duì)象
//這里的Decorator作用是使name屬性不可寫强胰，并返回修改后的descriptor
function readonly(target, name, descriptor){
descriptor.writable = false;
return descriptor;
}
class Person {
@readonly
name() { return `${this.first} ${this.last}` }
}
關(guān)于Object.defineProperty()可以看文章學(xué)習(xí)Object.defineProperty
再看一個(gè)復(fù)雜的例子
//定義一個(gè)Class并在其add上使用了修飾器
class Math {
@log
add(a, b) {
return a + b;
}
}
//定義一個(gè)修飾器
function log(target, name, descriptor) {
//這里是緩存舊的方法，也就是上面那個(gè)add()原始方法
var oldValue = descriptor.value;
//這里修改了方法妹沙，使其作用變成一個(gè)打印函數(shù)
//最后依舊返回舊的方法偶洋，真是巧妙
descriptor.value = function() {
console.log(`Calling "${name}" with`, arguments);
return oldValue.apply(null, arguments);
};
return descriptor;
}
const math = new Math();
math.add(2, 4);
看完上面的代碼之后也大概了解裝飾器是什么作用了，下面是看看怎么在React里使用距糖。
我們都知道組件也是Class玄窝，但寫React的時(shí)候怎么不見 new 語法？因?yàn)槟銘?yīng)用組件的時(shí)候React隱性幫你實(shí)例化了悍引。
這里展示一個(gè)例子用于切換React路由時(shí)恩脂，動(dòng)態(tài)更改title屬性的裝飾器
//假如有這么一個(gè)頁面組件，用于顯示用戶資料的吗铐，當(dāng)從Home組件進(jìn)去到這個(gè)組件時(shí)
//希望title從“Home Page”變成“Profile Page”
//注意這里隱形傳入了組件东亦，語法類似setTitle('Profile Page')(Profile)
@setTitle('Profile Page')
class Profile extends React.Component {
//....
}
//開始定義裝飾器
//看到兩個(gè)箭頭函數(shù)感覺懵逼了，轉(zhuǎn)化一個(gè)也就是一個(gè)函數(shù)里返回一個(gè)函數(shù)再返回一個(gè)組件包裹器而已
//title參數(shù)對(duì)應(yīng)上面的“Profile Page”字符串
//WrappedComponent參數(shù)對(duì)應(yīng)上面的Profile組件
//然后在組件加載完修改了title唬渗，在返回一個(gè)新組件典阵，是不是很像高階組件呢
const setTitle = (title) => (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
document.title = title
}
render() {
return <WrappedComponent {...this.props} />
}
}
}
最后看看現(xiàn)在react-redux中怎么應(yīng)用裝飾器的
//定義一個(gè)組件
class Home extends React.Component {
//....
}
//以往從狀態(tài)樹取出對(duì)應(yīng)的數(shù)據(jù)，讓后通過props傳給組件使用通過react-redux自帶的connect()方法
export default connect(state => ({todos: state.todos}))(Home);
//使用裝飾器的話就變成這樣镊逝，好像沒那么復(fù)雜
@connect(state => ({ todos: state.todos }))
class Home extends React.Component {
//....
}
參考文檔：
http://es6.ruanyifeng.com/#docs/decorator
https://survivejs.com/react/appendices/understanding-decorators/
https://medium.com/@gigobyte/enhancing-react-components-with-decorators-441320e8606a
http://stackoverflow.com/questions/36553814/what-is-the-use-of-connect-decorator-in-react-redux
