Javascript Object.setPrototypeOf()

// create an empty object
const obj = {};

// create a non-empty object parent
const parent = { foo: 'bar' };

// set parent as the prototype of obj
Object.setPrototypeOf(obj, parent);

// print foo property of parent
// using the obj object
console.log(obj.foo);

// Output: "bar"

setPrototypeOf() Syntax

The syntax of the setPrototypeOf() method is:

Object.setPrototypeOf(obj, prototype)

The setPrototypeOf() method, being a static method, is called using the Object class name.

setPrototypeOf() Parameters

The setPrototypeOf() method takes in:

• obj - the object whose prototype we want to set.
• prototype - the object's new prototype (an object or null).

setPrototypeOf() Return Value

The setPrototypeOf() method returns the object whose prototype we want to set i.e. obj.

Note: Changing the [[Prototype]] of an object is currently a very slow operation in every browser and JavaScript engine.

Example 1: JavaScript Object.setPrototypeOf()

// create the object to be set as the prototype
let Animal = {
  makeSound() {
    console.log(`${this.name}, ${this.sound}!`);
  },
};

// define the Dog object constructor
function Dog(name) {
  this.name = name;
  this.sound = "bark";

  // set prototype of Dog object to Animal
  Object.setPrototypeOf(this, Animal);
}

// create dog1 object using the Dog() constructor
dog1 = new Dog("Marcus");

// call the makeSound() method of Animal
dog1.makeSound();
 
// Output: Marcus, bark!

In the above example, the Animal object is set as the prototype of the dog1 object using the Object.setPrototypeOf() method.

Hence, we are able to access the makeSound() method of Animal using the dog1 object, even though it is not defined inside the Dog() constructor function.

Example 2: Using setPrototypeOf() With Class

// create the object to be set as prototype
let Animal = {
  makeSound() {
    console.log(`${this.name}, ${this.sound}!`);
  },
};

// create the Dog class
class Dog {
  constructor(name) {
    this.name = name;
    this.sound = "bark";
  }
}

// Dog is a class, so
// Dog.prototype is an object
Object.setPrototypeOf(Dog.prototype, Animal);

// create an object of Dog class
let dog1 = new Dog("Marcus");

// print properties of dog1
console.log(dog1);

// Output: { name: 'Marcus', sound: 'bark' }

// call the makeSound() method of Animal
dog1.makeSound(); 

// Output: Marcus, bark!

In the above example, the setPrototypeOf() method is used to set the prototype of objects of the Dog class to the Animal object.

As a result, all the instances of the Dog class (dog1 in our case) can inherit and call the makeSound() method from the Animal object.

Recommended Reading:

• Javascript Object.isPrototypeOf()