Prototype and Object Chains with Essential Object Methods in JavaScript

JavaScript is a powerful programming language that is constructed around objects, which act as the foundation of its architecture. In JavaScript, objects are connected by a unique chain called the prototype chain. This chain enables inheritance and the sharing of properties and methods among objects.

In this blog, We’ll go in-depth on object chains and key object methods like create, setPrototypeOf, getPrototypeOf, hasOwnProperty.

Object Chains and Prototype:

In JavaScript, every object contains a hidden property called __proto__ that holds a link to its prototype, which can be another object or null. When a property or method on an object is accessed and it is not found, JavaScript searches the prototype chain until it either finds the property or reaches the end of the chain (when the prototype is null).

In this example, we have two objects, A and B, with B linked to object A through the prototype chain. Additionally, B has its own default prototype, which ultimately leads to a value of null, signifying the end of the prototype chain.

When we access a property on object A, JavaScript searches for it using a specified path. First, it searches for the property within object A. If the property is found, the search is completed and the value is returned.

If the property is not found in object A, the language continues the search through the prototype chain, moving to object B, and subsequently to the default prototype object. This process continues until either the desired property is found or the search reaches a null value in the prototype chain. If the property is still not found at this point, JavaScript will raise an error since the property is not defined within the prototype chain.

Let’s have a look at some Object Prototype Methods

1. Object.create() :

The Object.create() method allows us to create new objects with a specified prototype. By defining a custom prototype explicitly, we gain greater control over object inheritance and behavior.

const animal = {
  sound: 'Animal sound',
};

const cat = Object.create(animal);

console.log(cat.sound); // Outputs: "Animal sound"
console.log(cat); // Outputs: {}
console.log(cat.__proto__); // Outputs: { sound: 'Animal sound' }

In this example, the cat object inherits the sound property from the animal object through the prototype chain, demonstrating the power of Object.create().

2. Object.setPrototypeOf() :

Object.setPrototypeOf() is a powerful built-in method in JavaScript that dynamically sets the prototype (i.e., the hidden link) of an object to another object or null. By using this method, you can establish a prototype relationship between the target object and a specified prototype object, enabling inheritance and sharing of behaviors. It offers a flexible way to change an object's prototype at runtime, giving you greater control over object-oriented programming in JavaScript.

const animal = {
  sound: 'Animal sound',
};

const cat = {
  breed: 'Persian',
};

Object.setPrototypeOf(cat, animal);

console.log(cat.sound); // Outputs: "Animal sound"
console.log(cat); // Outputs: { breed: 'Persian' }
console.log(cat.__proto__); // Outputs: { sound: 'Animal sound' }

In this example, The code establishes a prototype relationship between the cat object and the animal object using Object.setPrototypeOf(), allowing the cat object to inherit properties and methods from the animal object.

The major goal is to enable behaviour sharing and dynamic inheritance, demonstrating the object-oriented flexibility of JavaScript.

3. Object.getPrototypeOf() :

The Object.getPrototypeOf() method returns the prototype of an object, allowing you to access and inspect the object's prototype.

const animal = {
  sound: 'Animal sound',
};

const cat = Object.create(animal);

const catPrototype = Object.getPrototypeOf(cat);

console.log(catPrototype); // Outputs: { sound: 'Animal sound' }
console.log(catPrototype === animal); // Outputs: true

Here we used Object.getPrototypeOf(cat) to retrieve the prototype of the cat object. The method returns the prototype, which is the animal object in this case.

The console.log statement compares the catPrototype to animal, and it evaluates to true, confirming that the cat object indeed inherits from the animal object through the prototype chain.

4. Object.hasOwnProperty() :

Object.hasOwnProperty() is a built-in method in JavaScript that allows you to check whether an object has a specific property. It returns true if the property is directly defined on the object itself (own property), and false if the property is inherited from its prototype chain. This method is useful for determining if an object possesses a particular property, making it a valuable tool for property existence checks in JavaScript.

const user = {
  'name' : 'Naina',
};

const info = {
  'age' : 24
};

Object.setPrototypeOf(user, info);

conosle.log(user.hasOwnProperty("name")); // true
conosle.log(user.hasOwnProperty("age")); // false

Now, let’s understand the output of the hasOwnProperty() method calls:

1. console.log(user.hasOwnProperty("name")); - Outputs: true Here, we check if the user object has the property "name", which it does. Since "name" is directly defined on the user object itself, user.hasOwnProperty("name") returns true. This property is considered an "own" property of the user object.
2. console.log(user.hasOwnProperty("age")); - Outputs: false In this case, we check if the user object has the property "age", which it does not. Although the user object inherits the "age" property from its prototype info, it does not possess this property directly. Therefore, user.hasOwnProperty("age") returns false.