ES6裏的修飾器Decorator

　　修飾器（Decorator）是一個函數，用來修改類的行爲。

1、概述

　　ES6 引入了這項功能，目前 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"]})

2、類修飾

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

@testable class MyTestableClass { // ...
} function testable(target) { target.isTestable = true; } MyTestableClass.isTestable // true

　　基本上，修飾器的行爲就是下面這樣

@decorator class A {} // 等同於

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

　　修飾器對類的行爲的改變，是代碼編譯時發生的，而不是在運行時。這意味着，修飾器能在編譯階段運行代碼，也就是說，修飾器本質就是編譯時執行的函數

一、參數

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

function 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

3、方法修飾

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

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)先執行

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

4、注意事項

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

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