Nadpisanie prototypu JavaScript

Question

Jestem nowy w nauczaniu się pojęć JavaScript. Chcesz zrozumieć, jak działa prototypowe dziedziczenie. Mam wrażenie, że twoja klasa dziedziczy swojego rodzica, a ty masz tę samą nazwaną metodę w prototypach obu klas, gdy wywołasz metodę na instancji podrzędnej, zostanie wywołana metoda w prototypie podrzędnym.

Kod:

function Animal(name) { 
    this.name = name; 
} 

Animal.prototype.printName = function() { 
    console.log(this.name + ' in animal prototype'); 
} 

function Cat(name) { 
    Animal.call(this, name); 
} 



Cat.prototype.printName = function() { 
    console.log(this.name + ' in cat prototype'); 
} 

Cat.prototype = Object.create(Animal.prototype); 

var anm1 = new Animal('mr cupcake'); 
anm1.printName(); 


var cat1 = new Cat('cat'); 
cat1.printName(); 

Na nazywając cat1.printName() Spodziewałem się, że log 'kota w prototypie cat' ale 'zalogowany kota w prototypie zwierzęcia. Czy ktoś mógłby mi wyjaśnić powód? Dzięki.

Answer 1

Masz rację, ale twoje zastąpienie funkcji printName() jest automatycznie zastępowane przez następną linię po zresetowaniu Cat.prototype. Po prostu przesuwając kolejność kodu rozwiązuje problem:

function Animal(name) { 
 
    this.name = name; 
 
} 
 

 
Animal.prototype.printName = function() { 
 
    console.log(this.name + ' in animal prototype'); 
 
} 
 

 
function Cat(name) { 
 
    Animal.call(this, name); 
 
} 
 

 
// OLD LOCATION of code 
 

 
// This was overriding your override! 
 
// Setting the prototype of an object to another object 
 
// is the basis for JavaScript's prototypical inhertiance 
 
// This line replaces the existing prototype object (which is 
 
// where your override was) with a completely new object. 
 
Cat.prototype = Object.create(Animal.prototype); 
 

 
// NEW LOCATION 
 
// AFTER setting the prototype (and creating inheritance), 
 
// it is safe to do the override: 
 
Cat.prototype.printName = function() { 
 
    console.log(this.name + ' in cat prototype'); 
 
} 
 

 
var anm1 = new Animal('mr cupcake'); 
 
anm1.printName(); // "mr cupcake in animal prototype" 
 

 
var cat1 = new Cat('cat'); 
 
cat1.printName(); // "cat in cat prototype"