裝飾器(Decorator)

https://juejin.im/post/5e683e11518825495e105de6html

文章首發於我的博客java

前言

JavaScript裝飾器(Decorator)的語法如今處於 Stage 2 階段，具體的能夠查看 proposal-decorators。react

文章下面的內容是根據之前的提案同時參考了一些文章，已經有點過期了。git

最近會好好看一下官方的一些規範，對內容作出修改。感謝 @justjavac大大指出這個致命的錯誤說法，以後在學習的時候也會注意不能老是看如今的一些文章，技術文章是有時效性的，是要多看官方的一些文檔和規範。es6

裝飾器

裝飾器(Decorator)目前，是一種與類相關的語法，用來註釋或修改類和類的方法。github

裝飾器是一種函數，寫成 @ + 函數名。它能夠放在類和類方法的定義前面typescript

@frozen class Person {
  @readonly
  age() {}

  @log
  sayName() {}
}
複製代碼

上面一共用了三個裝飾器，一個用在類自己，另外兩個用在類方法。redux

裝飾器(Decorator) 也並非一個新的概念，其餘語言好比 Java，Python等已經很早就有了，裝飾器(Decorator)借鑑了其餘語言的寫法，不過依賴於ES5的Object.defineProperty 方法。babel

類的裝飾

@name
class A {
  // ...
}

function name(target) {
  target.name = 'A';
}

A.name // A

複製代碼

@name就是一個裝飾器，它修改了A這個類的行爲，爲它加上了靜態屬性name。name函數的參數target是A類自己。app

@decorator
class A {}

// 等同於

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

也就是說，裝飾器是一個對類進行處理的函數。裝飾器函數的第一個參數，就是所要裝飾的目標類。

若是想實現添加多個參數的功能，能夠在裝飾器外面再封裝一層函數。

function name(name) {
    return function(target) {
      target.name = name;
    }
  }

@name('A')
class A {}
A.name // A

@name('B')
class B {}
B.name // B
複製代碼

上面例子是給類添加一個靜態屬性（靜態屬性是加上類上面的，在實例上不能訪問）。

若是想添加實例屬性，能夠經過目標類的 Prototype對象操做。

export function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list)
  }
}

// app.js
import { mixins } from './mixins'

const log = {
  log() { console.log('這是一條日誌輸出') }
};

@mixins(log)
class A {}

let a = new A();
a.log() // '這是一條日誌輸出'
複製代碼

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

class MyReactComponent extends React.Component {};

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

有了裝飾器，就能夠改寫上面的代碼。

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

因爲裝飾器如今還處於草案階段，因此 react-redux 官方不支持或不建議將connect用做裝飾器issues

方法的裝飾

class Person {
  // 用來裝飾」類「的 name 方法
  @readonly
  name() { return `${this.name}` }
}
複製代碼

裝飾器函數readonly一共能夠接受三個參數。

function readonly(target, name, descriptor){
  // descriptor對象原來的值以下
  // {
  // value: specifiedFunction,
  // enumerable: false,
  // configurable: true,
  // writable: true
  // };
  descriptor.writable = false;
  return descriptor;
}

readonly(Person.prototype, 'name', descriptor);
// 相似於
Object.defineProperty(Person.prototype, 'name', descriptor);
複製代碼

裝飾器第一個參數是類的原型對象，上例是Person.prototype，裝飾器的本意是要「裝飾」類的實例，可是這個時候實例還沒生成，因此只能去裝飾原型（這不一樣於類的裝飾，那種狀況時target參數指的是類自己）
第二個參數是所要裝飾的屬性名
第三個參數是該屬性的描述對象

裝飾器還有註釋的做用，好比上面咱們能夠一眼看出上面 name的方法是隻讀的。除了註釋，裝飾器還能用來類型檢查。因此，對於類來講，這項功能至關有用。從長期來看，它將是 JavaScript 代碼靜態分析的重要工具。在TypeScript裏已作爲一項實驗性特性予以支持。

爲何裝飾器不能用於函數

裝飾器只能用於類和類的方法，不能用於函數，由於存在函數提高。

var counter = 0;

var add = function () {
  counter++;
};

@add
function foo() {}
複製代碼

上面的代碼，意圖是執行後counter等於 1，可是實際上結果是counter等於 0。由於函數提高，使得實際執行的代碼是下面這樣。

@add
function foo() {
}

var counter;
var add;

counter = 0;

add = function () {
  counter++;
};
複製代碼

總之，因爲存在函數提高，使得裝飾器不能用於函數。類是不會提高的，因此就沒有這方面的問題。

core-decorators.js

core-decorators.js是一個第三方模塊，提供了幾個常見的裝飾器。

@autobind：使得方法中的this對象，綁定原始對象
@readonly：使得屬性或方法不可寫。
@override：檢查子類的方法，是否正確覆蓋了父類的同名方法，若是不正確會報錯。
@deprecate (別名@deprecated)：在控制檯顯示一條警告，表示該方法將廢除。

應用

有一個方法，不少類都須要，好比只讀，打印日誌，防抖，節流等等，這時就能夠把這些公共的方法用裝飾器的形式添加到類上面。這種寫法比單獨地在每一個類裏單獨調用這些公共方法看上去會清楚不少（裝飾器有註釋的做用，清晰明瞭）。

可是實際實現的時候要注意若是一個類自己或類方法，有多個裝飾器的時候，要注意他們的調用順序。

已經有不少第三方庫提供了不少常見的裝飾器，具體的能夠直接去github上搜索，若是須要的不是不少的話，能夠本身實現。

目前，Babel轉碼器已經支持Decorator，只要勾選Experimental，就能支持Decorator的在線轉碼。項目中經過配置@babel/plugin-proposal-decorators插件就可使用裝飾器了。

裝飾器(Decorator)

前言

目錄

裝飾器

類的裝飾

方法的裝飾

爲何裝飾器不能用於函數

core-decorators.js

應用

參考