Nguyên mẫu JavaScript ghi đè

Question

Tôi mới học các khái niệm JavaScript. Bạn muốn hiểu cách thức làm việc thừa kế nguyên mẫu. Ấn tượng của tôi là nếu lớp của bạn kế thừa cha mẹ của nó, và bạn có cùng một phương thức được đặt tên trong nguyên mẫu của cả hai lớp, khi bạn gọi phương thức trên cá thể con, phương thức trong nguyên mẫu con sẽ được gọi.

Code:

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

On gọi cat1.printName() tôi mong đợi nó để đăng nhập 'mèo ở mèo nguyên mẫu' nhưng nó đăng nhập 'mèo trong Animal nguyên mẫu'. Ai đó có thể giải thích lý do cho tôi. Cảm ơn.

Answer 1

Bạn chính xác, nhưng ghi đè của bạn đối với hàm printName() là chính nó, bị ghi đè bởi dòng tiếp theo khi bạn đặt lại Cat.prototype. Đơn giản chỉ cần di chuyển thứ tự của mã sửa chữa vấn đề:

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"