MakeW3web

JavaScript Prototypes and Prototypal Inheritance

JavaScript is a prototype-based language, which means that objects can inherit properties and methods from other objects through a concept called prototypal inheritance. In JavaScript, each object has a special hidden property called the prototype, which is either `null` or a reference to another object. When a property or method is not found in an object, JavaScript looks for it in the object's prototype, and if not found there, it continues looking up the prototype chain until the property or method is found or the end of the chain is reached.

Here's an overview of prototypes and prototypal inheritance in JavaScript:

  1. Object prototypes:

Every JavaScript object has an associated prototype, which is an object that it can inherit properties and methods from. When you create an object using the object literal notation or the `Object.create()` method, the object's prototype is set to `Object.prototype`.

const person = {
  firstName: "John",
  lastName: "Doe",
};

console.log(Object.getPrototypeOf(person) === Object.prototype); // Output: true
  1. Constructor function prototypes:

When you create an object using a constructor function and the `new` keyword, the object's prototype is set to the constructor function's `prototype` property.

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const person = new Person("John", "Doe");
console.log(Object.getPrototypeOf(person) === Person.prototype); // Output: true
  1. Adding properties and methods to prototypes:

You can add properties and methods to an object's prototype, making them available to all objects that have that prototype. This is a memory-efficient way to share properties and methods across multiple objects.

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
};

const person1 = new Person("John", "Doe");
const person2 = new Person("Jane", "Doe");

person1.greet(); // Output: Hello, my name is John Doe.
person2.greet(); // Output: Hello, my name is Jane Doe.

In this example, the `greet` method is added to the `Person.prototype` object, making it available to all instances of the `Person` constructor function.

  1. Prototypal inheritance:

When you try to access a property or method on an object, JavaScript looks for it in the object itself. If it's not found, JavaScript looks for it in the object's prototype, and if it's not found there, it continues looking up the prototype chain until the property or method is found or the end of the chain is reached.

console.log(person1.hasOwnProperty("greet")); // Output: false
console.log(person1.__proto__.hasOwnProperty("greet")); // Output: true

In this example, the `greet` method is not found in the `person1` object, so JavaScript looks for it in the object's prototype (`Person.prototype`) and finds it there.

In summary, prototypes and prototypal inheritance are fundamental concepts in JavaScript, allowing objects to inherit properties and methods from other objects. This mechanism provides a memory-efficient way to share properties and methods across multiple objects and is the basis for JavaScript's object-oriented programming model.

Was this page helpful?