Js - prototypal inheritance with object create function

Question

I am wondering why in this piece of code, when I am trying to access the properties of the object that the garfield is made of, in this case Cat, I am getting undefined:

function Cat(){
    this.legs = 2;
    this.species = 'cat';
};

Cat.prototype.makeSound = function() {
    console.log(this.sound); // logs undefined 
};

const garfield = Object.create(Cat);
garfield.sound = 'feed me';
garfield.makeSound();
console.log(garfield.legs) // logs undefined

Shouldn't I be able to get down the prototype inheritance chain the access to those properties?

Bamieh · Accepted Answer · 2017-11-25 14:03:09Z

3

The word OOP contains "object" in its definition; meaning that you are dealing with objects.

Javascript does something special that it exposes the objects directly, in which you can use them without abstractions (without classes).

To create an object, you can just declare it with {}. no need to create a class to get one like in java for example.

To use Inheritance directly, you need to have an object, and append things to its prototype.

Here is an example:

const Cat = {
  legs: 2,
  species: 'cat',
};

Object.setPrototypeOf(Cat, {
  makeSound() {
    console.log(this.sound); // logs undefined 
  }
})


const garfield = Object.create(Cat);
garfield.sound = 'feed me';
garfield.makeSound();
console.log(garfield.legs) //2

To use Inheritance using functions, you'd have to construct the function first to get the object out of the function (the this) and the prototype will automatically be appended to the this object.

function Cat(){
    this.legs = 2;
    this.species = 'cat';
};

Cat.prototype.makeSound = function() {
    console.log(this.sound); // logs undefined 
};

const garfield = new Cat();
garfield.sound = 'feed me';
garfield.makeSound();
console.log(garfield.legs) // 2

answered Nov 25, 2017 at 14:03

Bamieh

11k5 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bergi Over a year ago

I don't see a reason to use Object.setPrototypeOf here, just put makeSound on the Cat object.

An0num0us · Accepted Answer · 2017-11-25 14:51:48Z

2

In your example Object.create does not create a new instance of the class! It creates a function (because Cat is a function and you pass function's prototype)!

Use new to create a new instance

const garfield = new Cat();
console.log(garfield.legs);

or

function GarfieldLikeCat() {}
GarfieldLikeCat.prototype = Object.create(Cat.prototype);
GarfieldLikeCat.prototype.constructor = GarfieldLikeCat;

to get the classical inheritance (not a new instance!).

If you didn't use this.legs = 2;, but instead Cat.prototype.legs = 2;, you could use Object.create to create a new instance

function Cat() {}
Cat.prototype.legs = 2;
const garfield = Object.create(Cat.prototype);
console.log(garfield.legs);

edited Nov 25, 2017 at 14:51

answered Nov 25, 2017 at 14:03

An0num0us

9617 silver badges15 bronze badges

1 Comment

Bamieh Over a year ago

+1. but notice that without calling the constructor function, you would not construct the object (ie legs and species will not get appended to garfield in this example) so its a better approach to either use new, use objects directly, or create factory functions.

Collectives™ on Stack Overflow

Js - prototypal inheritance with object create function

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related