ES6 クラスで関数を拡張し、インスタンス変数にアクセスするにはどうすればよいですか?

ES6 クラスによる関数の拡張

ES6 では、Function オブジェクトのような特別なオブジェクトを拡張する機能が導入されています。これにより、関数を継承し、呼び出されたときに関数のように動作するクラスを作成できます。ただし、このような呼び出しのロジックを実装するには、慎重な検討が必要です。

関数プロトタイプを理解する

クラスを関数として呼び出す場合、this キーワードはグローバル オブジェクトを参照します。クラスインスタンスではなく（ブラウザ環境のウィンドウ）。クラス インスタンスにアクセスするには、関数コンストラクターのコード文字列が必要なため、従来の super() 呼び出しは使用できません。

値をハードコーディングする

1 つのアプローチ

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

(new Smth(256))() // Returns 256

ただし、これはハードコードされた値に依存するため、理想的ではありません。

クロージャの利用

インスタンス変数にアクセスできるクロージャを有効にするには、コンストラクター内にネストされた関数を作成します。

class Smth extends Function {
  constructor(x) {
    // Refer to `smth` instead of `this`
    function smth() {
      return x;
    }
    Object.setPrototypeOf(smth, Smth.prototype);
    return smth;
  }
}

(new Smth(256))() // Returns 256

ExtensibleFunction による抽象化

このパターンを抽象化するには、 ExtensibleFunction クラスを作成できます:

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

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

(new Smth(256))() // Returns 256

このアプローチは、インスタンス変数にアクセスできる拡張可能な関数を作成する再利用可能な方法を提供します。

以上がES6 クラスで関数を拡張し、インスタンス変数にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。