如何使用 call 或 apply 调用 javascript 构造函数？ [复制]
Posted
技术标签:
【中文标题】如何使用 call 或 apply 调用 javascript 构造函数？ [复制]【英文标题】：How can I call a javascript constructor using call or apply? [duplicate] 【发布时间】：2011-03-22 16:56:50 【问题描述】：我如何概括下面的函数来接受 N 个参数？ （使用调用还是申请？）
是否有编程方式将参数应用于“新”？我不希望构造函数被视为普通函数。
/**
* 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");
);
【问题讨论】：
Ben Nadel wrote about this 广泛。 【参考方案1】：此功能在所有情况下都与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() + ')');
更新：一旦 ES6 支持得到广泛支持，您就可以这样写：
function applyConstructor(ctor, args)
return new ctor(...args);
...但您不需要这样做，因为标准库函数 Reflect.construct() 完全符合您的要求！
【讨论】：
-1 用于 eval 这也不适用于复杂的参数，因为参数被转换为字符串： var circle = new Circle(new Point(10, 10), 10); // [对象点 x=10 y=10], 10 它工作正常。参数不会转换为字符串。试试看。 谢谢，这个对我来说是最好的。并且 eval 还不错，如果您知道自己在做什么，那么 eval 会非常有用。【参考方案2】：这就是你的做法：
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");
现在，您当然可以照常在neu 上执行.apply 或.call 或.bind。
例如：
var personFactory = neu.bind(null, Person);
var d = personFactory("Harry", "Potter");
我觉得我给出的第一个解决方案更好，因为它不依赖于您正确复制内置函数的语义并且它可以与内置函数一起正常工作。
【讨论】：
我很惊讶你没有得到任何投票。基于创建单独函数并更改其原型的解决方案的缺点是更改constructor 字段，而将bind 与apply 组合允许保留它。
这个很简洁，但是IE8及以下不支持。
非常正确，ie8 不是 ecmascript5 浏览器（我确实提到过）。
@kybernetikos 使用下划线可以创建与 ES4 兼容的版本：jsbin.com/xekaxu/1 如果需要，请随意添加到您的答案中
@rupps 这是绑定的第一个参数，如果以正常方式调用，它将是函数的“this”。因为我们计划用new 调用它，所以它不是特别相关，所以我在那里将它设置为null。在调用示例中实际上也有一个额外的参数，但是由于我们在参数列表的开头有一个额外的参数（函数本身），所以可以重用它。这确实意味着，对于这个调用示例，如果您只调用没有new 的绑定函数，内部的this 将是函数本身，但它可以节省我们创建新数组的时间。【参考方案3】：
在 ECMAScript 6 中，您可以使用扩展运算符将带有 new 关键字的构造函数应用于参数数组：
var dateFields = [2014, 09, 20, 19, 31, 59, 999];
var date = new Date(...dateFields);
console.log(date); // Date 2014-10-20T15:01:59.999Z
【讨论】：
不错！ 【参考方案4】：如果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 版本的速度显着降低。
eval 版本的测试套件：1 秒。
带有 JSON 版本的测试套件，使用临时构造函数：5 秒。
带有 JSON 版本的测试套件，使用 Object.create：1 秒。
测试套件创建多个树。我计算出我的 applytoConstructor 函数在测试套件运行时被调用了大约 125,000 次。
【讨论】：
【参考方案5】：对于这种情况，有一个可重复使用的解决方案。对于您希望使用 apply 或 call 方法调用的每个类，您必须先调用 convertToAllowApply('classNameInString'); Class 必须在同一个 Scoope 或 global 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);
【讨论】：
【参考方案6】：另一种方法，它需要修改被调用的实际构造函数，但对我来说似乎比使用 eval() 或在构造链中引入新的虚拟函数更干净......保持你的 conthunktor 函数像
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
【讨论】：
这对我来说是最好的，干净的和优雅的解决方案。this instanceof Constructor 检查很酷，但它会阻止构造函数组合（即可扩展构造函数）：function Foo(); function Bar() Foo.call(this);
@Barney 如果Bar.prototype = Foo，instanceof 检查应该有效。【参考方案7】：
试试这个：
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;
【讨论】：
谢谢，这适用于测试代码。它的行为是否与新的相同？ （即没有令人讨厌的陷阱。） 行为与 new 相同，除了一些奇怪的功能，如Date;和代理（为下一版本的 ECMAScript 提出的一项功能，目前仅在 Firefox 中支持——您现在可以忽略代理）。
不错的解决方案。只需添加一个，您可以避免使用 Temp 函数并使用 ES5 的 Object.create 重写前 3 行： var inst = Object.create(Constructor.prototype);
看起来这对于 Chrome 中的 XMLHttpRequest 失败（我在 OS X 10.9.4 上使用版本 37.0.2062.94）产生 TypeError: Failed to construct 'XMLHttpRequest': Please use the 'new' operator, this DOM object constructor cannot be called as a function.。看起来这是XMLHttpRequest 的一个特定案例（很可能还有一些我不知道的其他对象）。演示：jsfiddle.net/yepygdw9
太棒了。我不认为有人找到了一种扩展它以允许更多语义调试的方法？我试过Temp.name = Constructor.name，但这是非法的（name）是只读的。目前调试非常困难，因为一切都是Temp，我必须查询实例的__proto__ 以找出它们实际上是什么。以上是关于如何使用 call 或 apply 调用 javascript 构造函数？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
是否可以使用“call”或“apply”将参数数组一次传递给多个函数？