Блог

Я новичок в изучении концепций JavaScript. Хотите понять, как работает прототипное наследование. У меня сложилось впечатление, что если ваш класс наследует своего родителя, и у вас есть метод с одинаковым именем в прототипах обоих классов, то при вызове метода в дочернем экземпляре будет вызван метод в дочернем прототипе.

Код:

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

При вызове cat1.printName() Я ожидал, что он зарегистрирует «cat в прототипе cat», но он зарегистрировал «cat в прототипе животного». Не мог бы кто-нибудь, пожалуйста, объяснить мне причину. Спасибо.

Вы правы, но ваше переопределение printName() функции само по себе переопределяется следующей строкой при сбросе Cat.prototype . Простое изменение порядка кода устраняет проблему:

 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"