ES6經常使用但被忽略的方法（第十一彈Decorator）

時間 2020-07-11

標籤 es6 經常使用忽略方法第十一 decorator 欄目 JavaScript 简体版

原文原文鏈接

寫在開頭

ES6經常使用但被忽略的方法 系列文章，整理做者認爲一些平常開發可能會用到的一些方法、使用技巧和一些應用場景，細節深刻請查看相關內容鏈接，歡迎補充交流。

Decorator

ES6-Decorator

環境配置

因爲裝飾器目前處於stage 2，因此沒法在瀏覽器中直接使用，咱們須要經過babel編譯爲es5去使用。

咱們若是隻想簡單去使用這樣一個語法去作一個瞭解，咱們能夠簡單配置一下，過程以下：

全局安裝@babel/cli和@babel/core。

npm install -g @babel/core @babel/cli
複製代碼

項目目錄下初始化一個package.json，並安裝decorator的相關babel插件@babel/plugin-proposal-class-properties和 @babel/plugin-proposal-decorators。

npm init -y // 初始化package.json
npm install --save-dev @babel/plugin-proposal-class-properties
npm install --save-dev @babel/plugin-proposal-decorators
複製代碼

在項目根目錄下建立.babelrc文件，並添加一下代碼。

{
  "presets": [],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}
複製代碼

在package.json的scripts中添加編譯命令。

// package.json
// babel inputfile -w（實時編譯）-o（輸出）outputfile
scripts: {
    build: 'babel es6.js -w -o es5.js'
}
複製代碼

在html文件中引入編譯後的文件。

// index.html
<DOCTYPE html>
<html>
...
<body>
...
<script src='./es5.js'></script>
</body>
</html>
複製代碼

介紹

Decorator 提案通過了大幅修改，目前尚未定案，不知道語法會不會再變。 裝飾器（Decorator）是一種與類（class）相關的語法，用來註釋或修改類和類方法，寫成@ +函數名。它能夠放在類和類方法的定義前面。

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

  @throttle(500)
  expensiveMethod() {}
}
複製代碼

使用

類的裝飾

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

@decorator
class A {}

// 等同於
class A {}
A = decorator(A) || A;
複製代碼

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

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

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

@testable(false)
class MyClass {}
MyClass.isTestable // false
複製代碼

裝飾器對類的行爲的改變，是代碼編譯時發生的，而不是在運行時。這意味着，裝飾器能在編譯階段運行代碼。也就是說，裝飾器本質就是編譯時執行的函數。
想添加實例屬性，能夠經過目標類的prototype對象操做。

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

@testable
class MyTestableClass {}

let obj = new MyTestableClass();
obj.isTestable // true
複製代碼

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

方法的裝飾

裝飾器不只能夠裝飾類，還能夠裝飾類的屬性。例如：裝飾器readonly用來裝飾「類」的getName方法。裝飾器函數readonly一共能夠接受三個參數，target（裝飾的對象）、name（裝飾的屬性名稱），descriptor：屬性的描述。

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}
function readonly(target, name, descriptor){
  console.log(target, name, descriptor)
  // descriptor對象原來的值以下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
  descriptor.writable = false; // 設置不可寫
  return descriptor;
}
// 從新getNameAge不生效
Person.prototype.getName = function(name) {
  console.log(name)
}

const per = new Person()
console.log('getName', per.getName('detanx'))
複製代碼

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

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
複製代碼

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

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

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");
複製代碼

若是必定要裝飾函數，能夠採用高階函數的形式直接執行。

function doSomething(name) {
  console.log('Hello, ' + name);
}

function loggingDecorator(wrapped) {
  return function() {
    console.log('Starting');
    const result = wrapped.apply(this, arguments);
    console.log('Finished');
    return result;
  }
}

const wrapped = loggingDecorator(doSomething);
複製代碼

core-decorators.js

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

@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
複製代碼

@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]
複製代碼

@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"?
}
複製代碼

@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.
複製代碼

@suppressWarnings

suppressWarnings裝飾器抑制deprecated裝飾器致使的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
複製代碼

Mixin

在裝飾器的基礎上，能夠實現Mixin模式。Mixin模式，就是對象繼承的一種替代方案，中文譯爲「混入」（mix in），意爲在一個對象之中混入另一個對象的方法。
部署一個通用腳本mixins.js，將 Mixin 寫成一個裝飾器。

函數實現

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

使用mixins這個裝飾器，爲類「混入」各類方法。

import { mixins } from './mixins';

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

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.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
複製代碼

Trait

Trait 也是一種裝飾器，效果與 Mixin 相似，可是提供更多功能，好比防止同名方法的衝突、排除混入某些方法、爲混入的方法起別名等等。html
採用 traits-decorator 這個第三方模塊做爲例子。這個模塊提供的traits裝飾器，不只能夠接受對象，還能夠接受 ES6 類做爲參數。git

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方法了。es6
alias和excludes方法，能夠結合起來使用。github

@traits(TBar::excludes('foo','bar')::alias({baz:'tBar'}))
class MyClass {}
複製代碼

上面代碼排除了TBar的foo方法和bar方法，爲baz方法起了別名tBaz。
as方法則爲上面的代碼提供了另外一種寫法。

@traits(TBar::as({excludes:['foo', 'bar'], alias: {baz: 'exampleBaz'}}))
class MyClass {}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

ES6經常使用但被忽略的方法（第十一彈Decorator）

寫在開頭

相關文章

Decorator

環境配置

介紹

使用

類的裝飾

方法的裝飾

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

core-decorators.js

@autobind

@readonly

@override

@deprecate (別名@deprecated)

@suppressWarnings

Mixin

函數實現

類實現

Trait