Decorator:從原理到實踐，我一點都不虛~

Neal_yang發表於2019-04-23

前言

原文連結:Nealyang/personalBlog

ES6 已經不必在過多介紹，在 ES6 之前，裝飾器可能並沒有那麼重要，因為你只需要加一層 wrapper 就好了，但是現在，由於語法糖 class 的出現，當我們想要去在多個類之間共享或者擴充套件一些方法的時候，程式碼會變得錯綜複雜，難以維護，而這，也正式我們 Decorator 的用武之地。

Object.defineProperty

關於 Object.defineProperty 簡單的說，就是該方法可以精準的新增和修改物件的屬性

語法

Object.defineProperty(obj,prop,descriptor)

ojb:要在其上定義屬性的物件
prop:要定義或修改的屬性的名稱
descriptor:將被定義或修改的屬性描述符

該方法返回被傳遞給函式的物件

在ES6中，由於 Symbol型別的特殊性，用Symbol型別的值來做物件的key與常規的定義或修改不同，而Object.defineProperty 是定義key為Symbol的屬性的方法之一。

通過賦值操作新增的普通屬性是可列舉的，能夠在屬性列舉期間呈現出來（for...in 或 Object.keys 方法），這些屬性的值可以被改變，也可以被刪除。這個方法允許修改預設的額外選項（或配置）。預設情況下，使用 Object.defineProperty() 新增的屬性值是不可修改的

屬相描述符

物件裡目前存在的屬性描述符有兩種主要形式：資料描述符和存取描述符。資料描述符是一個具有值的屬性，該值可能是可寫的，也可能不是可寫的。存取描述符是由getter-setter函式對描述的屬性。描述符必須是這兩種形式之一；不能同時是兩者。

資料描述符和存取描述符均具有以下可選鍵值：

configurable

當且僅當該屬性的 configurable 為 true 時，該屬性描述符才能夠被改變，同時該屬性也能從對應的物件上被刪除。預設為 false

enumerable

當且僅當該屬性的enumerable為true時，該屬性才能夠出現在物件的列舉屬性中。預設為 false。

資料描述符同時具有以下可選鍵值：

value

該屬性對應的值。可以是任何有效的 JavaScript 值（數值，物件，函式等）。預設為 undefined。

writable

當且僅當該屬性的writable為true時，value才能被賦值運算子改變。預設為 false

存取描述符同時具有以下可選鍵值：

get

一個給屬性提供 getter 的方法，如果沒有 getter 則為 undefined。當訪問該屬性時，該方法會被執行，方法執行時沒有引數傳入，但是會傳入this物件（由於繼承關係，這裡的this並不一定是定義該屬性的物件）。預設為 undefined。

set

一個給屬性提供 setter 的方法，如果沒有 setter 則為 undefined。當屬性值修改時，觸發執行該方法。該方法將接受唯一引數，即該屬性新的引數值。預設為 undefined。

如果一個描述符不具有value,writable,get 和 set 任意一個關鍵字，那麼它將被認為是一個資料描述符。如果一個描述符同時有(value或writable)和(get或set)關鍵字，將會產生一個異常

更多使用例項和介紹，參看：MDN

裝飾者模式

在看Decorator之前，我們先看下裝飾者模式的使用，我們都知道，裝飾者模式能夠在不改變物件自身基礎上，在程式執行期間給物件新增指責。特點就是不影響之前物件的特性，而新增額外的職責功能。

like...this:

這段比較簡單，直接看程式碼吧：

let Monkey = function () {}
Monkey.prototype.say = function () {
  console.log('目前我只是個野猴子');
}
let TensionMonkey = function (monkey) {
  this.monkey = monkey;
}
TensionMonkey.prototype.say = function () {
  this.monkey.say();
  console.log('帶上緊箍咒，我就要忘記世間煩惱!');
}
let monkey = new TensionMonkey(new Monkey());
monkey.say();
複製程式碼

執行結果：

Decorator

Decorator其實就是一個語法糖，背後其實就是利用es5的Object.defineProperty(target,name,descriptor),瞭解Object.defineProperty請移步這個連結:MDN文件

其背後原理大致如下：

class Monkey{
  say(){
    console.log('目前，我只是個野猴子');
  }
}
複製程式碼

執行上面的程式碼，大致程式碼如下：

Object.defineProperty(Monkey.prototype,'say',{
  value:function(){console.log('目前，我只是個野猴子')},
  enumerable:false,
  configurable:true,
  writable:true
})
複製程式碼

如果我們利用裝飾器來修飾他

class Monkey{
@readonly
say(){console.log('現在我是隻讀的了')}
}
複製程式碼

在這種裝飾器的屬性，會在Object.defineProperty為Monkey.prototype註冊say屬性之前，執行以下程式碼：

let descriptor = {
  value:specifiedFunction,
  enumerable:false,
  configurable:true,
  writeable:true
};

descriptor = readonly(Monkey.prototype,'say',descriptor)||descriptor;
Object.defineProperty(Monkey.prototype,'say',descriptor);
複製程式碼

從上面的虛擬碼我們可以看出，Decorator只是在Object.defineProperty為Monkey.prototype註冊屬性之前，執行了一個裝飾函式，其屬於一個類對Object.defineProperty的攔截。所以它和Object.defineProperty具有一致的形參：

obj：作用的目標物件
prop:作用的屬性名
descriptor:針對該屬性的描述符

下面看下簡單的使用

在class中的使用

建立一個新的class繼承自原有的class，並新增屬性

@name
class Person{
  sayHello(){
    console.log(`hello ,my name is ${this.name}`)
  }
}

function name(constructor) {  
  return class extends constructor{
    name="Nealyang"
  }
}

new Person().sayHello()
//hello ,my name is Nealyang
複製程式碼

針對當前class修改(類似mixin)

@name
@seal
class Person {
  sayHello() {
    console.log(`hello ,my name is ${this.name}`)
  }
}

function name(constructor) {
  Object.defineProperty(constructor.prototype,'name',{
    value:'一凨'
  })
}
new Person().sayHello()

//若修改一個屬性

function seal(constructor) {
  let descriptor = Object.getOwnPropertyDescriptor(constructor.prototype, 'sayHello')
  Object.defineProperty(constructor.prototype, 'sayHello', {
    ...descriptor,
    writable: false
  })
}

new Person().sayHello = 1;// Cannot assign to read only property 'sayHello' of object '#<Person>'
複製程式碼

上面說到mixin，那麼我就來模擬一個mixin吧

class A {
  run() {
    console.log('我會跑步!')
  }
}

class B {
  jump() {
    console.log('我會跳!')
  }
}

@mixin(A, B)
class C {}

function mixin(...args) {
  return function (constructor) {
    for (const arg of args) {
      for (let key of Object.getOwnPropertyNames(arg.prototype)) {
        if (key === 'constructor') continue;
        Object.defineProperty(constructor.prototype, key, Object.getOwnPropertyDescriptor(arg.prototype, key));
      }
    }
  }
}

let c = new C();
c.jump();
c.run();
// 我會跳!
// 我會跑步!
複製程式碼

截止目前我們貌似寫了非常多的程式碼了，對。。。這篇，為了徹底搞投Decorator，這。。。只是開始。。。

在class成員中的使用

這類的裝飾器的寫法應該就是我們最為熟知了，會接受三個引數:

如果裝飾器掛載在靜態成員上，則會返回建構函式，如果掛載在例項成員上，則返回類的原型
裝飾器掛載的成員名稱
Object.getOwnPropertyDescriptor的返回值

首先，我們明確下靜態成員和例項成員的區別

class Model{
  //例項成員
  method1(){}
  method2 = ()=>{}
  
  // 靜態成員
  static method3(){}
  static method4 = ()=>{}
}
複製程式碼

method1 和method2 是例項成員，但是method1存在於prototype上，method2只有例項化物件以後才有。

method3和method4是靜態成員，兩者的區別在於是否可列舉描述符的設定，我們通過babel轉碼可以看到：

上述程式碼比較亂，簡單的可以理解為：

function Model () {
  // 成員僅在例項化時賦值
  this.method2 = function () {}
}

// 成員被定義在原型鏈上
Object.defineProperty(Model.prototype, 'method1', {
  value: function () {}, 
  writable: true, 
  enumerable: false,  // 設定不可被列舉
  configurable: true
})

// 成員被定義在建構函式上，且是預設的可被列舉
Model.method4 = function () {}

// 成員被定義在建構函式上
Object.defineProperty(Model, 'method3', {
  value: function () {}, 
  writable: true, 
  enumerable: false,  // 設定不可被列舉
  configurable: true
})
複製程式碼

可以看出，只有method2是在例項化時才賦值的，一個不存在的屬性是不會有descriptor的，所以這就是為什麼在針對Property Decorator不傳遞第三個引數的原因，至於為什麼靜態成員也沒有傳遞descriptor，目前沒有找到合理的解釋，但是如果明確的要使用，是可以手動獲取的。

就像上述的示例，我們針對四個成員都新增了裝飾器以後，method1和method2第一個引數就是Model.prototype，而method3和method4的第一個引數就是Model。

class Model {
  // 例項成員
  @instance
  method1 () {}
  @instance
  method2 = () => {}

  // 靜態成員
  @static
  static method3 () {}
  @static
  static method4 = () => {}
}

function instance(target) {
  console.log(target.constructor === Model)
}

function static(target) {
  console.log(target === Model)
}
複製程式碼

函式、訪問器、屬性三者裝飾器的使用

函式裝飾器的返回值會預設作為屬性的value描述符的存在，如果返回為undefined則忽略

class Model {
  @log1
  getData1() {}
  @log2
  getData2() {}
}

// 方案一，返回新的value描述符
function log1(tag, name, descriptor) {
  return {
    ...descriptor,
    value(...args) {
      let start = new Date().valueOf()
      try {
        return descriptor.value.apply(this, args)
      } finally {
        let end = new Date().valueOf()
        console.log(`start: ${start} end: ${end} consume: ${end - start}`)
      }
    }
  }
}

// 方案二、修改現有描述符
function log2(tag, name, descriptor) {
  let func = descriptor.value // 先獲取之前的函式

  // 修改對應的value
  descriptor.value = function (...args) {
    let start = new Date().valueOf()
    try {
      return func.apply(this, args)
    } finally {
      let end = new Date().valueOf()
      console.log(`start: ${start} end: ${end} consume: ${end - start}`)
    }
  }
}
複製程式碼

訪問器的Decorator就是get set字首函式了，用於控制屬性的賦值、取值操作，在使用上和函式裝飾器沒有任何區別


class Modal {
  _name = 'Niko'

  @prefix
  get name() { return this._name }
}

function prefix(target, name, descriptor) {
  return {
    ...descriptor,
    get () {
      return `wrap_${this._name}`
    }
  }
}

console.log(new Modal().name) // wrap_Niko
複製程式碼

對於屬性裝飾器是沒有descriptor返回的，並且裝飾器函式的返回值也會被忽略，如果我們需要修改某一個靜態屬性，則需要自己獲取descriptor

class Modal {
  @prefix
  static name1 = 'Niko'
}

function prefix(target, name) {
  let descriptor = Object.getOwnPropertyDescriptor(target, name)

  Object.defineProperty(target, name, {
    ...descriptor,
    value: `wrap_${descriptor.value}`
  })
}

console.log(Modal.name1) // wrap_Niko
複製程式碼

對於一個例項的屬性，則沒有直接修改的方案，不過我們可以結合著一些其他裝飾器來曲線救國。

比如，我們有一個類，會傳入姓名和年齡作為初始化的引數，然後我們要針對這兩個引數設定對應的格式校驗

const validateConf = {} // 儲存校驗資訊

@validator
class Person {
  @validate('string')
  name
  @validate('number')
  age

  constructor(name, age) {
    this.name = name
    this.age = age
  }
}

function validator(constructor) {
  return class extends constructor {
    constructor(...args) {
      super(...args)

      // 遍歷所有的校驗資訊進行驗證
      for (let [key, type] of Object.entries(validateConf)) {
        if (typeof this[key] !== type) throw new Error(`${key} must be ${type}`)
      }
    }
  }
}

function validate(type) {
  return function (target, name, descriptor) {
    // 向全域性物件中傳入要校驗的屬性名及型別
    validateConf[name] = type
  }
}

new Person('Niko', '18')  // throw new error: [age must be number]
複製程式碼

函式引數裝飾器

const parseConf = {}
class Modal {
  @parseFunc
  addOne(@parse('number') num) {
    return num + 1
  }
}

// 在函式呼叫前執行格式化操作
function parseFunc (target, name, descriptor) {
  return {
    ...descriptor,
    value (...arg) {
      // 獲取格式化配置
      for (let [index, type] of parseConf) {
        switch (type) {
          case 'number':  arg[index] = Number(arg[index])             break
          case 'string':  arg[index] = String(arg[index])             break
          case 'boolean': arg[index] = String(arg[index]) === 'true'  break
        }

        return descriptor.value.apply(this, arg)
      }
    }
  }
}

// 向全域性物件中新增對應的格式化資訊
function parse(type) {
  return function (target, name, index) {
    parseConf[index] = type
  }
}

console.log(new Modal().addOne('10')) // 11
複製程式碼

Decorator 用例

log

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

    let log = type => {
      return (target,name,decorator) => {
        const method = decorator.value;
        console.log(method);

        decorator.value = (...args) => {
          console.info(`${type} 正在進行：${name}(${args}) = ?`);
          let result;
          try{
            result = method.apply(target,args);
            console.info(`(${type}) 成功 : ${name}(${args}) => ${result}`);
          }catch(err){
            console.error(`(${type}) 失敗: ${name}(${args}) => ${err}`);
          }
          return result;
        }
      }
    }

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

    const math = new Math();

    // (add) 成功 : add(2,4) => 6
    math.add(2, 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);
        }
      }
    }
  }
}
複製程式碼

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()
      }
    };
  }
}
複製程式碼

更多關於 core-decorators 的例子後面再 Nealyang/PersonalBlog中補充，再加註釋說明。

參考

DDoS 攻擊與防禦：從原理到實踐
2024-05-16
讀《深入分散式快取 - 從原理到實踐》
2020-12-21
分散式快取
入門MyBatis框架我一點都不慌
2020-07-11
MyBatis框架
工具和中介軟體——redis,從底層原理到開發實踐
2020-02-04
Redis
用JS開發跨平臺桌面應用，從原理到實踐
2019-06-10
JS
HarmonyOS Next 對稱金鑰生成全攻略：從原理到實踐
2024-11-18
JSON WEB TOKEN 從原理到實戰
2019-05-27
JSONWeb
從原理到實現動態簡歷
2019-03-02
從原理到實戰，徹底搞懂Nginx
2020-01-09
Nginx
服務發現-從原理到實現
2021-10-18
從原理到實戰，詳解XXE攻擊
2023-10-13
InfluxDB從原理到實戰 - 一篇文章搞懂InfluxDB時區
2019-11-07
UX
資料從業者必讀：抓取了一千億個網頁後我才明白，爬蟲一點都不簡單
2018-09-07
網頁爬蟲
CART演算法解密：從原理到Python實現
2023-11-23
演算法解密Python
BIRCH演算法全解析：從原理到實戰
2023-11-24
演算法
大資料 - MapReduce：從原理到實戰的全面指南
2023-12-03
大資料
從原理到實戰，徹底搞懂Nginx（高階篇）
2020-01-13
Nginx
純 CSS 自定義多行省略：從原理到實現
2021-11-08
CSS
從原理到實戰，全面總結 Android HTTPS 抓包
2022-11-23
AndroidHTTP
支援向量機（SVM）從原理到python程式碼實現
2020-12-10
Python
Node+Express的一點實踐
2018-05-06
Express
PaddlePaddle實戰 | 情感分析演算法從原理到實戰全解
2019-05-22
演算法
支援向量機SVM：從數學原理到實際應用
2023-11-18
如何正確管理HBase的連線，從原理到實戰
2020-04-19
DRY原則的一個簡單實踐
2020-06-12
基於 GraphQL 實踐的一點思考
2019-04-20
從原理到應用，Elasticsearch詳解
2019-08-10
Elasticsearch
從動態代理到Spring AOP（中）
2019-08-02
Spring
從動態代理到Spring AOP（上）
2019-07-18
Spring
實踐 - 搭建Redis一主兩從三哨兵
2022-04-20
Redis
編碼最佳實踐——單一職責原則
2018-11-05
虛擬伺服器管理實踐
2021-05-24
伺服器
quartz （從原理到應用）詳解篇
2018-04-27
quartz
從 0 到 1：我的 Flutter 技術實踐 | 掘金技術徵文
2018-07-10
Flutter
都在講Redis主從複製原理，我來講實踐總結
2021-03-18
Redis
原生JS實現你畫我猜的一點點功能
2019-08-06
JS
React專案實踐（一）從框架配置講起
2019-03-23
React框架
盤點實用資料分析工具，你若一個都不會，那就太可惜了!
2021-10-13