修飾器是es6還是es7的特性

修飾器是es7特性。修飾器是ES7引入的一種與類別相關的語法，用來註解或修改類別和類別的方法，依賴ES5的「Object.defineProperty」方法，寫法為「@函數名稱」；它可以注入到類別、方法、屬性參數上來擴充類別、屬性、方法、參數的功能。

本教學操作環境：windows7系統、ECMAScript 7版、Dell G3電腦。

什麼是修飾器

修飾器(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++;
};

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

core-decorators.js

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

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

【相關推薦：javascript影片教學、web前端】

以上是修飾器是es6還是es7的特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！