如何从该类的实例生成类的新实例?
考虑下一个班级及其实例:
// Create a new class
var Foo = function Foo () {
console.log('New instance of FOO!');
};
Foo.prototype.generate = function(first_argument) {
this.arr = [1,2,3,4,5];
};
var foo = new Foo();
foo.generate();
console.log(foo.arr); // [1,2,3,4,5]
请注意,foo
是Foo
的实例,我将在示例中使用此实例。
使用Object.create我可以生成foo实例的新副本,但是它们将共享状态数据:
var bar = Object.create(foo);
console.log(bar.arr); // [1,2,3,4,5]
bar.arr.push(6);
console.log(foo.arr); // [1,2,3,4,5,6]
console.log(bar.arr); // [1,2,3,4,5,6]
如果构造函数中有某些逻辑,则不会调用它。
这类似于对象create,但它调用构造函数。它仍然具有相同的状态数据问题:
var Bar = function () {
foo.constructor.call(this);
};
Bar.prototype = foo;
var bar = new Bar();
console.log(bar.arr); // [1,2,3,4,5]
bar.arr.push(6);
console.log(foo.arr); // [1,2,3,4,5,6]
console.log(bar.arr); // [1,2,3,4,5,6]
这是我想要做的一个例子,但它只适用于Firefox:
// Create Bar class from foo
var Bar = foo.constructor;
Bar.prototype = foo.__proto__; // Firefox only
这里我有类吧,它是类Foo的副本,我可以生成新实例。
var bar = new Bar();
console.log(bar.arr); // undefined
bar.generate();
console.log(bar.arr); // [1,2,3,4,5]
有没有其他方法可以实现适用于所有浏览器的相同目标?
答案 0 :(得分:3)
1) proto 必须避免显而易见的原因,你有Object.getPrototypeOf以标准方式读取对象的原型。
2)你没有构造函数完成所有工作,而是有一种带有generate的init方法。
因此,在构造函数的末尾调用this.generate会更有意义。
这就是原型继承不起作用的原因:构造函数不起作用。
在同一个想法中,你不能责怪Object.create,因为它既没有构造函数,也没有在你的例子中生成,所以你基本上构建了一个具有相同原型的对象,就是这样。
如果你确实将this.generate的调用添加到构造函数中,也许最简单的方法是使用foo的constructor属性来构建一个新对象:
var bar = new foo.constructor();
会给你一个全新的项目。
所以回答你的问题:是的,还有另一种方法,使用对象实例的构造函数属性来构建一个新项目。
但是没有继承方案能够“猜测”,应该用这样的方法进行完全初始化。初始化是构造函数的工作。我们可能想象一下,例如你在构造函数中构建了一个新数组this.arr = [];
,而generate()将push()这个数组中的项,这将是一种有效的方法。但是为了优化和清晰,你必须避免通过方法添加属性:在构造函数中设置所有实例属性,并且可能在原型上使用共享属性,并且只在方法中使用这些属性。
答案 1 :(得分:2)
为什么不在传统意义上这样做呢?在可以复制或从中创建实例的C ++类中,只实现了一个复制构造函数。您可以使用与C ++相同的方式在JavaScript中执行此操作,只需让构造函数检查参数:
function Foo(from) {
if (from && from.prototype && from.prototype.constructor === Foo) {
this.arr = [].concat(from.arr);
}
}
如果你真的想要在Foo上创建一个复制方法:
Foo.prototype.createCopy = function() {
return new Foo(this);
};
或者只使用构造函数:
var bar = new Foo(foo);
这将创建一个arr的浅层克隆。要执行深度克隆,您需要编写深度克隆方法或使用JavaScript框架中的方法,如YUI。
如果你想要一个新实例:
Foo.prototype.createNew = function() {
return new Foo();
};
var bar = foo.createNew();
var fooCopy = foo.createCopy();
如果该类可能被用作另一个类的基类,则使用:
Foo.prototype.createNew = function() {
return new (this.prototype.constructor)();
};
Foo.prototype.createCopy = function() {
return new (this.prototype.constructor)(this);
};
如果您担心修改Foo类,您可以随时创建自己的实现,以发出副本并创建函数。
(function() {
var Foo = function() {},
MyNamespace = {
Foo: Foo
};
Foo.prototype = {
constructor: window.Foo,
createCopy: function() { /* ... */ },
createNew: function() { /* ... */ }
};
for (var n in window.Foo.prototype) {
Foo.prototype[n] = window.Foo.prototype[n];
}
// Export it.
window.MyNamespace = MyNamespace;
})();
如果您只想将这些方法添加到本机Foo类中,通常就是这样做的:
(function() {
if (! Foo.prototype.createCopy) {
Foo.prototype.createCopy = function() { /* ... */ };
}
if (! Foo.prototype.createNew) {
Foo.prototype.createNew = function() { /* ... */ };
}
})();
如果您在最早调用程序/脚本时执行此操作,则在创建任何实例之前将挂钩Foo,使您能够创建副本。
答案 2 :(得分:2)
根据您对Craig的回答的评论:从任何对象创建一个新实例可以在一行中轻松完成:
var newFoo = new (Object.getPrototypeOf(foo).constructor);
对于某些旧版浏览器,Object.getPrototypeOf
无效。您可以通过将此位添加到脚本中来轻松解决此问题:
if (!Object.getPrototypeOf)
{
Object.getPrototypeOf = function(o)
{
if (o instanceof Object)
{
return (o.__proto__ || o.prototype);
}
throw new TypeError('Object.getPrototypeOf called on non-object');
};
}
在大多数情况下,所有事情都要考虑:
var newFoo = new (foo.constructor);
工作正常,除非一些小丑与实例混淆,为其分配constructor
属性,或更改原型。
在我看来,好像你没有完全理解JS如何解析上下文,以及如何解析对象属性的引用。 Check the diagram in my answer here
首先,将您的最后一个代码段更改为:
Bar.prototype = Foo.prototype;//__proto__ is non-standard proto reference
Bar.prototype.constructor = Bar;
这应该适用于X浏览器
至于为什么你的其他尝试都失败了,这很容易:当你编写bar.arr
时,JS只会查找直接附加到实例的arr
属性。如果找不到,搜索将扩展为Bar.prototye
。如果失败,JS会搜索Bar.prototype
的原型,例如foo
(例如传递给Object.create
的实例)。
在那里,JS 找到它正在寻找的属性,因此bar.arr
引用 foo.arr
。如果更改对象(数组是对象),则使用哪个引用来访问对象无关紧要。只有一个实例,只要它被引用至少一次就会保存在内存中。
完整:
var Foo = function()
{
console.log('the Foo constructor');
};
Foo.prototype.generate = function()
{
this.arr = [1,2,3];
return this;
};
var Bar = function()
{
console.log('the Bar constructor');
};
Bar.prototype = new Foo;//make Bar inherit from Foo
Bar.prototype.constructor = Bar;//but make it use its own constructor
现在,您可以根据需要同时使用Foo
和Bar
:
var foo = new Foo;
foo.generate();
foo.arr.push(4);
var bar = new Bar;
bar.generate();
console.log(foo.arr);//here [1,2,3,4]
console.log(bar.arr);//[1,2,3]
当然,如果你想Bar
开始使用特定的foo实例:
var foo = new Foo;
foo.generate();
Bar.prototype = foo;//
Bar.prototype.constructor = Bar;
var bar = new Bar;
console.log(bar.arr);//logs [1,2,3]
//BUT BE CAREFUL:
console.log(foo.arr === bar.arr);//true, bar only references the same property
bar.arr = bar.arr.slice(0);//copies the array
bar.arr.push(4);
console.log(foo.arr);//[1,2,3] still
console.log(bar.arr);//[1,2,3,4] changed
要撤消我上面所做的更改,我只需取消屏蔽原型属性:
delete bar.arr;
console.log(bar.arr);//back to [1,2,3]
console.log(bar.arr === foo.arr);//true, I've deleted a bar property
就是这样
答案 3 :(得分:0)
在你的第二个原型示例bar.prototype = foo
中,你必须创建一个代理函数,这样才能调用构造函数方法,你真正从foo扩展:
var Foo = function() {
console.log('foo init')
};
Foo.prototype.generate = function() {
this.arr = [1, 2, 3, 4];
}
var Bar = function() {
// Call the "constructor" method (Foo) with the correnct context and arguments,
// for this we can use Function.apply(context, array);
// where array can be any array like object as well a an real array:
Foo.apply(this, arguments);
console.log('bar init');
};
// Surrogate function:
var sur = function() {};
// Capture Foo's prototype:
sur.prototype = Foo.prototype;
// Apply the prototype from Foo to Bar's prototype chain, without initializing Foo:
Bar.prototype = new sur;
// Also remember to update the constructor:
Bar.prototype.constructor = Bar;
var f = new Foo(); // foo init;
var b = new Bar(); // foo init, bar init;
f.generate();
f.arr.push(-1);
b.generate();
b.arr.push(-2);
console.log(f.arr); // [1,2,3,4,-1]
console.log(b.arr); // [1,2,3,4,-2]
答案 4 :(得分:0)
永远不要在原型中添加任何数据,只需要功能。
您可以使用Object.create
开箱即可实现这一目标:
function A() {
}
function B() {
}
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;