javascript - 用另一个原型(prototype)扩展原型(prototype)

Question

我想用另一个原型(prototype)扩展一个原型(prototype)。这是我当前的代码，也尝试了不同的东西，但我无法让它工作。

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);

我不想编写这样的 NetoworkTester 代码:

NetworkTester.prototype.clazz = 'NetworkTester';
NetworkTester.prototype.test = function (url) {
    this.start(); // this is undefined
};

我想要它，因为我有它，它更漂亮。

Answer 1

为什么会发生这种情况？

因为您要使用以下行覆盖 .prototype 属性:

ChildClass.prototype = new ParentClass();

由 new ParentClass(); 创建的对象是一个没有任何自己属性的对象(因为您没有在 Tester 的构造函数中分配任何属性)，因此它在开发工具中显示为空对象。

NetworkTester.prototype 的内部[[Prototype]] 插槽已设置。您可以使用 Object.getPrototypeOf 查看它。方法:

Object.getPrototypeOf(NetworkTester.prototype)

如何解决这个问题？

要解决您的困境，您必须扭转代码顺序:

1. 为子对象的 .prototype 属性创建新对象，将其链接到父对象:

   helpers.extend2(NetworkTester, Tester);
   

2. 定义子项的 .prototype 属性:

   NetworkTester.prototype.x = ...;
   NetworkTester.prototype.y = ...;
   

为了避免父级不必要的构造函数调用，您可能应该使用 Object.create而不是 new 运算符。

所以你的代码将如下所示:

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);