web-dev-qa-db-ja.com

callまたはapplyを使用してjavascriptコンストラクターを呼び出すにはどうすればよいですか？

N個の引数を取るために以下の関数を一般化するにはどうすればよいですか？ （呼び出しを使用するか、適用しますか？）

「new」に引数を適用するプログラム的な方法はありますか？コンストラクターを単純な関数のように扱いたくありません。

/**
 * This higher level function takes a constructor and arguments
 * and returns a function, which when called will return the 
 * lazily constructed value.
 * 
 * All the arguments, except the first are pased to the constructor.
 * 
 * @param {Function} constructor
 */ 

function conthunktor(Constructor) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function() {
        console.log(args);
        if (args.length === 0) {
            return new Constructor();
        }
        if (args.length === 1) {
            return new Constructor(args[0]);
        }
        if (args.length === 2) {
            return new Constructor(args[0], args[1]);
        }
        if (args.length === 3) {
            return new Constructor(args[0], args[1], args[2]);
        }
        throw("too many arguments");    
    }
}

qユニットテスト：

test("conthunktorTest", function() {
    function MyConstructor(arg0, arg1) {
        this.arg0 = arg0;
        this.arg1 = arg1;
    }
    MyConstructor.prototype.toString = function() {
        return this.arg0 + " " + this.arg1;
    }

    var thunk = conthunktor(MyConstructor, "hello", "world");
    var my_object = thunk();
    deepEqual(my_object.toString(), "hello world");
});
javascriptcallapply
82
fadedbee

これを試して：

function conthunktor(Constructor) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function() {

         var Temp = function(){}, // temporary constructor
             inst, ret; // other vars

         // Give the Temp constructor the Constructor's prototype
         Temp.prototype = Constructor.prototype;

         // Create a new instance
         inst = new Temp;

         // Call the original Constructor with the temp
         // instance as its context (i.e. its 'this' value)
         ret = Constructor.apply(inst, args);

         // If an object has been returned then return it otherwise
         // return the original instance.
         // (consistent with behaviour of the new operator)
         return Object(ret) === ret ? ret : inst;

    }
}
50
James

これがあなたのやり方です：

function applyToConstructor(constructor, argArray) {
    var args = [null].concat(argArray);
    var factoryFunction = constructor.bind.apply(constructor, args);
    return new factoryFunction();
}

var d = applyToConstructor(Date, [2008, 10, 8, 00, 16, 34, 254]);

呼び出しは少し簡単です

function callConstructor(constructor) {
    var factoryFunction = constructor.bind.apply(constructor, arguments);
    return new factoryFunction();
}

var d = callConstructor(Date, 2008, 10, 8, 00, 16, 34, 254);

これらのいずれかを使用して、ファクトリー関数を作成できます。

var dateFactory = applyToConstructor.bind(null, Date)
var d = dateFactory([2008, 10, 8, 00, 16, 34, 254]);

または

var dateFactory = callConstructor.bind(null, Date)
var d = dateFactory(2008, 10, 8, 00, 16, 34, 254);

ビルトインや関数（Dateなど）を兼ねるコンストラクターだけでなく、どのコンストラクターでも機能します。

ただし、Ecmascript 5 .bind関数が必要です。シムはおそらく正しく動作しません。

他のいくつかの答えのスタイルのより多くの異なるアプローチは、組み込みnewの関数バージョンを作成することです。これは、すべてのビルトイン（Dateなど）では機能しません。

function neu(constructor) {
    // http://www.ecma-international.org/ecma-262/5.1/#sec-13.2.2
    var instance = Object.create(constructor.prototype);
    var result = constructor.apply(instance, Array.prototype.slice.call(arguments, 1));

    // The ECMAScript language types are Undefined, Null, Boolean, String, Number, and Object.
    return (result !== null && typeof result === 'object') ? result : instance;
}

function Person(first, last) {this.first = first;this.last = last};
Person.prototype.hi = function(){console.log(this.first, this.last);};

var p = neu(Person, "Neo", "Anderson");

そして今、もちろんできます.applyまたは.callまたは.bind on neu on通常どおり。

例えば：

var personFactory = neu.bind(null, Person);
var d = personFactory("Harry", "Potter");

ただし、組み込みのセマンティクスを正しく複製することに依存せず、組み込みで正しく機能するため、最初に提供するソリューションの方が良いと感じています。

95
kybernetikos

この関数は、すべての場合でnewと同じです。ただし、おそらく999の回答よりも大幅に遅くなるため、本当に必要な場合にのみ使用してください。

_function applyConstructor(ctor, args) {
    var a = [];
    for (var i = 0; i < args.length; i++)
        a[i] = 'args[' + i + ']';
    return eval('new ctor(' + a.join() + ')');
}
_

PDATE： ES6のサポートが普及すると、次のように記述できるようになります。

_function applyConstructor(ctor, args) {
    return new ctor(...args);
}
_

...しかし、標準ライブラリ関数Reflect.construct()はまさにあなたが探していることをするので、必要はありません！

14
Jason Orendorff

呼び出される実際のコンストラクターを変更する必要がある別のアプローチですが、eval（）を使用したり、構築チェーンに新しいダミー関数を導入するよりもクリーンに思えます...

function conthunktor(Constructor) {
  // Call the constructor
  return Constructor.apply(null, Array.prototype.slice.call(arguments, 1));
}

そして、呼び出されているコンストラクタを変更します...

function MyConstructor(a, b, c) {
  if(!(this instanceof MyConstructor)) {
    return new MyConstructor(a, b, c);
  }
  this.a = a;
  this.b = b;
  this.c = c;
  // The rest of your constructor...
}

だからあなたは試すことができます：

var myInstance = conthunktor(MyConstructor, 1, 2, 3);

var sum = myInstance.a + myInstance.b + myInstance.c; // sum is 6
4
Fuerteflojo

ECMAScript 6では、スプレッド演算子を使用して、コンストラクターを新しいキーワードとともに引数の配列に適用できます。

var dateFields = [2014, 09, 20, 19, 31, 59, 999];
var date = new Date(...dateFields);
console.log(date);  // Date 2014-10-20T15:01:59.999Z
3
Ghasem Kiani

_Object.create_が使用できない場合は、一時コンストラクターを使用するのが最適なソリューションのようです。

_Object.create_が使用可能な場合、それを使用する方がはるかに優れたオプションです。 Node.jsでは、_Object.create_を使用するとコードがはるかに高速になります。 _Object.create_を使用する方法の例を次に示します。

_function applyToConstructor(ctor, args) {
    var new_obj = Object.create(ctor.prototype);
    var ctor_ret = ctor.apply(new_obj, args);

    // Some constructors return a value; make sure to use it!
    return ctor_ret !== undefined ? ctor_ret: new_obj;
}
_

（明らかに、args引数は適用する引数のリストです。）

元々evalを使用して別のツールで作成されたデータを読み取るコードがありました。 （はい、evalは悪です。）これにより、数百から数千の要素のツリーがインスタンス化されます。基本的に、JavaScriptエンジンは、一連のnew ...(...)式の解析と実行を担当しました。 JSON構造を解析するようにシステムを変換しました。つまり、ツリー内の各タイプのオブジェクトに対して呼び出すコンストラクターをコードに決定させる必要があります。テストスイートで新しいコードを実行したとき、evalバージョンに比べて劇的な速度低下が見られたことに驚きました。

  1. evalバージョンのテストスイート：1秒。
  2. 一時コンストラクターを使用したJSONバージョンのテストスイート：5 seconds。
  3. _Object.create_を使用したJSONバージョンのテストスイート：1秒。

テストスイートは複数のツリーを作成します。テストスイートの実行時にapplytoConstructor関数が約125,000回呼び出されることを計算しました。

3
Louis

この場合には、再利用可能なソリューションがあります。 applyまたはcallメソッドで呼び出すすべてのクラスについて、convertToAllowApply（ 'classNameInString'）;を呼び出す前に呼び出す必要があります。クラスは同じScoopeまたはグローバルscoopeにある必要があります（たとえば、ns.classNameを送信しようとはしません...）

コードがあります：

function convertToAllowApply(kName){
    var n = '\n', t = '\t';
    var scrit = 
        'var oldKlass = ' + kName + ';' + n +
        kName + '.prototype.__Creates__ = oldKlass;' + n +

        kName + ' = function(){' + n +
            t + 'if(!(this instanceof ' + kName + ')){'+ n +
                t + t + 'obj = new ' + kName + ';'+ n +
                t + t + kName + '.prototype.__Creates__.apply(obj, arguments);'+ n +
                t + t + 'return obj;' + n +
            t + '}' + n +
        '}' + n +
        kName + '.prototype = oldKlass.prototype;';

    var convert = new Function(scrit);

    convert();
}

// USE CASE:

myKlass = function(){
    this.data = Array.prototype.slice.call(arguments,0);
    console.log('this: ', this);
}

myKlass.prototype.prop = 'myName is myKlass';
myKlass.prototype.method = function(){
    console.log(this);
}

convertToAllowApply('myKlass');

var t1 = myKlass.apply(null, [1,2,3]);
console.log('t1 is: ', t1);
1
danyg