ES6クラスで機能を拡張する方法は？

Question

ES6では、特別なオブジェクトを拡張できます。そのため、関数から継承することが可能です。そのようなオブジェクトは関数として呼び出すことができますが、そのような呼び出しのロジックを実装するにはどうすればよいですか？

class Smth extends Function {
  constructor (x) {
    // What should be done here
    super();
  }
}

(new Smth(256))() // to get 256 at this call?

---

クラスのメソッドは、thisを介してクラスインスタンスへの参照を取得します。ただし、関数として呼び出される場合、thisはwindowを指します。関数として呼び出されたときにクラスインスタンスへの参照を取得するにはどうすればよいですか？

PS： ロシア語で同じ質問

Answer 1

super呼び出しは、コード文字列を想定するFunctionコンストラクターを呼び出します。インスタンスデータにアクセスする場合は、ハードコードするだけです。

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

しかし、それは本当に満足のいくものではありません。クロージャを使用したいです。

返された関数を インスタンスにアクセス可能 変数であるクロージャーにすることは可能ですが、簡単ではありません。良いことは、superを呼び出さなくてもいいということです。ES6クラスコンストラクターから任意のオブジェクトをreturn引き続き使用できます。この場合、次のようにします

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

しかし、私たちはさらに改善し、Smthからこのことを抽象化することができます。

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

class Smth extends ExtensibleFunction {
  constructor(x) {
    super(function() { return x; }); // closure
    // console.log(this); // function() { return x; }
    // console.log(this.prototype); // {constructor: …}
  }
}
class Anth extends ExtensibleFunction {
  constructor(x) {
    super(() => { return this.x; }); // arrow function, no prototype object created
    this.x = x;
  }
}
class Evth extends ExtensibleFunction {
  constructor(x) {
    super(function f() { return f.x; }); // named function
    this.x = x;
  }
}

確かに、これにより継承チェーンに間接レベルの追加レベルが作成されますが、それは必ずしも悪いことではありません（ネイティブFunctionの代わりに拡張できます）。それを避けたい場合は、

function ExtensibleFunction(f) {
  return Object.setPrototypeOf(f, new.target.prototype);
}
ExtensibleFunction.prototype = Function.prototype;

ただし、Smthは静的なFunctionプロパティを動的に継承しないことに注意してください。

Answer 2

これは、プロトタイプをいじることなく、オブジェクトメンバを正しく参照し、正しい継承を維持する呼び出し可能なオブジェクトを作成するための私のアプローチです。

単に：

class ExFunc extends Function {
  constructor() {
    super('...args', 'return this.__call__(...args)');
    return this.bind(this);
  }

  // Example `__call__` method.
  __call__(a, b, c) {
    return [a, b, c];
  }
}

このクラスを拡張し、__call__メソッドを追加します。詳細は以下をご覧ください...

コードとコメントの説明：

// A Class that extends Function so we can create
// objects that also behave like functions, i.e. callable objects.
class ExFunc extends Function {
  constructor() {
    // Here we create a dynamic function with `super`,
    // which calls the constructor of the parent class, `Function`.
    // The dynamic function simply passes any calls onto
    // an overridable object method which I named `__call__`.
    // But there is a problem, the dynamic function created from
    // the strings sent to `super` doesn't have any reference to `this`;
    // our new object. There are in fact two `this` objects; the outer
    // one being created by our class inside `constructor` and an inner
    // one created by `super` for the dynamic function.
    // So the reference to this in the text: `return this.__call__(...args)`
    // does not refer to `this` inside `constructor`.
    // So attempting:
    // `obj = new ExFunc();` 
    // `obj();`
    // Will throw an Error because __call__ doesn't exist to the dynamic function.
    super('...args', 'return this.__call__(...args)');
    
    // `bind` is the simple remedy to this reference problem.
    // Because the outer `this` is also a function we can call `bind` on it
    // and set a new inner `this` reference. So we bind the inner `this`
    // of our dynamic function to point to the outer `this` of our object.
    // Now our dynamic function can access all the members of our new object.
    // So attempting:
    // `obj = new Exfunc();` 
    // `obj();`
    // Will work.
    // We return the value returned by `bind`, which is our `this` callable object,
    // wrapped in a transparent "exotic" function object with its `this` context
    // bound to our new instance (outer `this`).
    // The workings of `bind` are further explained elsewhere in this post.
    return this.bind(this);
  }
  
  // An example property to demonstrate member access.
  get venture() {
    return 'Hank';
  }
  
  // Override this method in subclasses of ExFunc to take whatever arguments
  // you want and perform whatever logic you like. It will be called whenever
  // you use the obj as a function.
  __call__(a, b, c) {
    return [this.venture, a, b, c];
  }
}

// A subclass of ExFunc with an overridden __call__ method.
class DaFunc extends ExFunc {
  get venture() {
    return 'Dean';
  }
  
  __call__(ans) {
    return [this.venture, ans];
  }
}

// Create objects from ExFunc and its subclass.
var callable1 = new ExFunc();
var callable2 = new DaFunc();

// Inheritance is correctly maintained.
console.log('\nInheritance maintained:');
console.log(callable2 instanceof Function);  // true
console.log(callable2 instanceof ExFunc);  // true
console.log(callable2 instanceof DaFunc);  // true

// Test ExFunc and its subclass objects by calling them like functions.
console.log('\nCallable objects:');
console.log( callable1(1, 2, 3) );  // [ 'Hank', 1, 2, 3 ]
console.log( callable2(42) );  // [ 'Dean', 42 ]

repl.itで表示

bindの詳細説明：

function.bind()はfunction.call()とほぼ同様に機能し、同様のメソッドシグネチャを共有します。

fn.call(this, arg1, arg2, arg3, ...); - mdn の詳細

fn.bind(this, arg1, arg2, arg3, ...); - mdn の詳細

両方の最初の引数で、関数内のthisコンテキストを再定義します。追加の引数を値にバインドすることもできます。ただし、callはバインドされた値で関数をすぐに呼び出しますが、bindは、thisと引数が事前設定された、元のオブジェクトを透過的にラップする「エキゾチックな」関数オブジェクトを返します。

したがって、関数を定義するとき、その引数のいくつかをbind：

var foo = function(a, b) {
  console.log(this);
  return a * b;
}

foo = foo.bind(['hello'], 2);

バインドされた関数を残りの引数のみで呼び出し、そのコンテキストは事前設定されます。この場合、['hello']に設定されます。

// We pass in arg `b` only because arg `a` is already set.
foo(2);  // returns 4, logs `['hello']`

Answer 3

Smthインスタンスは、 Proxyapply （および場合によっては construct ）トラップでラップできます。

class Smth extends Function {
  constructor (x) {
    super();
    return new Proxy(this, {
      apply: function(target, thisArg, argumentsList) {
        return x;
      }
    });
  }
}
new Smth(256)(); // 256

Answer 4

更新：

残念ながら、クラスの代わりに関数オブジェクトを返すようになったため、これはまったく機能しません。したがって、実際にはプロトタイプを変更しないとこれを実行できないようです。ラメ。

---

基本的に問題は、thisコンストラクターにFunction値を設定する方法がないことです。これを実際に行う唯一の方法は、後で.bindメソッドを使用することですが、これはあまりクラスフレンドリーではありません。

ヘルパーベースクラスでこれを行うこともできますが、thisは最初のsuper呼び出しの後まで使用できなくなるため、少し注意が必要です。

作業例：

'use strict';

class ClassFunction extends function() {
    const func = Function.apply(null, arguments);
    let bound;
    return function() {
        if (!bound) {
            bound = arguments[0];
            return;
        }
        return func.apply(bound, arguments);
    }
} {
    constructor(...args) {
        (super(...args))(this);
    }
}

class Smth extends ClassFunction {
    constructor(x) {
        super('return this.x');
        this.x = x;
    }
}

console.log((new Smth(90))());

（例には最新のブラウザまたはnode --harmonyが必要です。）

基本的に、ClassFunction extends基本関数は、Functionコンストラクター呼び出しを.bindに似たカスタム関数でラップしますが、最初の呼び出しで後でバインドできます。次に、ClassFunctionコンストラクター自体で、superから返された関数を呼び出します。これは現在バインドされている関数であり、thisを渡してカスタムバインド関数の設定を完了します。

(super(...))(this);

これはすべてかなり複雑ですが、プロトタイプの変更は避けられます。これは、最適化の理由から不適切な形式と見なされ、ブラウザーコンソールで警告を生成する可能性があります。

Answer 5

Bergiの答えからアドバイスを受け、それを NPMモジュール にラップしました。

var CallableInstance = require('callable-instance');

class ExampleClass extends CallableInstance {
  constructor() {
    // CallableInstance accepts the name of the property to use as the callable
    // method.
    super('instanceMethod');
  }

  instanceMethod() {
    console.log("instanceMethod called!");
  }
}

var test = new ExampleClass();
// Invoke the method normally
test.instanceMethod();
// Call the instance itself, redirects to instanceMethod
test();
// The instance is actually a closure bound to itself and can be used like a
// normal function.
test.apply(null, [ 1, 2, 3 ]);

Answer 6

これは、機能を拡張するためのすべてのニーズに応える、私が解決したソリューションであり、非常によく役立っています。この手法の利点は次のとおりです。

• ExtensibleFunctionを拡張する場合、コードはES6クラスを拡張することを慣用的です（いいえ、ふりをするコンストラクターまたはプロキシーをいじくり回します）。
• プロトタイプチェーンはすべてのサブクラスを通じて保持され、instanceof/.constructorは期待される値を返します。
• .bind().apply()および.call()はすべて期待どおりに機能します。これは、これらのメソッドをオーバーライドして、ExtensibleFunction（またはそのサブクラス '）インスタンスではなく、「内部」関数のコンテキストを変更することにより行われます。
• .bind()は、関数コンストラクターの新しいインスタンスを返します（ExtensibleFunctionまたはサブクラス）。 Object.assign()を使用して、バインドされた関数に格納されているプロパティが元の関数のプロパティと一貫していることを確認します。
• クロージャは尊重され、矢印関数は適切なコンテキストを維持し続けます。
• 「内部」関数はSymbolを介して保存され、モジュールまたはIIFE（または参照を民営化する他の一般的な手法）によって難読化できます。

さらに苦労せずに、コード：

// The Symbol that becomes the key to the "inner" function 
const EFN_KEY = Symbol('ExtensibleFunctionKey');

// Here it is, the `ExtensibleFunction`!!!
class ExtensibleFunction extends Function {
  // Just pass in your function. 
  constructor (fn) {
    // This essentially calls Function() making this function look like:
    // `function (EFN_KEY, ...args) { return this[EFN_KEY](...args); }`
    // `EFN_KEY` is passed in because this function will escape the closure
    super('EFN_KEY, ...args','return this[EFN_KEY](...args)');
    // Create a new function from `this` that binds to `this` as the context
    // and `EFN_KEY` as the first argument.
    let ret = Function.prototype.bind.apply(this, [this, EFN_KEY]);
    // For both the original and bound funcitons, we need to set the `[EFN_KEY]`
    // property to the "inner" function. This is done with a getter to avoid
    // potential overwrites/enumeration
    Object.defineProperty(this, EFN_KEY, {get: ()=>fn});
    Object.defineProperty(ret, EFN_KEY, {get: ()=>fn});
    // Return the bound function
    return ret;
  }

  // We'll make `bind()` work just like it does normally
  bind (...args) {
    // We don't want to bind `this` because `this` doesn't have the execution context
    // It's the "inner" function that has the execution context.
    let fn = this[EFN_KEY].bind(...args);
    // Now we want to return a new instance of `this.constructor` with the newly bound
    // "inner" function. We also use `Object.assign` so the instance properties of `this`
    // are copied to the bound function.
    return Object.assign(new this.constructor(fn), this);
  }

  // Pretty much the same as `bind()`
  apply (...args) {
    // Self explanatory
    return this[EFN_KEY].apply(...args);
  }

  // Definitely the same as `apply()`
  call (...args) {
    return this[EFN_KEY].call(...args);
  }
}

/**
 * Below is just a bunch of code that tests many scenarios.
 * If you run this snippet and check your console (provided all ES6 features
 * and console.table are available in your browser [Chrome, Firefox?, Edge?])
 * you should get a fancy printout of the test results.
 */

// Just a couple constants so I don't have to type my strings out twice (or thrice).
const CONSTRUCTED_PROPERTY_VALUE = `Hi, I'm a property set during construction`;
const ADDITIONAL_PROPERTY_VALUE = `Hi, I'm a property added after construction`;

// Lets extend our `ExtensibleFunction` into an `ExtendedFunction`
class ExtendedFunction extends ExtensibleFunction {
  constructor (fn, ...args) {
    // Just use `super()` like any other class
    // You don't need to pass ...args here, but if you used them
    // in the super class, you might want to.
    super(fn, ...args);
    // Just use `this` like any other class. No more messing with fake return values!
    let [constructedPropertyValue, ...rest] = args;
    this.constructedProperty = constructedPropertyValue;
  }
}

// An instance of the extended function that can test both context and arguments
// It would work with arrow functions as well, but that would make testing `this` impossible.
// We pass in CONSTRUCTED_PROPERTY_VALUE just to prove that arguments can be passed
// into the constructor and used as normal
let fn = new ExtendedFunction(function (x) {
  // Add `this.y` to `x`
  // If either value isn't a number, coax it to one, else it's `0`
  return (this.y>>0) + (x>>0)
}, CONSTRUCTED_PROPERTY_VALUE);

// Add an additional property outside of the constructor
// to see if it works as expected
fn.additionalProperty = ADDITIONAL_PROPERTY_VALUE;

// Queue up my tests in a handy array of functions
// All of these should return true if it works
let tests = [
  ()=> fn instanceof Function, // true
  ()=> fn instanceof ExtensibleFunction, // true
  ()=> fn instanceof ExtendedFunction, // true
  ()=> fn.bind() instanceof Function, // true
  ()=> fn.bind() instanceof ExtensibleFunction, // true
  ()=> fn.bind() instanceof ExtendedFunction, // true
  ()=> fn.constructedProperty == CONSTRUCTED_PROPERTY_VALUE, // true
  ()=> fn.additionalProperty == ADDITIONAL_PROPERTY_VALUE, // true
  ()=> fn.constructor == ExtendedFunction, // true
  ()=> fn.constructedProperty == fn.bind().constructedProperty, // true
  ()=> fn.additionalProperty == fn.bind().additionalProperty, // true
  ()=> fn() == 0, // true
  ()=> fn(10) == 10, // true
  ()=> fn.apply({y:10}, [10]) == 20, // true
  ()=> fn.call({y:10}, 20) == 30, // true
  ()=> fn.bind({y:30})(10) == 40, // true
];

// Turn the tests / results into a printable object
let table = tests.map((test)=>(
  {test: test+'', result: test()}
));

// Print the test and result in a fancy table in the console.
// F12 much?
console.table(table);

編集

私は気分が良かったので、npmでこれを パッケージを公開 したいと思いました。

Answer 7

最初にarguments.calleeで解決策を見つけましたが、それはひどいものでした。
。

class Smth extends Function {
  constructor (x) {
    super('return arguments.callee.x');
    this.x = x;
  }
}

(new Smth(90))()

arguments.calleeを使用し、コードを文字列として渡し、非厳密モードで強制的に実行するため、これは悪い方法でした。しかし、applyをオーバーライドするという考えが現れました。

var global = (1,eval)("this");

class Smth extends Function {
  constructor(x) {
    super('return arguments.callee.apply(this, arguments)');
    this.x = x;
  }
  apply(me, [y]) {
    me = me !== global && me || this;
    return me.x + y;
  }
}

テストは、これをさまざまな方法で関数として実行できることを示しています：

var f = new Smth(100);

[
f instanceof Smth,
f(1),
f.call(f, 2),
f.apply(f, [3]),
f.call(null, 4),
f.apply(null, [5]),
Function.prototype.apply.call(f, f, [6]),
Function.prototype.apply.call(f, null, [7]),
f.bind(f)(8),
f.bind(null)(9),
(new Smth(200)).call(new Smth(300), 1),
(new Smth(200)).apply(new Smth(300), [2]),
isNaN(f.apply(window, [1])) === isNaN(f.call(window, 1)),
isNaN(f.apply(window, [1])) === isNaN(Function.prototype.apply.call(f, window, [1])),
] == "true,101,102,103,104,105,106,107,108,109,301,302,true,true"

バージョンあり

super('return arguments.callee.apply(arguments.callee, arguments)');

実際にはbind機能が含まれています。

(new Smth(200)).call(new Smth(300), 1) === 201

バージョンあり

super('return arguments.callee.apply(this===(1,eval)("this") ? null : this, arguments)');
...
me = me || this;

call上のapplyとwindowを矛盾させます：

isNaN(f.apply(window, [1])) === isNaN(f.call(window, 1)),
isNaN(f.apply(window, [1])) === isNaN(Function.prototype.apply.call(f, window, [1])),

そのため、チェックはapplyに移動する必要があります。

super('return arguments.callee.apply(this, arguments)');
...
me = me !== global && me || this;

Answer 8

JavaScriptの機能を利用する簡単なソリューションがあります。クラスのコンストラクタに関数引数として「ロジック」を渡し、そのクラスのメソッドをその関数に割り当ててから、return that function =結果としてのコンストラクターから：

class Funk
{
    constructor (f)
    { let proto       = Funk.prototype;
      let methodNames = Object.getOwnPropertyNames (proto);
      methodNames.map (k => f[k] = this[k]);
      return f;
    }

    methodX () {return 3}
}

let myFunk  = new Funk (x => x + 1);
let two     = myFunk(1);         // == 2
let three   = myFunk.methodX();  // == 3

上記はNode.js 8でテストされました。

上記の例の欠点は、スーパークラスチェーンから継承されたメソッドをサポートしないことです。これをサポートするには、「Object。getOwnPropertyNames（...）」を、継承されたメソッドの名前も返すものに置き換えるだけです。その方法は、スタックオーバーフローに関する他の質問と回答で説明されていると思います:-)。ところで。 ES7が、継承されたメソッドの名前も生成するメソッドを追加した場合は素晴らしいでしょう;-)。

継承されたメソッドをサポートする必要がある場合、上記のクラスに静的メソッドを追加し、すべての継承されたメソッド名とローカルメソッド名を返します。次に、コンストラクターから呼び出します。その後、そのクラスFunkを拡張すると、その静的メソッドも継承されます。