修飾器是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);裝飾器還有註解的作用，例如上面我們可以一眼看出上面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]()是一個第三方模組，提供了幾個常見的裝飾器。
【相關推薦：javascript影片教學、web前端】
以上是修飾器是es6還是es7的特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
