ES6 系列之我們來聊聊裝飾器

摘要： 裝飾器主要用於: 裝飾類 裝飾方法或屬性 裝飾類 @annotation class MyClass { } function annotation(target) { target.annotated = true; } 複製程式碼 裝飾方法或...

裝飾器主要用於:

1. 裝飾類
2. 裝飾方法或屬性

裝飾類

@annotation
class MyClass { }

function annotation(target) {
target.annotated = true;
}
複製程式碼

裝飾方法或屬性

class MyClass {
@readonly
method() { }
}

function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}
複製程式碼

Babel

安裝編譯

我們可以在 Babel 官網的Try it out，檢視 Babel 編譯後的程式碼。

不過我們也可以選擇本地編譯：

npm init

npm install --save-dev @babel/core @babel/cli

npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
複製程式碼

新建 .babelrc 檔案

{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", {"loose": true}]
]
}
複製程式碼

再編譯指定的檔案

babel decorator.js --out-file decorator-compiled.js
複製程式碼

裝飾類的編譯

編譯前：

@annotation
class MyClass { }

function annotation(target) {
target.annotated = true;
}
複製程式碼

編譯後：

var _class;

let MyClass = annotation(_class = class MyClass {}) || _class;

function annotation(target) {
target.annotated = true;
}
複製程式碼

我們可以看到對於類的裝飾，其原理就是：

@decorator
class A {}

// 等同於

class A {}
A = decorator(A) || A;
複製程式碼

裝飾方法的編譯

編譯前：

class MyClass {
@unenumerable
@readonly
method() { }
}

function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}

function unenumerable(target, name, descriptor) {
descriptor.enumerable = false;
return descriptor;
}
複製程式碼

編譯後：

var _class;

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context ) {
/**
 * 第一部分
 * 拷貝屬性
 */
var desc = {};
Object["ke" + "ys"](descriptor).forEach(function(key) {
desc[key] = descriptor[key];
});
desc.enumerable = !!desc.enumerable;
desc.configurable = !!desc.configurable;

if ("value" in desc || desc.initializer) {
desc.writable = true;
}

/**
 * 第二部分
 * 應用多個 decorators
 */
desc = decorators
.slice()
.reverse()
.reduce(function(desc, decorator) {
return decorator(target, property, desc) || desc;
}, desc);

/**
 * 第三部分
 * 設定要 decorators 的屬性
 */
if (context && desc.initializer !== void 0) {
desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
desc.initializer = undefined;
}

if (desc.initializer === void 0) {
Object["define" + "Property"](target, property, desc);
desc = null;
}

return desc;
}

let MyClass = ((_class = class MyClass {
method() {}
}),
_applyDecoratedDescriptor(
_class.prototype,
"method",
[readonly],
Object.getOwnPropertyDescriptor(_class.prototype, "method"),
_class.prototype
),
_class);

function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}
複製程式碼

裝飾方法的編譯原始碼解析

我們可以看到 Babel 構建了一個 _applyDecoratedDescriptor 函式，用於給方法裝飾。

Object.getOwnPropertyDescriptor()

在傳入引數的時候，我們使用了一個 Object.getOwnPropertyDescriptor() 方法，我們來看下這個方法：

Object.getOwnPropertyDescriptor() 方法返回指定物件上的一個自有屬性對應的屬性描述符。（自有屬性指的是直接賦予該物件的屬性，不需要從原型鏈上進行查詢的屬性）

順便注意這是一個 ES5 的方法。

舉個例子：

const foo = { value: 1 };
const bar = Object.getOwnPropertyDescriptor(foo, "value");
// bar {
//value: 1,
//writable: true
//enumerable: true,
//configurable: true,
// }

const foo = { get value() { return 1; } };
const bar = Object.getOwnPropertyDescriptor(foo, "value");
// bar {
//get: /*the getter function*/,
//set: undefined
//enumerable: true,
//configurable: true,
// }
複製程式碼

第一部分原始碼解析

在 _applyDecoratedDescriptor 函式內部，我們首先將 Object.getOwnPropertyDescriptor() 返回的屬性描述符物件做了一份拷貝：

// 拷貝一份 descriptor
var desc = {};
Object["ke" + "ys"](descriptor).forEach(function(key) {
desc[key] = descriptor[key];
});
desc.enumerable = !!desc.enumerable;
desc.configurable = !!desc.configurable;

// 如果沒有 value 屬性或者沒有 initializer 屬性，表明是 getter 和 setter
if ("value" in desc || desc.initializer) {
desc.writable = true;
}
複製程式碼

那麼 initializer 屬性是什麼呢？Object.getOwnPropertyDescriptor() 返回的物件並不具有這個屬性呀，確實，這是 Babel 的 Class 為了與 decorator 配合而產生的一個屬性，比如說對於下面這種程式碼：

class MyClass {
@readonly
born = Date.now();
}

function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}

var foo = new MyClass();
console.log(foo.born);
複製程式碼

Babel 就會編譯為：

// ...
(_descriptor = _applyDecoratedDescriptor(_class.prototype, "born", [readonly], {
configurable: true,
enumerable: true,
writable: true,
initializer: function() {
return Date.now();
}
}))
// ...
複製程式碼

此時傳入 _applyDecoratedDescriptor 函式的 descriptor 就具有 initializer 屬性。

第二部分原始碼解析

接下是應用多個 decorators：

/**
 * 第二部分
 * @type {[type]}
 */
desc = decorators
.slice()
.reverse()
.reduce(function(desc, decorator) {
return decorator(target, property, desc) || desc;
}, desc);
複製程式碼

對於一個方法應用了多個 decorator，比如：

class MyClass {
@unenumerable
@readonly
method() { }
}
複製程式碼

Babel 會編譯為：

_applyDecoratedDescriptor(
_class.prototype,
"method",
[unenumerable, readonly],
Object.getOwnPropertyDescriptor(_class.prototype, "method"),
_class.prototype
)
複製程式碼

在第二部分的原始碼中，執行了 reverse() 和 reduce() 操作，由此我們也可以發現，如果同一個方法有多個裝飾器，會由內向外執行。

第三部分原始碼解析

/**
 * 第三部分
 * 設定要 decorators 的屬性
 */
if (context && desc.initializer !== void 0) {
desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
desc.initializer = undefined;
}

if (desc.initializer === void 0) {
Object["define" + "Property"](target, property, desc);
desc = null;
}

return desc;
複製程式碼

如果 desc 有 initializer 屬性，意味著當裝飾的是類的屬性時，會將 value 的值設定為:

desc.initializer.call(context)
複製程式碼

而 context 的值為_class.prototype ，之所以要call(context) ，這也很好理解，因為有可能

class MyClass {
@readonly
value = this.getNum() + 1;

getNum() {
return 1;
}
}
複製程式碼

最後無論是裝飾方法還是屬性，都會執行：

Object["define" + "Property"](target, property, desc);
複製程式碼

由此可見，裝飾方法本質上還是使用Object.defineProperty() 來實現的。

應用

1.log

為一個方法新增 log 函式，檢查輸入的引數：

class Math {
@log
add(a, b) {
return a + b;
}
}

function log(target, name, descriptor) {
var oldValue = descriptor.value;

descriptor.value = function(...args) {
console.log(`Calling ${name} with`, args);
return oldValue.apply(this, args);
};

return descriptor;
}

const math = new Math();

// Calling add with [2, 4]
math.add(2, 4);
複製程式碼

再完善點：

let log = (type) => {
return (target, name, descriptor) => {
const method = descriptor.value;
descriptor.value =(...args) => {
console.info(`(${type}) 正在執行: ${name}(${args}) = ?`);
let ret;
try {
ret = method.apply(target, args);
console.info(`(${type}) 成功 : ${name}(${args}) => ${ret}`);
} catch (error) {
console.error(`(${type}) 失敗: ${name}(${args}) => ${error}`);
}
return ret;
}
}
};
複製程式碼

2.autobind

class Person {
@autobind
getPerson() {
return this;
}
}

let person = new Person();
let { getPerson } = person;

getPerson() === person;
// true
複製程式碼

我們很容易想到的一個場景是 React 繫結事件的時候：

class Toggle extends React.Component {

@autobind
handleClick() {
console.log(this)
}

render() {
return (
<button onClick={this.handleClick}>
button
</button>
);
}
}
複製程式碼

我們來寫這樣一個 autobind 函式：

const { defineProperty, getPrototypeOf} = Object;

function bind(fn, context) {
if (fn.bind) {
return fn.bind(context);
} else {
return function __autobind__() {
return fn.apply(context, arguments);
};
}
}

function createDefaultSetter(key) {
return function set(newValue) {
Object.defineProperty(this, key, {
configurable: true,
writable: true,
enumerable: true,
value: newValue
});

return newValue;
};
}

function autobind(target, key, { value: fn, configurable, enumerable }) {
if (typeof fn !== 'function') {
throw new SyntaxError(`@autobind can only be used on functions, not: ${fn}`);
}

const { constructor } = target;

return {
configurable,
enumerable,

get() {

/**
* 使用這種方式相當於替換了這個函式，所以當比如
* Class.prototype.hasOwnProperty(key) 的時候，為了正確返回
* 所以這裡做了 this 的判斷
*/
if (this === target) {
return fn;
}

const boundFn = bind(fn, this);

defineProperty(this, key, {
configurable: true,
writable: true,
enumerable: false,
value: boundFn
});

return boundFn;
},
set: createDefaultSetter(key)
};
}
複製程式碼

3.debounce

有的時候，我們需要對執行的方法進行防抖處理:

class Toggle extends React.Component {

@debounce(500, true)
handleClick() {
console.log('toggle')
}

render() {
return (
<button onClick={this.handleClick}>
button
</button>
);
}
}
複製程式碼

我們來實現一下：

function _debounce(func, wait, immediate) {

var timeout;

return function () {
var context = this;
var args = arguments;

if (timeout) clearTimeout(timeout);
if (immediate) {
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}

function debounce(wait, immediate) {
return function handleDescriptor(target, key, descriptor) {
const callback = descriptor.value;

if (typeof callback !== 'function') {
throw new SyntaxError('Only functions can be debounced');
}

var fn = _debounce(callback, wait, immediate)

return {
...descriptor,
value() {
fn()
}
};
}
}
複製程式碼

4.time

用於統計方法執行的時間:

function time(prefix) {
let count = 0;
return function handleDescriptor(target, key, descriptor) {

const fn = descriptor.value;

if (prefix == null) {
prefix = `${target.constructor.name}.${key}`;
}

if (typeof fn !== 'function') {
throw new SyntaxError(`@time can only be used on functions, not: ${fn}`);
}

return {
...descriptor,
value() {
const label = `${prefix}-${count}`;
count++;
console.time(label);

try {
return fn.apply(this, arguments);
} finally {
console.timeEnd(label);
}
}
}
}
}
複製程式碼

5.mixin

用於將物件的方法混入 Class 中：

const SingerMixin = {
sing(sound) {
alert(sound);
}
};

const FlyMixin = {
// All types of property descriptors are supported
get speed() {},
fly() {},
land() {}
};

@mixin(SingerMixin, FlyMixin)
class Bird {
singMatingCall() {
this.sing('tweet tweet');
}
}

var bird = new Bird();
bird.singMatingCall();
// alerts "tweet tweet"
複製程式碼

mixin 的一個簡單實現如下：

function mixin(...mixins) {
return target => {
if (!mixins.length) {
throw new SyntaxError(`@mixin() class ${target.name} requires at least one mixin as an argument`);
}

for (let i = 0, l = mixins.length; i < l; i++) {
const descs = Object.getOwnPropertyDescriptors(mixins[i]);
const keys = Object.getOwnPropertyNames(descs);

for (let j = 0, k = keys.length; j < k; j++) {
const key = keys[j];

if (!target.prototype.hasOwnProperty(key)) {
Object.defineProperty(target.prototype, key, descs[key]);
}
}
}
};
}
複製程式碼

6.redux

實際開發中，React 與 Redux 庫結合使用時，常常需要寫成下面這樣。

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
複製程式碼

有了裝飾器，就可以改寫上面的程式碼。

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {};
複製程式碼

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

7.注意

以上我們都是用於修飾類方法，我們獲取值的方式為：

const method = descriptor.value;
複製程式碼

但是如果我們修飾的是類的例項屬性，因為 Babel 的緣故，通過 value 屬性並不能獲取值，我們可以寫成：

const value = descriptor.initializer && descriptor.initializer();
複製程式碼

參考

1. ofollow,noindex">ECMAScript 6 入門
2. core-decorators
3. ES7 Decorator 裝飾者模式
4. JS 裝飾器（Decorator）場景實戰

ES6 系列

ES6 系列目錄地址：github.com/mqyqingfeng…

ES6 系列預計寫二十篇左右，旨在加深 ES6 部分知識點的理解，重點講解塊級作用域、標籤模板、箭頭函式、Symbol、Set、Map 以及 Promise 的模擬實現、模組載入方案、非同步處理等內容。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。