Day 10/30 - Talk JavaScript To Me: Prototype & Inheritance

Let's start with a silly programming joke, shall we ? 😜

Why was the computer cold?
It left its Windows open. 😜        

What is a Prototype?

In JavaScript, every object has a prototype. A prototype is also an object. Think of it as a template or blueprint from which other objects inherit properties and methods. When you try to access a property or method on an object, JavaScript will first look for it within the object itself. If it doesn’t find it there, it will look for it on the object's prototype. This process continues up the prototype chain until the property or method is found, or the end of the chain is reached.

How to Create a Prototype:

// Constructor function for Person
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}`);
};

// Creating a new Person object
const person1 = new Person('John Wick', 30);

// Calling the greet method
person1.greet(); // Output: Hello, my name is John Wick        

In this example:

• We define a constructor function Person.
• We add a method greet to Person.prototype.
• When we create a new instance of Person, it inherits the greet method from Person.prototype.

Prototypal Inheritance

Prototypal inheritance allows one object to inherit properties and methods from another. This is done through prototypes. Here’s a more advanced example:

// Base object
const animal = {
  speak: function() {
    console.log(`${this.name} makes a sound`);
  }
};

// Creating a new object that inherits from animal
const dog = Object.create(animal);
dog.name = 'Rex';
dog.speak(); // Output: Rex makes a sound

// Adding a new method to the dog object
dog.bark = function() {
  console.log(`${this.name} barks`);
};

dog.bark(); // Output: Rex barks        

In this example:

• We create an object animal with a speak method.
• We create a new object dog that inherits from animal using Object.create.
• We assign a name property to dog and call the speak method.
• We add a new method bark to the dog object.

The Prototype Chain

The prototype chain is a series of linked objects. JavaScript uses this chain to look up properties and methods. Here’s how it works:

console.log(dog.__proto__); // Output: { speak: [Function: speak] }
console.log(dog.__proto__.__proto__); // Output: {}

// The end of the chain is a null prototype
console.log(dog.__proto__.__proto__.__proto__); // Output: null        

The __proto__ property is a reference to the prototype object. When we access a property or method, JavaScript will traverse this chain until it finds what it's looking for or reaches the end (null).

Why Use Prototypal Inheritance?

• Memory Efficiency: Methods are shared among instances, which results in reducing memory usage.
• Dynamic Flexibility: You can add methods to prototypes even after objects are created.

Conclusion

Understanding JavaScript prototypes and prototypal inheritance allows you to write an efficient and effective code. By leveraging these features, you can create objects that share behaviour and reduce redundancy.Feel free to experiment with these concepts in your code. Happy coding!

Feel free to reach out if you have any questions or want to discuss more about JavaScript and its quirks! Even if you do not agree with this post 😜

#JavaScript #Coding #WebDevelopment #Learning #BeginnerTips #Programming