CODEWITHSUNDEEP
javascriptecmascript-6
Al R.
Al R.

Reputation: 2470

When and why should I use Object.setPrototypeOf on the .prototype property of the class instead of the class itself?

I've been getting up to speed on some of the newer features of JavaScript and have been reading about Object.setPrototypeOf(). I ran across this bit of code from MDN which deals with inheriting from regular objects. But I'm confused at how they use Object.setPrototypeOf() here. I expected them to write

Object.setPrototypeOf(Dog, Animal)

as opposed to what the do below. Why do they write it this way?

var Animal = {
  speak() {
    console.log(this.name + ' makes a noise.');
  }
};

class Dog {
  constructor(name) {
    this.name = name;
  }
}

// If you do not do this you will get a TypeError when you invoke speak
Object.setPrototypeOf(Dog.prototype, Animal);

var d = new Dog('Mitzie');
d.speak(); // Mitzie makes a noise.

Upvotes: 16

Views: 17990

Answers (3)

trincot
trincot

Reputation: 350252

The reason for calling Object.setPrototypeOf is to make sure that any objects created by the Dog constructor will get the Animal object in their prototype chain. It would be wrong to set a prototype of the constructor itself (not to be confused with the constructor's prototype property which really is a misnomer), since the constructor has no place in d's prototype chain.

A created Dog object does not get Dog in its prototype chain, but Dog.prototype. Dog is just the vehicle by which objects are created, it is not supposed itself to become part of the prototype chain.

You could instead do this in the Dog constructor:

Object.setPrototypeOf(this, Animal)

That makes the length of the prototype chain one step shorter, but the downside is that now d instanceof Dog will no longer be true. It will only be an Animal. This is a pity, and it explains why it is good to keep the original Dog.prototype object, while setting its prototype to Animal, so that now d is both a Dog and an Animal.

Read about this subject here. I would promote my own answer to that Q&A.

Upvotes: 10

Logan Lee
Logan Lee

Reputation: 987

We can do the same using {__proto__:...}:

var Animal = {
   speak() {
     console.log(this.name + ' makes a noise.');
   }
};

var Dog={
  __proto__: Animal
}

Dog.name='Mitzie'
Dog.speak(); // Mitzie makes a noise.

The {__proto__: Animal} is a way of defining prototype chain. Here, this is {__proto__: {speak:function(){...}} as defined in Animal.

To understand this let's see the chain in steps. When we did Dog.speak() js can't find function speak inside Dog. So it goes up the chain once and finds speak inside Animal. As expected this outputs "Mitzie makes a noise.".

Conceptually, Object.setPrototypeOf(Dog.prototype, Animal) is the same as Dog.prototype.__proto__=Animal. We call this setting Dog.prototype.[[Prototype]] to Animal. The [[Prototype]] is a link pointing to an object one step up the chain.

var Animal=function() {}
Animal.prototype.speak=function() {
    console.log(this.name + ' makes a noise.');
}

var Dog=function(name) {
    this.name=name
}

// set up prototype chain
Dog.prototype.__proto__=Animal.prototype

var d = new Dog('Mitzie');
d.speak(); // Mitzie makes a noise.

Here is your example replaced with using __proto__ to define the prototype chain.

var Animal = {
   speak() {
     console.log(this.name + ' makes a noise.');
   }
};

class Dog {
   constructor(name) {
   this.name = name;
  }
}

//Object.setPrototypeOf(Dog.prototype, Animal);// If you do not do this you will get a TypeError when you invoke speak
Dog.prototype.__proto__=Animal

var d = new Dog('Mitzie');
d.speak(); // Mitzie makes a noise.

Lastly, you could just use class extends...

var Animal = class {
    constructor(name) {
    this.name=name
  }
   speak() {
     console.log(this.name + ' makes a noise.');
   }
};

class Dog extends Animal {
   constructor(name) {
     super(name)
  }
}

var d = new Dog('Mitzie');
d.speak(); // Mitzie makes a noise.

As you can see this approach is the simplest so recommended ;)

Upvotes: 1

Abhishek D K
Abhishek D K

Reputation: 2427

1) Animal is an Object literal
2) Object literal doesn't have prototype property
3) the syntax is 

Object.setPrototypeOf(targetObj, sourceObj);
Object.setPrototypeOf(Dog.prototype,Animal);

4) By doing this we are inheriting the properties of
object literal ( Animal) to another literal or constructor(Dog)

5) here the Dog 's prototype is being set from Animal.
this method (Object.setPrototypOf()) sets a reference to Animal's methods to Dog's prototype

Upvotes: 3

Related Questions