用另一個原型擴展原型

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