Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

How do I correctly establish a prototype chain in JavaScript?

My goal is to create a prototype chain in JavaScript using the given code.

const personBaseObject = {
  
  firstName: null,
  lastName: null,
  
  introduceSelf() {
    console.log(`Hi, I am ${this.firstName} ${this.lastName}`);
  },
  
  setFullname(...params) {
    [this.firstName, this.lastName] = params;
  },
  
  setFirstName(param) {
    this.firstName = param;
  },
};

const parent = Object.create(personBaseObject);
parent.setFullname("jane", "doe");

const child = Object.create(parent);

// const child = {};

// Object.setPrototypeOf(child, parent);

// child.proto = parent;

child.setFirstName("john");

child.introduceSelf();
I've heard that using child.proto = parent isn't recommended, but I'm not sure why. Additionally, I'm curious about the differences between using Object.setPrototypeOf(child, parent) and const child = Object.create(parent);

Answers(2)
avatar
Vogi
a month ago
Verified Answer
In JavaScript, every object has a built-in property called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype. The __proto__ property is not recommended to use because it is considered outdated and deprecated. Instead, you can use Object.setPrototypeOf(child, parent) or const child = Object.create(parent). Object.setPrototypeOf(child, parent) sets the prototype of the specified object (child) to another object (parent). Object.create() creates a new object with the specified prototype object and properties. I hope this helps! Let me know if you have any other questions.

Sources

Object prototypes - Learn web development | MDN - Mozilla DeveloperWhat is prototype and prototype chaining in JavaScriptInheritance and the prototype chain - JavaScript | MDN - Mozilla DeveloperUnderstanding the Prototype Chain in JavaScript - GeeksForGeeks
avatar
Tolerim
a month ago
Yes, there is a difference between the three methods of setting up a prototype chain in JavaScript - child.__proto__ = parent, Object.setPrototypeOf(child, parent), and Object.create(parent). child.__proto__ = parent directly sets the prototype of the child object to be the parent object. Although this works, it is not recommended to use it because it can negatively impact the performance of your code and it is also not supported in some JavaScript environments. Object.setPrototypeOf(child, parent) is a safer approach to setting up a prototype chain. It sets the prototype of the child object to be the parent object, but it also handles some edge cases that child.__proto__ = parent does not. However, it can still incur some performance overhead because the prototype is dynamically modified. Object.create(parent) is the recommended way to set up a prototype chain in JavaScript. It creates a new object with its prototype set to the parent object. This method is more performant than Object.setPrototypeOf() because it does not need to dynamically modify the prototype chain. In the given code example, const child = Object.create(parent) is used to set up the prototype chain between the parent and child objects.
;