js裝飾器原理

裝飾器原理

裝飾器分為兩類: 作用於類的裝飾器，作用於方法的裝飾器

1、原理

查看裝飾器語法在babel-loader轉換后的js代碼，發現 調用裝飾器函數 是對類class進行了一層封裝，並返回新的class。

對應類或者方法可以有多個裝飾器修飾

class Person {
   @readonly
   @valiable
   name() {
       return `${this.firstname}+${this.lastname}`;
   }
}

 

2、作用於 class 裝飾器寫法舉栗

function log (target) {  // 默認傳參為 被修飾的類
    target.prototype.logger = () => {console.log('裝飾器--被調用')};
}

@log                    // log 必須是函數
class Myclass {};

const test = new Myclass();
test.logger();          // 裝飾器--被調用

// 在mobx中裝飾器的應用最為廣泛，@observable @action @computed @asyncAction

 

3、作用於 方法 飾器寫法舉栗

  // 對於類方法的修飾，實際上是操作其描述符

Object.defineProperty(obj, prop, descriptor);
class C {
   @readonly (true);
   method () {
      console.log('cat--');
   }
}

function readonly (value) {
   // target: 類原型
   // key:    被修飾的屬性或者方法
   // descriptor: 被修飾的屬性或方法的描述符對象
   return function (target, key, descriptor) {
      descriptor.writable = !value;
      return descriptor;
   }
}

const c = new C();
c.method = () => {console.log('dog--');} // 重寫了method這個類方法
c.method() // cat--  
// 設置屬性只讀成功