[英]Extending prototype with another prototype
I would like to extend a Prototype with another Prototype. 我想用另一个原型扩展一个原型。 This is my current code, tried also different things, and I cannot get it to work. 这是我当前的代码,也尝试了不同的方法,但我无法使其正常工作。
Network.prototype is an empty object, why? Network.prototype是一个空对象,为什么?
function Tester() {} Tester.prototype = { clazz: 'Tester', start: function (url) {} }; function NetworkTester() {} NetworkTester.prototype = { clazz: 'NetworkTester', test: function (url) { this.start(); // this is undefined } }; var helpers = { extend2: function (ChildClass, ParentClass) { ChildClass.prototype = new ParentClass(); ChildClass.prototype.constructor = ChildClass; } }; helpers.extend2(NetworkTester, Tester); console.log(NetworkTester.prototype);
I do not want to write NetoworkTester code like this: 我不想这样写NetoworkTester代码:
NetworkTester.prototype.clazz = 'NetworkTester'; NetworkTester.prototype.test = function (url) { this.start(); // this is undefined };
I want it as I have it, it is prettier. 我想要它,因为它更漂亮。
Why is this happening? 为什么会这样呢?
Because you are overwriting the .prototype
property with the following line: 因为您.prototype
以下行覆盖.prototype
属性:
ChildClass.prototype = new ParentClass();
The object created by new ParentClass();
由new ParentClass();
创建的对象new ParentClass();
is an object without any own properties (since you aren't assigning any in the constructor of Tester
), thus it shows up as an empty Object in the dev tools. 是一个没有任何属性的对象(因为您没有在Tester
的构造函数中分配任何属性),因此它在开发工具中显示为空对象。
The internal [[Prototype]]
slot of NetworkTester.prototype
is set though. 虽然设置了NetworkTester.prototype
的内部[[Prototype]]
插槽。 You can have a look at it using the Object.getPrototypeOf
method: 您可以使用Object.getPrototypeOf
方法查看它:
Object.getPrototypeOf(NetworkTester.prototype)
How can this be solved? 如何解决呢?
To solve your dilemma, you would have to turn around your code order: 要解决您的难题,您必须扭转代码顺序:
Create the new object for the .prototype
property of the child, linking it to the parent: 为.prototype
属性创建新对象,并将其链接到父代:
helpers.extend2(NetworkTester, Tester);
Define the .prototype
properties of the child: 定义子项的.prototype
属性:
NetworkTester.prototype.x = ...; NetworkTester.prototype.y = ...;
In order to avoid unnecessary constructor calls of the parent, you should probably use Object.create
instead of the new
operator. 为了避免不必要的父构造函数调用,您可能应该使用Object.create
而不是new
运算符。
So your code would look like this: 因此,您的代码如下所示:
var helpers = {
extend2: function (ChildClass, ParentClass) {
ChildClass.prototype = Object.create(ParentClass.prototype);
ChildClass.prototype.constructor = ChildClass;
}
};
function Tester() {}
Tester.prototype = {
clazz: 'Tester',
start: function (url) {}
};
function NetworkTester() {}
// This needs to happen before you assign to NetworkTester.prototype
helpers.extend2(NetworkTester, Tester);
NetworkTester.prototype.clazz = 'NetworkTester';
NetworkTester.prototype.test = function (url) {
this.start(); // this is undefined
};
console.log(NetworkTester.prototype);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.