修飾器是es7的特性嗎

本文小編為大家詳細介紹“修飾器是es7的特性嗎”，內容詳細，步驟清晰，細節處理妥當，希望這篇“修飾器是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)：在控制臺顯示一條警告，表示該方法將廢除。

讀到這里，這篇“修飾器是es7的特性嗎”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。