es6 デコレータを理解する方法

es6 では、デコレータ パターンは、元のクラスを変更せず、継承を使用せずにオブジェクトの機能を動的に拡張する設計理論です。デコレータの本質は、拡張クラスの属性とクラスに使用される通常の関数です。方法。デコレータを使用する利点: 1. コードが読みやすくなり、デコレータの名前がコメントに相当する; 2. 元のコードを変更せずに元の機能を拡張できる。

このチュートリアルの動作環境: Windows 7 システム、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 を使用することの 2 つの大きな利点が明確にわかります:

• コードの可読性が向上します。デコレータの名前付けはコメントに相当します

• 元のコードを変更せずに元の関数を拡張します

Usage ofデコレータ

ドコレータで変更されたオブジェクトは次の 2 種類です。

• クラスの装飾

• 装飾クラス属性

クラスの装飾

クラス自体を装飾する場合、1 つのパラメーター、つまりクラス自体を受け入れることができます。

誰もがより深く理解できるようにデコレータの動作を分解します。

@decorator
class A {}

// 等同于

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

次の

@testable はデコレータであり、ターゲットは受信クラスです。つまり、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

クラス属性の装飾

クラス属性を装飾する場合、次の 3 つのパラメーターを受け入れることができます:

• クラスのプロトタイプ オブジェクト

• 必須装飾された属性名

• 装飾属性 name の説明オブジェクト

最初に読み取り専用デコレータを定義します

function readonly(target, name, descriptor){
  descriptor.writable = false; // 将可写属性设为false
  return descriptor;
}

読み取り専用装飾を使用しますクラスの 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) が最初に実行されます

Note

関数内に変数宣言があるため、関数を修飾するためにデコレータを使用することはできません。

var counter = 0;

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

@add
function foo() {
}

コンパイル段階では、次のようになります。

var counter;
var add;

@add
function foo() {
}

counter = 0;

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

意図は、カウンターが 1 に等しいことです。しかし実際には、結果は counter が 0 に等しくなります。

decorator の使用シナリオ

Decorator の強力な機能に基づく, さまざまなシナリオを完了できます ここにいくつかの要件があります:

react-redux を使用する場合、次の形式で記述すると、見苦しいし面倒です

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);

非常に簡単になりますデコレータを介して

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {}

ミックスインをデコレータとして記述して、使用法をより簡潔にすることもできます

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

非推奨または非推奨のデコレーターは、メソッドが非推奨になることを示す警告をコンソールに表示します

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: 功能废除了

[関連する推奨事項: JavaScript ビデオ チュートリアル

、

Web フロントエンド

]

以上がes6 デコレータを理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。