Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to properly use Object.setPrototypeOf()

So 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;
  }
}

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

var d = new Dog('Mitzie');
d.speak(); // Mitzie makes a noise.
like image 834
Al R. Avatar asked Jul 11 '17 19:07

Al R.


People also ask

How do you use object setPrototypeOf?

setPrototypeOf() Method. The Object. setPrototypeOf() method in JavaScript is standard built-in objects which sets the prototype (i.e., the internal [[Prototype]] property) of a specified object to another object or null.

What is difference between __ proto __ and prototype?

prototype is a property of a Function object. It is the prototype of objects constructed by that function. __proto__ is an internal property of an object, pointing to its prototype. Current standards provide an equivalent Object.

What is __ proto __ in JavaScript?

__proto__ is a way to inherit properties from an object in JavaScript. __proto__ a property of Object. prototype is an accessor property that exposes the [[Prototype]] of the object through which it is accessed. POSTly is a web-based API tool that allows for fast testing of your APIs (REST, GraphQL).


Video Answer


2 Answers

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 pitty, 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.

like image 73
trincot Avatar answered Oct 25 '22 03:10

trincot


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

like image 43
Abhishek D K Avatar answered Oct 25 '22 03:10

Abhishek D K