JavaScript Prototypes and Inheritance

What You’ll Learn 📚

• Understanding prototypes and how they work in JavaScript
• The concept of inheritance and how it’s implemented using prototypes
• Common pitfalls and how to avoid them
• Hands-on exercises to solidify your understanding

Introduction to Prototypes

In JavaScript, every object has a prototype. Think of a prototype as a template or blueprint from which objects inherit properties and methods. This is a core concept of JavaScript’s object-oriented nature.

Key Terminology

• Prototype: An object from which other objects inherit properties.
• Inheritance: The mechanism by which an object can access properties and methods of another object.
• Prototype Chain: A series of linked prototypes that JavaScript follows to find properties and methods.

Simple Example: The Basics of Prototypes

// Create a simple object
const animal = {
  eats: true
};

// Create another object that inherits from animal
const rabbit = Object.create(animal);
rabbit.jumps = true;

console.log(rabbit.eats); // true
console.log(rabbit.jumps); // true

Progressively Complex Examples

Example 1: Adding Methods to Prototypes

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

const alice = new Person('Alice');
alice.sayHello(); // Hello, my name is Alice

Example 2: Prototype Chain

const grandparent = {
  hair: 'gray'
};

const parent = Object.create(grandparent);
parent.eyeColor = 'blue';

const child = Object.create(parent);
child.height = 'tall';

console.log(child.hair); // gray
console.log(child.eyeColor); // blue

Example 3: Overriding Prototype Properties

const car = {
  wheels: 4
};

const sportsCar = Object.create(car);
sportsCar.wheels = 6;

console.log(sportsCar.wheels); // 6
console.log(car.wheels); // 4

Common Questions and Answers

1. What is a prototype in JavaScript?

   A prototype is an object from which other objects inherit properties and methods.

2. How does inheritance work in JavaScript?

   Inheritance in JavaScript is achieved through the prototype chain, where objects inherit properties and methods from their prototypes.

3. Can I modify an object’s prototype?

   Yes, you can modify an object’s prototype, but it’s generally not recommended to change the prototype of built-in objects.

4. What happens if a property is not found in the prototype chain?

   If a property is not found in the prototype chain, JavaScript returns undefined.

5. How do I check if an object has a property?

   You can use hasOwnProperty to check if a property belongs to the object itself and not its prototype.

Troubleshooting Common Issues

Be careful when modifying prototypes, as it can lead to unexpected behavior if not done correctly.

Remember, the prototype chain is like a family tree. If you can’t find something in the immediate family, look up the tree!

Practice Exercises

• Create an object dog with a property barks. Then create another object puppy that inherits from dog and add a property plays.
• Define a constructor function Vehicle and add a method move to its prototype. Create an instance and call the method.

Don’t worry if this seems complex at first. With practice, you’ll get the hang of it! Keep experimenting and happy coding! 🚀