Computer Screen

Prototypes in JavaScript: Embracing Inheritance

JavaScript uses a prototype-based inheritance model, where objects can inherit properties and methods from other objects. Let’s dive into how prototypes work.

1. Object Prototypes

In JavaScript, every object has a prototype, which is another object that it inherits properties and methods from. You can access an object’s prototype using the Object.getPrototypeOf() method.

// Object prototype
const animal = {
  makeSound: function() {
    console.log("Generic animal sound");
  },
};

// Object with inheritance
const cat = Object.create(animal);
cat.name = "Whiskers";
cat.makeSound = function() {
  console.log("Meow!");
};

cat.makeSound(); // Output: Meow!

// Accessing the prototype
const catPrototype = Object.getPrototypeOf(cat);
console.log(catPrototype === animal); // Output: true

2. Constructor Functions and Prototypes

When you create objects using constructor functions, each instance shares a common prototype. This allows you to define methods once in the prototype, saving memory and promoting code reusability.

// Constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Adding a method to the prototype
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
};

// Creating objects using the constructor
const alice = new Person("Alice", 30);
const bob = new Person("Bob", 25);

alice.greet(); // Output: Hello, my name is Alice and I'm 30 years old.
bob.greet();   // Output: Hello, my name is Bob and I'm 25 years old.

3. Prototypal Chain

Objects can form a chain of prototypes, known as the prototypal chain. If a property or method is not found on an object, JavaScript looks up the chain until it finds the property or reaches the end of the chain.

// Base object
const baseObject = {
  baseProperty: "I'm in the base object",
};

// Object with inheritance
const derivedObject = Object.create(baseObject);
derivedObject.derivedProperty = "I'm in the derived object";

console.log(derivedObject.baseProperty);    // Output: I'm in the base object
console.log(baseObject.derivedProperty);    // Output: undefined

Conclusion

Prototypes are a fundamental aspect of JavaScript’s inheritance model. They enable objects to inherit properties and methods, providing a mechanism for code reuse and structuring complex applications. Understanding prototypes is essential for effective object-oriented programming in JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *


Categories


Tag Cloud

.net algorithms angular api Array arrays async asynchronous basic-concepts big o blazor c# code components containers control-structures csharp data structures data types dictionaries docker dom dotnet encapsulation framework functions git guide javascript json leetcode linq lists loops methods MVC npm object oriented programming oop operators promisses sorted typescript variables web framework