用另一个原型扩展原型

Question

我想用另一个原型扩展原型。这是我目前的代码，尝试了不同的东西，我无法实现它的工作。

Network.prototype是一个空对象，为什么？

function Tester() {} 
 

 
Tester.prototype = { 
 
\t clazz: 'Tester', 
 
\t start: function (url) {} 
 
}; 
 

 

 
function NetworkTester() {} 
 

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

 

 
var helpers = { 
 
    extend2: function (ChildClass, ParentClass) { 
 
\t \t ChildClass.prototype = new ParentClass(); 
 
\t \t ChildClass.prototype.constructor = ChildClass; 
 
\t } 
 
}; 
 

 
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(NetworkTester.prototype) 

怎么可以这样解决：可以使用Object.getPrototypeOf方法看看呢？

为了解决你的困境，你将不得不转身代码顺序：

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