モディファイアは es6 または es7 の機能ですか?

Modifier は es7 の機能です。 Modifier は、ES7 によって導入されたクラス関連の構文です。クラスやクラス メソッドに注釈を付けたり、変更したりするために使用されます。これは、ES5 の「Object.defineProperty」メソッドに依存し、「@関数名」として記述されます。クラス、メソッド、および属性パラメータは、クラス、属性、メソッド、およびパラメータの機能を拡張するために使用されます。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 7、Dell G3 コンピューター。

デコレータとは何ですか?

デコレータは ES7 の構文で、クラスやクラスに注釈を付けたり変更したりするために使用されるクラス関連の構文です。

その外観により、次の 2 つの問題が解決されます:

• 異なるクラス間でのメソッドの共有

• クラスとメソッドのコンパイル時の比較

modifier の動作を変更するには、ラッパー関数を @関数名 として記述します。これは、クラスおよびクラス メソッドの定義の前に配置でき、クラス、プロパティ、または関数に追加の機能を提供するために使用できます。

@frozen class Foo {
  @configurable(false)
  @enumerable(true)
  method() {}
 
  @throttle(500)
  expensiveMethod() {}
}

上記では合計 4 つのデコレータが使用されており、1 つはクラス自体で使用され、他の 3 つはクラス メソッドで使用されます。

デコレータ (Decorator) は新しい概念ではありません。Java や Python などの他の言語は古くから存在しています。ES7 のデコレータ (Decorator) は他の言語の記述方法を利用しています。言語. ですが、ES5 Object.defineProperty メソッドに依存します。

クラスの変更

@testable
class MyTestableClass {
  // ...
}

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

MyTestableClass.isTestable // true

@testable は、MyTestableClass クラスの動作を変更し、静的属性 isTestable を追加するデコレーターです。テスト可能な関数のパラメータのターゲットは、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 は、合計 3 つのパラメータを受け入れることができます。

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 です。デコレータの本来の目的は、クラスのインスタンスを「装飾する」ことですが、この時点ではインスタンスはまだ生成されていないため、プロトタイプを装飾することしかできません (これはクラスの装飾とは異なります。この場合、ターゲット パラメーターはクラス自体を参照します)
• 2 番目のパラメーターは名前です装飾する属性の
3 番目のパラメータは属性の記述オブジェクトです

デコレータにはアノテーションの機能もあります。上記の name メソッドが読み取り専用であることがわかります。

コメントに加えて、デコレータは型チェックにも使用できます。したがって、クラスの場合、この機能は非常に便利です。長期的には、JavaScript コードの静的分析のための重要なツールとなるでしょう。これは TypeScript の実験的な機能としてサポートされています。

デコレータを関数に使用できない理由

関数のプロモーションがあるため、デコレータは関数ではなくクラスとクラス メソッドにのみ使用できます。

var counter = 0;

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

@add
function foo() {}

上記のコードは、実行後にカウンタが 1 になることを意図していますが、実際の結果はカウンタは 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 中国語 Web サイトの他の関連記事を参照してください。