JavaScript 中的动态对象构造？

Question

当我想使用从其他地方提供的参数调用 javascript 中的函数时，我可以使用该函数的 apply 方法，例如：

array = ["arg1", 5, "arg3"] 
...
someFunc.apply(null, array);

但是如果我需要以类似的方式调用构造函数怎么办？这似乎不起作用：

array = ["arg1", 5, "arg3"] 
...
someConstructor.apply({}, array);

至少不像我尝试的那样：

template = ['string1', string2, 'etc'];
var resultTpl = Ext.XTemplate.apply({}, template);

这不起作用枯萎：

Ext.XTemplate.prototype.constructor.apply({}, template);

有什么方法可以使其起作用吗？ （在这种特殊情况下，我发现 new Ext.XTemplate(template) 可以工作，但我对一般情况感兴趣）

类似的问题，但特定于内置类型，没有答案，我可以使用: 通过调用prototype.constructor.apply实例化JavaScript对象

谢谢。

编辑：

时间已经过去了，ES6 和转译器现在已经成为主流。 在 ES6 中，做我想做的事情很简单：new someConstructor(...array)。 Babel 会将其转换为 ES5 new (Function.prototype.bind.apply(someConstructor, [null].concat( array)))(); 这在 如何构造 JavaScript 对象（使用“apply”）？。

Answer 1

没有简单、直接的方法可以使用构造函数来完成此操作。这是因为当您使用 new 关键字调用构造函数时会发生特殊的事情，因此如果您不打算这样做，则必须模拟所有这些特殊的事情。它们是：

1. 创建一个新的对象实例（您正在这样做）。
2. 将该对象的内部原型设置为构造函数的 prototype 属性。
3. 设置该对象的constructor 属性。
4. 使用该对象实例作为 this 值调用构造函数（您正在这样做）。
5. 处理构造函数的特殊返回值。

我认为就是这样，但值得在

因此，如果您可以避免它并直接使用构造函数，我会这样做。 :-) 如果你做不到，你仍然可以做到，只是很尴尬并且需要解决方法。 （另请参阅此相关答案 在 StackOverflow 上，尽管我在这里介绍了所有内容 [然后还介绍了一些]。）

您最大的问题是上面的#2：设置对象的内部原型。很长一段时间以来，没有标准的方法来做到这一点。某些浏览器支持执行此操作的 __proto__ 属性，因此您可以使用它（如果存在）。好消息是 ECMAScript 5 引入了一种明确执行此操作的方法：Object.create。所以像 Chrome 这样的尖端浏览器就会有这个功能。但是，如果您使用的浏览器既没有 Object.create 也没有 __proto__，那就有点难看了：

1) 定义一个自定义构造函数。

2) 将其 prototype 属性设置为真实构造函数的 prototype 属性

3) 使用它创建一个空白对象实例。

它会为您处理原型。然后继续：

4) 将该实例上的 constructor 属性替换为真正的构造函数。

5) 通过apply调用真正的构造函数。

6）如果真正的构造函数的返回值是一个对象，就用它来代替你创建的那个；否则，请使用您创建的那个。

像这样的东西（live example）：

function applyConstruct(ctor, params) {
    var obj, newobj;

    // Use a fake constructor function with the target constructor's
    // `prototype` property to create the object with the right prototype
    function fakeCtor() {
    }
    fakeCtor.prototype = ctor.prototype;
    obj = new fakeCtor();

    // Set the object's `constructor`
    obj.constructor = ctor;

    // Call the constructor function
    newobj = ctor.apply(obj, params);

    // Use the returned object if there is one.
    // Note that we handle the funky edge case of the `Function` constructor,
    // thanks to Mike's comment below. Double-checked the spec, that should be
    // the lot.
    if (newobj !== null
        && (typeof newobj === "object" || typeof newobj === "function")
       ) {
        obj = newobj;
    }

    // Done
    return obj;
}

您可以更进一步，仅在必要时使用假构造函数，首先查看是否支持 Object.create 或 __proto__，如下所示 (实时示例)：

function applyConstruct(ctor, params) {
    var obj, newobj;

    // Create the object with the desired prototype
    if (typeof Object.create === "function") {
        // ECMAScript 5 
        obj = Object.create(ctor.prototype);
    }
    else if ({}.__proto__) {
        // Non-standard __proto__, supported by some browsers
        obj = {};
        obj.__proto__ = ctor.prototype;
        if (obj.__proto__ !== ctor.prototype) {
            // Setting it didn't work
            obj = makeObjectWithFakeCtor();
        }
    }
    else {
        // Fallback
        obj = makeObjectWithFakeCtor();
    }

    // Set the object's constructor
    obj.constructor = ctor;

    // Apply the constructor function
    newobj = ctor.apply(obj, params);

    // If a constructor function returns an object, that
    // becomes the return value of `new`, so we handle
    // that here.
    if (typeof newobj === "object") {
        obj = newobj;
    }

    // Done!
    return obj;

    // Subroutine for building objects with specific prototypes
    function makeObjectWithFakeCtor() {
        function fakeCtor() {
        }
        fakeCtor.prototype = ctor.prototype;
        return new fakeCtor();
    }
}

在 Chrome 6 上，上面使用 Object.create；在 Firefox 3.6 和 Opera 上，它使用 __proto__。在 IE8 上，它使用伪造的构造函数。

上面的内容相当即兴，但它主要解决了我在这方面意识到的问题。

Answer 2

来自 developer.mozilla：
绑定函数自动适合与 new 运算符一起使用来构造由目标函数创建的新实例。当使用绑定函数构造值时，所提供的 this 将被忽略。但是，提供的参数仍会添加到构造函数调用之前。

也就是说，我们仍然需要使用 apply 将参数从数组中取出并放入绑定调用中。此外，我们还需要将bind的函数重置为apply函数的this参数。这为我们提供了一个非常简洁的单行代码，完全可以满足需要。

function constructorApply(ctor, args){
    return new (ctor.bind.apply(ctor, [null].concat(args)))();
};

Answer 3

由于最初的问题相当老了，这里有一个几乎适用于任何现代浏览器的更简单的方法（截至撰写本文时，2018 年，我正在计算 Chrome、FF、IE11、Edge...）。

var template = ['string1', string2, 'etc'];
var resultTpl = Object.create(Ext.XTemplate.prototype);
Ext.XTemplate.apply(resultTpl, template);

这两行还解释了 new 运算符的基本工作原理。

Answer 4

我认为实现此目的的另一种方法可能是扩展 Ext Template 类，以便新对象的构造函数接受您的数组并执行您想做的事情。这样，所有的构建工作都会为您完成，您只需使用参数调用超类的构造函数即可。