javascript - 如何调用具有动态参数数量的构造函数？

Question

我有一个构造函数，但我不知道它需要多少个参数，例如:

function someCtor(a,b,c){
   var that = this;
   that.a = a;
   that.b = b;
   that.c = c;
}

我需要创建一个函数，它将返回具有动态参数数量的构造函数的实例:

function makeNew(ctor, arguments){
    // this doesn't work, but it shows what I'm trying to achieve
    return new ctor.apply(arguments);
}

我想使用该函数将动态参数传递给构造函数，如下所示:

var instanceOfCtor = makeNew(someCtor, [5,6,7]);

如何实现这个功能？

Answer 1

注意:请参阅末尾的 ES2015 兼容性说明。

您首先创建一个对象，将其底层原型(prototype)设置为构造函数上的 prototype 属性通过 Object.create 引用的对象，然后通过调用构造函数函数#apply:

function makeNew(ctor, arguments){
    var obj = Object.create(ctor.prototype);
    var rv = ctor.apply(obj, arguments);
    return rv && typeof rv === "object" ? rv : obj;
}

请注意最后的小改动，因此我们正确地模拟了 new 运算符:当您通过 new 调用构造函数时，如果它返回一个非null 对象引用，最终成为 new 表达式的结果；如果它返回任何其他内容(或不返回任何内容)，则 new 创建的对象就是结果。所以我们效仿了这一点。

即使在 ES5 之前的浏览器上，您也可以模拟足够多的 Object.create 来做到这一点:

if (!Object.create) {
    Object.create = function(proto, props) {
        if (typeof props !== "undefined") {
            throw new Error("The second argument of Object.create cannot be shimmed.");
        }
        function ctor() { }
        ctor.prototype = proto;
        return new ctor;
    };
}

---

ES2015 兼容性说明

如果你调用的构造函数是通过 ES2015 的 class 语法创建的，上面的方法将不起作用，因为你不能那样调用 ES2015 class 构造函数。例如:

class Example {
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }
}

const e = Object.create(Example.prototype);
Example.apply(e, [1, 2]); // TypeError: Class constructor Example cannot be invoked without 'new' (or similar)

好消息是，这只会发生在兼容 ES2015+ 的 JavaScript 引擎上，并且只有在构造函数是通过 class 创建的情况下才会发生；坏消息是它可能会发生。

那么如何使您的 makeNew 防弹呢？

事实证明这很容易，因为 ES2015 还添加了 Reflect.construct，它完全按照您希望 makeNew 执行的操作，但以兼容的方式执行具有 class 构造函数和 function 构造函数。因此，您可以对 Reflect.construct 进行特征检测并在它存在时使用它(ES2015 JavaScript 引擎，因此可能已经使用 class 创建了一个构造函数)并返回到上面如果它不存在(ES2015 之前的引擎，周围不会有任何 class 构造函数):

var makeNew; // `var` because we have to avoid any ES2015+ syntax
if (typeof Reflect === "object" && Reflect && typeof Reflect.construct === "function") {
    // This is an ES2015-compatible JavaScript engine, use `Reflect.construct`
    makeNew = Reflect.construct;
} else {
    makeNew = function makeNew(ctor, arguments){
        var obj = Object.create(ctor.prototype);
        var rv = ctor.apply(obj, arguments);
        return rv && typeof rv === "object" ? rv : obj;
    };
}

这是纯 ES5 语法，因此在 ES5 引擎上运行，但使用 ES2015 的 Reflect.construct(如果存在)。