Home > Enterprise >  How the Constructor of the 'bambi' object is Animal?
How the Constructor of the 'bambi' object is Animal?

Time:10-27

let log = console.log;
function Animal(name)
{
    this.name = name;
}

Animal.prototype.walk = function(){
    log(`${this.name} walks`);
}

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

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

Cat.prototype.meow = function(){
    log("Meow!");
}

let bambi = new Cat("Bambi");

log(bambi.constructor)  // function Animal(name){  this.name = name;  }

I have created 'bambi' object using the Cat constructor but while checking the constructor of bambi it returns Animal constructor. I have assigned Cat's prototype to Animal prototype using Object.create(). Why the constructor of bambi object is Animal and not the Cat?

CodePudding user response:

Look up "javascript inheritance without class"

On the MDN page, it says this:

  1. Add the following line below your previous addition:
Teacher.prototype = Object.create(Person.prototype);

Copy to Clipboard Here our friend create() comes to the rescue again. In this case we are using it to create a new object and make it the value of Teacher.prototype. The new object has Person.prototype as its prototype and will therefore inherit, if and when needed, all the methods available on Person.prototype.

  1. We need to do one more thing before we move on. After adding the last line, the constructor property of Teacher.prototype is now equal to Person(), because we just set Teacher.prototype to reference an object that inherits its properties from Person.prototype! Try saving your code, loading the page in a browser, and entering Teacher.prototype.constructor into the console to verify.
  1. This can become a problem, so we need to set this right. You can do so by going back to your source code and adding the following line at the bottom:
Object.defineProperty(Teacher.prototype, 'constructor', {
    value: Teacher,
    enumerable: false, // so that it does not appear in 'for in' loop
    writable: true });
  1. Now if you save and refresh, entering Teacher.prototype.constructor should return Teacher(), as desired, plus we are now inheriting from Person()!

So based off of this, your code needs to add this small section:

Object.defineProperty(Cat.prototype, 'constructor', {
    value: Cat,
    enumerable: false, // so that it does not appear in 'for in' loop
    writable: true });

See the working demo below:

let log = console.log;
function Animal(name)
{
    this.name = name;
}

Animal.prototype.walk = function(){
    log(`${this.name} walks`);
}

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

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

Object.defineProperty(Cat.prototype, 'constructor', {
    value: Cat,
    enumerable: false, // so that it does not appear in 'for in' loop
    writable: true });

Cat.prototype.meow = function(){
    log("Meow!");
}

let bambi = new Cat("Bambi");

log(bambi.constructor);
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

However, I would recommend just using ES6 classes instead of doing this manually

  • Related