005.ES2016新特性--裝飾器

時間  2019-11-08
標籤 005.es2016 特性 裝飾 简体版
原文   原文鏈接

裝飾器在設計階段能夠對類和屬性進行註釋和修改，在Angular2中裝飾器很是經常使用，能夠用來定義組件、指令以及管道，而且能夠與框架提供的依賴注入機制配合使用。
從本質上上講，裝飾器的最大做用是修改預約義好的邏輯，或者給各類結構添加一些元數據。javascript

1. 做用

ES2016中的裝飾器只是一種語法糖而已，編譯時會把註解的代碼翻譯成咱們熟悉的那種形式。java

1.1. 改變程序的行爲

經過裝飾器，改變程序的行爲，典型的用法是把方法和屬性標識爲已過時。Angular2已經內置了一組預約義好的裝飾器，用以提升代碼的可讀性，這些裝飾器都定義在core-decorators.js中，這個項目是由Jay Phelps發起的。node

1.2. 面向切面編程

裝飾器的另外一個應用場景就是用在聲明式語法裏面，從而實現面向切面的編程，提供這一功能的庫叫作aspect.js。git

2. 裝飾器詳解

本部份內容來源於阮一峯的《ECMAScript 6 入門》一書es6

2.1. 類的裝飾

裝飾器（Decorator）是一個函數，用來修改類的行爲。這是ES7的一個提案，目前Babel轉碼器已經支持。github

裝飾器對類的行爲的改變，是代碼編譯時發生的，而不是在運行時。這意味着，裝飾器能在編譯階段運行代碼。shell

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

@testable
class MyTestableClass {}

console.log(MyTestableClass.isTestable) // true

上面代碼中，@testable就是一個裝飾器。它修改了MyTestableClass這個類的行爲，爲它加上了靜態屬性isTestable。npm

基本上，裝飾器的行爲就是下面這樣。編程

@decorator
class A {}

// 等同於

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

也就是說，裝飾器本質就是編譯時執行的函數。bash

裝飾器函數的第一個參數，就是所要裝飾的目標類。

function testable(target) {
  // ...
}

上面代碼中，testable函數的參數target，就是會被裝飾的類。

若是以爲一個參數不夠用，能夠在裝飾器外面再封裝一層函數。

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

@testable(true)
class MyTestableClass {}
MyTestableClass.isTestable // true

@testable(false)
class MyClass {}
MyClass.isTestable // false

上面代碼中，裝飾器testable能夠接受參數，這就等於能夠修改裝飾器的行爲。

前面的例子是爲類添加一個靜態屬性，若是想添加實例屬性，能夠經過目標類的prototype對象操做。

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

@testable
class MyTestableClass {}

let obj = new MyTestableClass();
obj.isTestable // true

上面代碼中，裝飾器函數testable是在目標類的prototype對象上添加屬性，所以就能夠在實例上調用。

下面是另一個例子。

// mixins.js
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'

上面代碼經過裝飾器mixins，把Foo類的方法添加到了MyClass的實例上面。能夠用Object.assign()模擬這個功能。

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

class MyClass {}

Object.assign(MyClass.prototype, Foo);

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

2.2. 方法的裝飾

裝飾器不只能夠裝飾類，還能夠裝飾類的屬性。

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}

上面代碼中，裝飾器readonly用來裝飾「類」的name方法。

此時，裝飾器函數一共能夠接受三個參數，第一個參數是所要裝飾的目標對象，第二個參數是所要裝飾的屬性名，第三個參數是該屬性的描述對象。

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);

上面代碼說明，裝飾器（readonly）會修改屬性的描述對象（descriptor），而後被修改的描述對象再用來定義屬性。

下面是另外一個例子，修改屬性描述對象的enumerable屬性，使得該屬性不可遍歷。

class Person {
  @nonenumerable
  get kidCount() { return this.children.length; }
}

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

下面的@log裝飾器，能夠起到輸出日誌的做用。

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

function log(target, name, descriptor) {
  var oldValue = descriptor.value;

  descriptor.value = function() {
    console.log(`Calling "${name}" with`, arguments);
    return oldValue.apply(null, arguments);
  };

  return descriptor;
}

const math = new Math();

// passed parameters should get logged now
math.add(2, 4);

上面代碼中，@log裝飾器的做用就是在執行原始的操做以前，執行一次console.log，從而達到輸出日誌的目的。

裝飾器有註釋的做用。

@testable
class Person {
  @readonly
  @nonenumerable
  name() { return `${this.first} ${this.last}` }
}

從上面代碼中，咱們一眼就能看出，Person類是可測試的，而name方法是隻讀和不可枚舉的。

若是同一個方法有多個裝飾器，會像剝洋蔥同樣，先從外到內進入，而後由內向外執行。

function dec(id){
    console.log('evaluated', id);
    return (target, property, descriptor) => console.log('executed', id);
}

class Example {
    @dec(1)
    @dec(2)
    method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1

上面代碼中，外層裝飾器@dec(1)先進入，可是內層裝飾器@dec(2)先執行。

除了註釋，裝飾器還能用來類型檢查。因此，對於類來講，這項功能至關有用。從長期來看，它將是JavaScript代碼靜態分析的重要工具。

2.3. 爲何裝飾器不能用於函數？

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

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++;
};

下面是另外一個例子。

var readOnly = require("some-decorator");

@readOnly
function foo() {
}

上面代碼也有問題，由於實際執行是下面這樣。

var readOnly;

@readOnly
function foo() {
}

readOnly = require("some-decorator");

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

2.4. core-decorators.js

core-decorators.js是一個第三方模塊，提供了幾個常見的裝飾器，經過它能夠更好地理解裝飾器。

（1）@autobind

autobind裝飾器使得方法中的this對象，綁定原始對象。

import { autobind } from 'core-decorators';

class Person {
  @autobind
  getPerson() {
    return this;
  }
}

let person = new Person();
let getPerson = person.getPerson;

getPerson() === person;
// true

（2）@readonly

readonly裝飾器使得屬性或方法不可寫。

import { readonly } from 'core-decorators';

class Meal {
  @readonly
  entree = 'steak';
}

var dinner = new Meal();
dinner.entree = 'salmon';
// Cannot assign to read only property 'entree' of [object Object]

（3）@override

override裝飾器檢查子類的方法，是否正確覆蓋了父類的同名方法，若是不正確會報錯。

import { override } from 'core-decorators';

class Parent {
  speak(first, second) {}
}

class Child extends Parent {
  @override
  speak() {}
  // SyntaxError: Child#speak() does not properly override Parent#speak(first, second)
}

// or

class Child extends Parent {
  @override
  speaks() {}
  // SyntaxError: No descriptor matching Child#speaks() was found on the prototype chain.
  //
  //   Did you mean "speak"?
}

（4）@deprecate (別名@deprecated)

deprecate或deprecated裝飾器在控制檯顯示一條警告，表示該方法將廢除。

import { deprecate } from 'core-decorators';

class Person {
  @deprecate
  facepalm() {}

  @deprecate('We stopped facepalming')
  facepalmHard() {}

  @deprecate('We stopped facepalming', { url: 'http://knowyourmeme.com/memes/facepalm' })
  facepalmHarder() {}
}

let person = new Person();

person.facepalm();
// DEPRECATION Person#facepalm: This function will be removed in future versions.

person.facepalmHard();
// DEPRECATION Person#facepalmHard: We stopped facepalming

person.facepalmHarder();
// DEPRECATION Person#facepalmHarder: We stopped facepalming
//
//     See http://knowyourmeme.com/memes/facepalm for more details.
//

（5）@suppressWarnings

suppressWarnings裝飾器抑制decorated裝飾器致使的console.warn()調用。可是，異步代碼發出的調用除外。

import { suppressWarnings } from 'core-decorators';

class Person {
  @deprecated
  facepalm() {}

  @suppressWarnings
  facepalmWithoutWarning() {
    this.facepalm();
  }
}

let person = new Person();

person.facepalmWithoutWarning();
// no warning is logged

2.5. 使用裝飾器實現自動發佈事件

咱們可使用裝飾器，使得對象的方法被調用時，自動發出一個事件。

import postal from "postal/lib/postal.lodash";

export default function publish(topic, channel) {
  return function(target, name, descriptor) {
    const fn = descriptor.value;

    descriptor.value = function() {
      let value = fn.apply(this, arguments);
      postal.channel(channel || target.channel || "/").publish(topic, value);
    };
  };
}

上面代碼定義了一個名爲publish的裝飾器，它經過改寫descriptor.value，使得原方法被調用時，會自動發出一個事件。它使用的事件「發佈/訂閱」庫是Postal.js。

它的用法以下。

import publish from "path/to/decorators/publish";

class FooComponent {
  @publish("foo.some.message", "component")
  someMethod() {
    return {
      my: "data"
    };
  }
  @publish("foo.some.other")
  anotherMethod() {
    // ...
  }
}

之後，只要調用someMethod或者anotherMethod，就會自動發出一個事件。

let foo = new FooComponent();

foo.someMethod() // 在"component"頻道發佈"foo.some.message"事件，附帶的數據是{ my: "data" }
foo.anotherMethod() // 在"/"頻道發佈"foo.some.other"事件，不附帶數據

2.6. Mixin

在裝飾器的基礎上，能夠實現Mixin模式。所謂Mixin模式，就是對象繼承的一種替代方案，中文譯爲「混入」（mix in），意爲在一個對象之中混入另一個對象的方法。

請看下面的例子。

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

class MyClass {}

Object.assign(MyClass.prototype, Foo);

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

上面代碼之中，對象Foo有一個foo方法，經過Object.assign方法，能夠將foo方法「混入」MyClass類，致使MyClass的實例obj對象都具備foo方法。這就是「混入」模式的一個簡單實現。

下面，咱們部署一個通用腳本mixins.js，將mixin寫成一個裝飾器。

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

而後，就可使用上面這個裝飾器，爲類「混入」各類方法。

import { mixins } from './mixins';

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

@mixins(Foo)
class MyClass {}

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

經過mixins這個裝飾器，實現了在MyClass類上面「混入」Foo對象的foo方法。

不過，上面的方法會改寫MyClass類的prototype對象，若是不喜歡這一點，也能夠經過類的繼承實現mixin。

class MyClass extends MyBaseClass {
  /* ... */
}

上面代碼中，MyClass繼承了MyBaseClass。若是咱們想在MyClass裏面「混入」一個foo方法，一個辦法是在MyClass和MyBaseClass之間插入一個混入類，這個類具備foo方法，而且繼承了MyBaseClass的全部方法，而後MyClass再繼承這個類。

let MyMixin = (superclass) => class extends superclass {
  foo() {
    console.log('foo from MyMixin');
  }
};

上面代碼中，MyMixin是一個混入類生成器，接受superclass做爲參數，而後返回一個繼承superclass的子類，該子類包含一個foo方法。

接着，目標類再去繼承這個混入類，就達到了「混入」foo方法的目的。

class MyClass extends MyMixin(MyBaseClass) {
  /* ... */
}

let c = new MyClass();
c.foo(); // "foo from MyMixin"

若是須要「混入」多個方法，就生成多個混入類。

class MyClass extends Mixin1(Mixin2(MyBaseClass)) {
  /* ... */
}

這種寫法的一個好處，是能夠調用super，所以能夠避免在「混入」過程當中覆蓋父類的同名方法。

let Mixin1 = (superclass) => class extends superclass {
  foo() {
    console.log('foo from Mixin1');
    if (super.foo) super.foo();
  }
};

let Mixin2 = (superclass) => class extends superclass {
  foo() {
    console.log('foo from Mixin2');
    if (super.foo) super.foo();
  }
};

class S {
  foo() {
    console.log('foo from S');
  }
}

class C extends Mixin1(Mixin2(S)) {
  foo() {
    console.log('foo from C');
    super.foo();
  }
}

上面代碼中，每一次混入發生時，都調用了父類的super.foo方法，致使父類的同名方法沒有被覆蓋，行爲被保留了下來。

new C().foo()
// foo from C
// foo from Mixin1
// foo from Mixin2
// foo from S

2.7. Trait

Trait也是一種裝飾器，效果與Mixin相似，可是提供更多功能，好比防止同名方法的衝突、排除混入某些方法、爲混入的方法起別名等等。

下面採用traits-decorator這個第三方模塊做爲例子。這個模塊提供的traits裝飾器，不只能夠接受對象，還能夠接受ES6類做爲參數。

import { traits } from 'traits-decorator';

class TFoo {
  foo() { console.log('foo') }
}

const TBar = {
  bar() { console.log('bar') }
};

@traits(TFoo, TBar)
class MyClass { }

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

上面代碼中，經過traits裝飾器，在MyClass類上面「混入」了TFoo類的foo方法和TBar對象的bar方法。

Trait不容許「混入」同名方法。

import { traits } from 'traits-decorator';

class TFoo {
  foo() { console.log('foo') }
}

const TBar = {
  bar() { console.log('bar') },
  foo() { console.log('foo') }
};

@traits(TFoo, TBar)
class MyClass { }
// 報錯
// throw new Error('Method named: ' + methodName + ' is defined twice.');
//        ^
// Error: Method named: foo is defined twice.

上面代碼中，TFoo和TBar都有foo方法，結果traits裝飾器報錯。

一種解決方法是排除TBar的foo方法。

import { traits, excludes } from 'traits-decorator';

class TFoo {
  foo() { console.log('foo') }
}

const TBar = {
  bar() { console.log('bar') },
  foo() { console.log('foo') }
};

@traits(TFoo, TBar::excludes('foo'))
class MyClass { }

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

上面代碼使用綁定運算符（::）在TBar上排除foo方法，混入時就不會報錯了。

另外一種方法是爲TBar的foo方法起一個別名。

import { traits, alias } from 'traits-decorator';

class TFoo {
  foo() { console.log('foo') }
}

const TBar = {
  bar() { console.log('bar') },
  foo() { console.log('foo') }
};

@traits(TFoo, TBar::alias({foo: 'aliasFoo'}))
class MyClass { }

let obj = new MyClass();
obj.foo() // foo
obj.aliasFoo() // foo
obj.bar() // bar

上面代碼爲TBar的foo方法起了別名aliasFoo，因而MyClass也能夠混入TBar的foo方法了。

alias和excludes方法，能夠結合起來使用。

@traits(TExample::excludes('foo','bar')::alias({baz:'exampleBaz'}))
class MyClass {}

上面代碼排除了TExample的foo方法和bar方法，爲baz方法起了別名exampleBaz。

as方法則爲上面的代碼提供了另外一種寫法。

@traits(TExample::as({excludes:['foo', 'bar'], alias: {baz: 'exampleBaz'}}))
class MyClass {}

2.8. Babel轉碼器的支持

目前，Babel轉碼器已經支持Decorator。

首先，安裝babel-core和babel-plugin-transform-decorators。因爲後者包括在babel-preset-stage-0之中，因此改成安裝babel-preset-stage-0亦可。

$ npm install babel-core babel-plugin-transform-decorators

而後，設置配置文件.babelrc。

{
  "plugins": ["transform-decorators"]
}

這時，Babel就能夠對Decorator轉碼了。

腳本中打開的命令以下。

babel.transform("code", {plugins: ["transform-decorators"]})

Babel的官方網站提供一個在線轉碼器，只要勾選Experimental，就能支持Decorator的在線轉碼。

附錄

基於ts的編譯執行

tsc decorator-method.ts -t es5 -experimentalDecorators
node decorator-method.js
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程