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

時間  2019-11-05
標籤 es6 系列 咱們 聊聊 裝飾 欄目 JavaScript 简体版
原文   原文鏈接

Decorator

裝飾器主要用於:react

  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 編譯後的代碼。git

不過咱們也能夠選擇本地編譯：es6

npm init

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

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

新建 .babelrc 文件github

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

再編譯指定的文件npm

babel decorator.js --out-file decorator-compiled.js
複製代碼

裝飾類的編譯

編譯前：json

@annotation
class MyClass { }

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

編譯後：redux

var _class;

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

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

咱們能夠看到對於類的裝飾，其原理就是：bash

@decorator
class A {}

// 等同於

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

裝飾方法的編譯

編譯前：babel

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;
}
複製代碼

編譯後：app

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. ECMAScript 6 入門
  2. core-decorators
  3. ES7 Decorator 裝飾者模式
  4. JS 裝飾器（Decorator）場景實戰

ES6 系列

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

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

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程