Расширение прототипа другим прототипом

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) , поэтому он отображается как пустой объект в инструментах dev.

Внутренний [[Prototype]] слот NetworkTester.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);