Prototypes in JavaScript: Embracing Inheritance

Computer Screen

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.

Danilo Cavalcante

Working with web development since 2005, currently as a senior programmer analyst. Development, maintenance, and integration of systems in C#, ASP.Net, ASP.Net MVC, .Net Core, Web API, WebService, Integrations (SOAP and REST), Object-Oriented Programming, DDD, SQL, Git, and JavaScript