裝飾器（Decorator）是一種設(shè)計模式宪迟，允許向一個對象添加功能，但是又不改變其內(nèi)部結(jié)構(gòu)交惯。裝飾器只是ES7中提案次泽，目前處于Stage 2階段，但是不久的將來就會變成規(guī)范席爽。它主要用來修飾類以及類屬性意荤。
本文總共分為五個部分：
- 修飾類
- 修飾類屬性
- 三個參數(shù)
- 在React的應(yīng)用
- Babel編譯
修飾類
@isPerson
class Person {}
function isPerson(target) {
target.prototype.isPerson = true;
}
const person1 = new Person();
console.log(person1.isPerson); // true
上面有一個Person類，我們寫了一個isPerson裝飾器修飾它只锻，最終我們實例化Person時玖像，實例上多了isPerson屬性。
@isPerson(true)
class Person {}
function isPerson(bol) {
return function(target) {
target.prototype.isPerson = true;
}
}
同樣我們也可以給裝飾器isPerson添加參數(shù)齐饮，而裝飾器內(nèi)容就會多一層結(jié)構(gòu)捐寥，return對一個對象笤昨。所以裝飾器是支持傳參和不傳參的。
本質(zhì)上可以把Person看作一個方法上真，而實際上裝飾器就是將方法當參數(shù)傳入咬腋。在Babel編譯我會講解裝飾器的本質(zhì)。
isPerson(true)(function Person() {})
修飾類屬性
class Person {
firstName = 'Peter';
lastName = 'Cheng';
@readonly
realName() { return `${this.firstName} ${this.lastName}` };
}
function readonly(target, name, descriptor) {
descriptor.writable = false;
}
const person2 = new Person();
console.log(person2.realName = 1);
同時給類Person的realName方法添加了readonly裝飾器睡互，當輸出實例的realName屬性時根竿，程序會報錯，Uncaught TypeError: Cannot assign to read only property 'realName' of object '#<Person>'就珠。注意寇壳，這里實際上修飾的是類方法，裝飾器目前不能修飾類里面的變量妻怎，比如firstName和lastName壳炎。
三個參數(shù)
- target
如果修飾類，那target就是目標本身逼侦，第一個例子中就是Person類匿辩。如果你修飾的是類方法，那target就是類實例榛丢。
- name
類名或者類方法名稱铲球，同樣第一個例子，打印出來就是Person晰赞。
- descriptor
屬性的描述對象稼病。它具有如下幾個屬性，value掖鱼，enumerable然走，configurable，writable戏挡。value是修飾對象本身芍瑞，而其他值和Object.defineProperty的屬性一樣，控制值的行為褐墅。
{
value: ? realName(),
enumerable: false,
configurable: true,
writable: false
};
在React的應(yīng)用
裝飾器在React中的應(yīng)用我們隨處看見拆檬，比如Redux，自定義HOC等掌栅，其實這些都是高階函數(shù)的應(yīng)用秩仆。
下面我們實現(xiàn)一個打點裝飾器码泛，當我們觸發(fā)postClick方法時猾封，會輸出一個打點的log，最終會輸出postClick 2噪珊。我們通過攔截value晌缘，并重寫value齐莲，將參數(shù)id打印了出來。
class App extends Component {
@analytic()
postClick(id = 1) {}
}
function analytic(args) {
return function decorator(target, name, descriptor) {
if (typeof descriptor === 'undefined') {
throw new Error('@analytic decorator can only be applied to class methods');
}
const value = descriptor.value;
function newValue(...args) {
console.log(`${name} ${args}`);
return value.bind(this)(args);
};
return {
...descriptor,
value: newValue
};
}
}
const app = new App();
app.postClick(2);
Babel編譯
我們選擇修飾類方法的例子磷箕，看一下最簡單的裝飾器如果編譯成ES5代碼會是怎么樣选酗。可以用Babel官方的網(wǎng)址 https://babeljs.io/repl岳枷，看一下第一個例子中代碼被編譯成什么樣子芒填。
class Person {
firstName = 'Peter';
lastName = 'Cheng';
@readonly
realName() { return `${this.firstName} ${this.lastName}` };
}
function readonly(target, name, descriptor) {
descriptor.writable = false;
}
const person2 = new Person();
console.log(person2.realName = 1);
編譯之后
function _decorate(decorators, factory, superClass, mixins) {}
// 省略中間一大推
var Person = _decorate(null, function (_initialize) {
var Person = function Person() {
_classCallCheck(this, Person);
_initialize(this);
};
return {
F: Person,
d: [{
kind: "field",
key: "firstName",
value: function value() {
return 'Peter';
}
}, {
kind: "field",
key: "lastName",
value: function value() {
return 'Cheng';
}
}, {
kind: "method",
decorators: [readonly],
key: "realName",
value: function realName() {
return "".concat(this.firstName, " ").concat(this.lastName);
}
}]
};
});
function readonly(target, name, descriptor) {
descriptor.writable = false;
}
var person2 = new Person();
console.log(person2.realName = 1);
其實主要看Person對象有那些變化，Babel將類編譯成了ES5的function空繁，并且外面套一層裝飾器殿衰，但是裝飾器最終還是賦值給Person變量。內(nèi)部Person對象最終返回一個對象盛泡，而key為realName的對象有一個decorators闷祥，它是一個數(shù)組。我們看看decorators做了什么傲诵。其實就是遍歷數(shù)組凯砍，將參數(shù)最終映射到Object.defineProperty，操作對象的可寫入等屬性拴竹。
結(jié)束語
通過本文我們知道了裝飾器是什么悟衩，并且用來做什么，以及實質(zhì)是什么殖熟。最近看了一部電影《斯隆女士》局待，里面就有一個片段闡述專業(yè)性的重要性，作為前端菱属，首先需要掌握的就是ES相關(guān)的知識钳榨。終于整理完裝飾器的知識了，我最近正在用Node + Flutter做一個App纽门，最終計劃是發(fā)布上線薛耻，敬請期待。
我用create-react-app生成了一個項目赏陵，可以直接使用裝飾器饼齿。https://github.com/carrollcai/decorator-demo。
參考
http://es6.ruanyifeng.com/#docs/decorator
寫作時間： 20190922
