ES6 クラスで関数を拡張する方法: 「this」の移動とクロージャのテクニック

ES6 クラスによる関数の拡張: 'this' とクロージャ トリックを理解する

ES6 で特殊オブジェクトを拡張すると、関数からの継承が可能になり、関数が有効になります関数として呼び出すことができます。ただし、このような呼び出しのロジックを実装するには、'this' 参照について慎重に検討する必要があります。

デフォルトでは、クラス インスタンスでメソッドが呼び出されるとき、'this' はインスタンス自体を指します。ただし、関数が直接呼び出される場合、「this」はグローバル オブジェクト (ウィンドウなど) を指します。これに対処するには、次の 2 つのオプションがあります。

1.コンストラクター内のデータのハードコーディング:

「スーパー」呼び出しは、コード文字列を期待して関数コンストラクターを呼び出すことができます。インスタンス データにアクセスするには、次のようにハードコーディングします。

class Smth extends Function {
  constructor(x) {
    super("return " + JSON.stringify(x) + ";");
  }
}

2.クロージャとクロージャ ラッパー:

より柔軟な解決策として、返された関数にインスタンス データを割り当てるクロージャを作成する必要があります:

class Smth extends Function {
  constructor(x) {
    function smth() { return x; }
    Object.setPrototypeOf(smth, Smth.prototype);
    return smth;
  }
}

この機能を抽象化するには、次のようにします。 'ExtensibleFunction' クラスを導入できます:

class ExtensibleFunction extends Function {
  constructor(f) {
    return Object.setPrototypeOf(f, new.target.prototype);
  }
}

サブクラスは ExtensibleFunction から継承できます:

class Smth extends ExtensibleFunction {
  constructor(x) {
    super(function() { return x; });
  }
}

アロー関数または名前付き関数を使用すると、点が異なる場合がありますが、代替アプローチを提供することもできます。継承動作

以上がES6 クラスで関数を拡張する方法: 「this」の移動とクロージャのテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。