es6 裝飾器怎麼理解 - tw511教學網

在es6中，裝飾者模式是一種在不改變原類和使用繼承的情況下，動態地擴充套件物件功能的設計理論；裝飾者其本質就是一個普通的函數，用於擴充套件類屬性和類方法。使用裝飾器的優點：1、程式碼可讀性變強了，裝飾器命名相當於一個註釋；2、在不改變原有程式碼情況下，對原來功能進行擴充套件。

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

怎麼理解ES6中 Decorator 的？

Decorator，即裝飾器，從名字上很容易讓我們聯想到裝飾者模式

簡單來講，裝飾者模式就是一種在不改變原類和使用繼承的情況下，動態地擴充套件物件功能的設計理論。

ES6中Decorator功能亦如此，其本質也不是什麼高大上的結構，就是一個普通的函數，用於擴充套件類屬性和類方法

這裡定義一個士兵，這時候他什麼裝備都沒有

class soldier{ 
}
登入後複製

定義一個得到 AK 裝備的函數，即裝飾器

function strong(target){
    target.AK = true
}
登入後複製

使用該裝飾器對士兵進行增強

@strong
class soldier{
}
登入後複製

這時候士兵就有武器了

soldier.AK // true
登入後複製

上述程式碼雖然簡單，但也能夠清晰看到了使用Decorator（裝飾器）兩大優點：

程式碼可讀性變強了，裝飾器命名相當於一個註釋
在不改變原有程式碼情況下，對原來功能進行擴充套件

裝飾器的用法

Docorator修飾物件為下面兩種：

類的裝飾
類屬性的裝飾

類的裝飾

當對類本身進行裝飾的時候，能夠接受一個引數，即類本身

將裝飾器行為進行分解，大家能夠有個更深入的瞭解

@decorator
class A {}

// 等同於

class A {}
A = decorator(A) || A;
登入後複製

下面@testable就是一個裝飾器，target就是傳入的類，即MyTestableClass，實現了為類新增靜態屬性

@testable
class MyTestableClass {
  // ...
}

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

MyTestableClass.isTestable // true
登入後複製

如果想要傳遞引數，可以在裝飾器外層再封裝一層函數

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

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

@testable(false)
class MyClass {}
MyClass.isTestable // false
登入後複製

類屬性的裝飾

當對類屬性進行裝飾的時候，能夠接受三個引數：

類的原型物件
需要裝飾的屬性名
裝飾屬性名的描述物件

首先定義一個readonly裝飾器

function readonly(target, name, descriptor){
  descriptor.writable = false; // 將可寫屬性設為false
  return descriptor;
}
登入後複製

使用readonly裝飾類的name方法

class Person {
  @readonly
  name() { return `${this.first} ${this.last}` }
}
登入後複製

相當於以下呼叫

readonly(Person.prototype, 'name', descriptor);
登入後複製

如果一個方法有多個裝飾器，就像洋蔥一樣，先從外到內進入，再由內到外執行

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

注意

裝飾器不能用於修飾函數，因為函數存在變數宣告情況

var counter = 0;

var add = function () {
  counter++;
};

@add
function foo() {
}
登入後複製

編譯階段，變成下面

var counter;
var add;

@add
function foo() {
}

counter = 0;

add = function () {
  counter++;
};
登入後複製

意圖是執行後counter等於 1，但是實際上結果是counter等於 0

裝飾器的使用場景

基於Decorator強大的作用，我們能夠完成各種場景的需求，下面簡單列舉幾種：

使用react-redux的時候，如果寫成下面這種形式，既不雅觀也很麻煩

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
登入後複製

通過裝飾器就變得簡潔多了

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}
登入後複製

將mixins，也可以寫成裝飾器，讓使用更為簡潔了

function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}

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

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // "foo"
登入後複製

下面再講講core-decorators.js幾個常見的裝飾器

@antobind

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]
登入後複製

@deprecate

deprecate或deprecated裝飾器在控制檯顯示一條警告，表示該方法將廢除

import { deprecate } from 'core-decorators';

class Person {
  @deprecate
  facepalm() {}

  @deprecate('功能廢除了')
  facepalmHard() {}
}

let person = new Person();

person.facepalm();
// DEPRECATION Person#facepalm: This function will be removed in future versions.

person.facepalmHard();
// DEPRECATION Person#facepalmHard: 功能廢除了
登入後複製

【相關推薦：、】

以上就是es6 裝飾器怎麼理解的詳細內容，更多請關注TW511.COM其它相關文章！