裝飾器

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

裝飾器是一種函式，寫成@ +函式名。它可以放在類和類方法的定義前面

@frozen class Foo {
  @configurable(false)
  @enumerable(true)
  method() {}

  @throttle(500)
  expensiveMethod() {}
}

上面一共用了四個裝飾器，一個用在類本身，另外三個用在類方法。

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

類的裝飾

@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

@testable就是一個裝飾器，它修改了MyTestableClass這個類的行為，為它加上了靜態屬性isTestable。testable函式的引數target是MyTestableClass類本身。

@decorator
class A {}

// 等同於

class A {}
A = decorator(A) || A;
 

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

如果想實現新增多個引數的功能，可以在裝飾器外面再封裝一層函式。

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

@testable('MyTestableClass')
class MyTestableClass {}
MyTestableClass.name // MyTestableClass

@testable('MyClass')
class MyClass {}
MyClass.isTestable // MyClassf
 

上面例子是給類新增一個靜態屬性。
如果想新增例項屬性，可以通過目標類的 Prototype物件操作。

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

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

const Foo = {
  foo() { console.log('foo') }
};

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // 'foo'

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

class MyreactComponent extends React.Component {};

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

有了裝飾器，就可以改寫上面的程式碼。

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

注意，裝飾器對類的行為的改變，是程式碼編譯時發生的，而不是在執行時。這意味著，裝飾器能在編譯階段執行程式碼。也就是說，裝飾器本質就是編譯時執行的函式。

方法的裝飾

class Person {
  // 用來裝飾”類“的 name 方法
  @readonly
  name() { return `${this.first} ${this.last}` }
}

裝飾器函式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++;
};

總之，由於存在函式提升，使得裝飾器不能用於函式。類是不會提升的，所以就沒有這方面的問題。

東莞vi設計https://www.houdianzi.com/dgvi/ 豌豆資源網站大全https://55wd.com

core-decorators.js

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

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