淺談js中的裝飾器

什麼是裝飾器？

裝飾器模式（Decorator Pattern）是一種結構型設計模式，旨在促進代碼複用，能夠用於修改現有的系統，但願在系統中爲對象添加額外的功能，同時又不須要大量修改原有的代碼。

JS中的裝飾器是ES7中的一個新語法，能夠對類、方法、屬性進行修飾，從而進行一些相關功能定製, 它的寫法與Java的註解（Annotation）相似，可是功能有比較大的區別。

你們可能據說過 組合函數 和 高階函數 的概念，也能夠這麼理解。

咱們先來看一下如下代碼：

function doSomething(name) {
  console.log('Hi, I\'' + name);
}

funtion useLogging(func, name) {
    console.log('Starting');
    func(name);
    console.log('Finished');
}
複製代碼

以上邏輯不難理解，給原有的函數加一個打日誌的功能，可是這樣的話，每次都要傳參數給useLogging，並且破壞了以前的代碼結構，以前直接doSomething就行了，如今要改爲useLogging(doSomething, 'Jiang')。 那有沒有更好的方式呢，固然有啦。

簡單裝飾器：

function useLogging(func) {
    return function() {
        console.log('Starting');
        const result = func.apply(this, arguments)
        console.log('Done');
        return result;
    }
}

const wrapped = useLogging(doSomething);
複製代碼

以上代碼返回了一個新的函數 wrapped , 調用方式和doSomething相同，在原來的基礎上能作多一點事情。

doSomething('angry');
// Hi, I'angry

const wrapped = useLogging(doSomething);


wrapped('angry');
// Starting
// Hi, I'angry
// Done
複製代碼

怎麼使用裝飾器？

裝飾器主要有兩種用法：

• 裝飾類方法或屬性(類成員)

class MyClass {
  @readonly
  method() { }
}

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

• 裝飾類

@annotation
class MyClass { }

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

類成員裝飾器

類成員裝飾器用來裝飾類裏面的屬性、方法、getter和setter。這個裝飾器函數調用三個參數調：

• target: 被裝飾的類的原型
• name: 被裝飾的類、屬性、方法的名字
• descriptor: 被裝飾的類、屬性、方法的descriptor，將傳遞給Object.defineProperty

咱們來寫幾個裝飾器，代碼以下：

寫一個@readonly裝飾器，簡單版實現：

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

  @unenumerable
  @readonly
  name = "alibaba"
}

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

function unenumerable(target, name, descriptor) {
  descriptor.enumerable = false;
  return descriptor;
}

function log(target, name, descriptor) {
  const original = descriptor.value;
  if (typeof original === 'function') {
    descriptor.value = function(...args) {
      console.log(`Arguments: ${args}`);
      try {
        const result = original.apply(this, args);
        console.log(`Result: ${result}`);
        return result;
      } catch (e) {
        console.log(`Error: ${e}`);
        throw e;
      }
    }
  }
  return descriptor;
}

const e = new Example();

// Calling add with [2, 4]
e.add(2, 4);
e.name = 'antd'; // Error
複製代碼

咱們能夠經過Babel查看編譯後的代碼，也能夠在本地編譯。

npm i @babel/core @babel/cli
npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D
複製代碼

.babelrc文件

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

編譯 ES6 語法輸出到文件

由於沒用全局安裝@babel/cli, 建議用 npx 命令來執行，或者./node_modules/.bin/babel，關於npx命令，能夠看下官方文檔

npx babel decorator.js --out-file complied.js
複製代碼

編譯後的代碼：

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;
  }
  desc = decorators.slice().reverse().reduce(function (desc, decorator) {
    return decorator(target, property, desc) || desc;
  }, desc);
  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;
}

_applyDecoratedDescriptor(_class.prototype, "add", [log], Object.getOwnPropertyDescriptor(_class.prototype, "add"), _class.prototype)
複製代碼

Babel 構建了一個 _applyDecoratedDescriptor函數，用於裝飾類成員

Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor()方法返回指定對象上一個自有屬性對應的屬性描述符。（自有屬性指的是直接賦予該對象的屬性，不須要從原型鏈上進行查找的屬性），不是原型鏈上的這點很關鍵。

詳情能夠查看官方文檔，這裏就不細說了。

var desc = {};
  // 這裏對 descriptor 屬性作了一層拷貝
  Object['ke' + 'ys'](descriptor).forEach(function (key) {
    desc[key] = descriptor[key];
  });
  desc.enumerable = !!desc.enumerable;
  desc.configurable = !!desc.configurable;
  // 沒有 value 或者 initializer 屬性的，都是 get 和 set 方法
  if ('value' in desc || desc.initializer) {
    desc.writable = true;
  }
複製代碼

這裏的 initializer 是 Babel 爲了配合 decorator 而產生的一個屬性，就比方說對於上面代碼中的 name 屬性，被編譯成：

_descriptor = _applyDecoratedDescriptor(_class.prototype, "name", [unenumerable, readonly], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    return "alibaba";
  }
})
複製代碼

desc = decorators.slice().reverse().reduce(function (desc, decorator) {
    return decorator(target, property, desc) || desc;
  }, desc);
複製代碼

處理多個 decorator 的狀況，這裏執行了slice()和reverse()，因此咱們能夠得出，一個類成員有多個裝飾器，會由內向外執行。

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

最後不管是裝飾方法仍是屬性，都會執行：

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

因而可知，裝飾方法本質上仍是使用 Object.defineProperty() 來實現的。

類裝飾器

類裝飾器相對簡單

function log(Class) {
  return (...args) => {
    console.log(args);
    return new Class(...args);
  };
}
複製代碼

@log
class Example {
  constructor(name, age) {
  }
}

const e = new Example('Graham', 34);
// [ 'Graham', 34 ]
console.log(e);
// Example {}
複製代碼

裝飾器中傳入參數:

function log(name) {
  return function decorator(Class) {
    return (...args) => {
      console.log(`Arguments for ${name}: args`);
      return new Class(...args);
    };
  }
}

@log('Demo')
class Example {
  constructor(name, age) {}
}

const e = new Example('Graham', 34);
// Arguments for Demo: args
console.log(e);
// Example {}
複製代碼

應用

在 React 中，常常會用到 redux 或者高階組件。

class A extends React.Component {}
export default connect()(A);
複製代碼

裝飾器寫法：

@connect()
export default connect()(A);
複製代碼

總結

Decorator 雖然原理很是簡單，可是的確能夠實現不少實用又方便的功能.