Prototypes in Javascript

JavaScript uses prototypal inheritance. Objects can inherit properties and methods from other objects through the prototype chain.

Key Concepts

• Every object has a prototype
• Prototype chain allows property lookup
• Functions have prototype property
• ES6 classes are syntactic sugar

---

Understanding Prototypes

Code

const person = {
  name: "Kuldeep",
  age: 25
};
console.log(person.toString()); // "[object Object]" - inherited from Object.prototype
console.log(person.__proto__ === Object.prototype); // true

Prototype Chain

Prototype chain: arr -> Array.

prototype -> Object.

prototype -> null.

Code

const arr = [1, 2, 3];
console.log(arr.__proto__ === Array.prototype); // true
console.log(Array.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

Adding Methods to Prototype

Code

Array.prototype.last = function() {
  return this[this.length - 1];
};
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.last()); // 5

Constructor Functions

All instances share the same prototype method.

Code

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.greet = function() {
  return `Hello, I'm ${this.name}`;
};
const person1 = new Person("Kuldeep", 25);
const person2 = new Person("Ramesh", 30);
console.log(person1.greet()); // "Hello, I'm Kuldeep"
console.log(person2.greet()); // "Hello, I'm Ramesh"
console.log(person1.greet === person2.greet); // true

Prototype Inheritance

Set up inheritance.

Code

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return `${this.name} makes a sound`;
};
function Dog(name, breed) {
  Animal.call(this, name); // Call parent constructor
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
  return `${this.name} barks!`;
};
const dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.speak()); // "Buddy barks!"
console.log(dog instanceof Dog); // true
console.log(dog instanceof Animal); // true

ES6 Classes (Syntactic Sugar)

Code

class Animal2 {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a sound`;
  }
}
class Dog2 extends Animal2 {
  constructor(name, breed) {
    super(name); // Call parent constructor
    this.breed = breed;
  }
  speak() {
    return `${this.name} barks!`;
  }
}
const dog2 = new Dog2("Max", "Labrador");
console.log(dog2.speak()); // "Max barks!"

Object.create() for Inheritance

Code

const animal = {
  speak() {
    return `${this.name} makes a sound`;
  }
};
const dog3 = Object.create(animal);
dog3.name = "Rex";
dog3.speak = function() {
  return `${this.name} barks!`;
};
console.log(dog3.speak()); // "Rex barks!"

hasOwnProperty vs in Operator

Code

const obj = {
  ownProp: "value"
};
obj.__proto__.inheritedProp = "inherited";
console.log("ownProp" in obj); // true
console.log("inheritedProp" in obj); // true
console.log(obj.hasOwnProperty("ownProp")); // true
console.log(obj.hasOwnProperty("inheritedProp")); // false

Prototype Methods

Code

function MyArray() {
  this.length = 0;
}
MyArray.prototype.push = function(item) {
  this[this.length] = item;
  this.length++;
  return this.length;
};
MyArray.prototype.pop = function() {
  if (this.length === 0) return undefined;
  this.length--;
  const item = this[this.length];
  delete this[this.length];
  return item;
};
const myArr = new MyArray();
myArr.push(1);
myArr.push(2);
console.log(myArr.pop()); // 2

Mixins (Multiple Inheritance)

Mix in behaviors Common Interview Questions Q1: What is the prototype chain.

A: The prototype chain is the mechanism by which JavaScript objects inherit properties and methods from other objects.

Q2: Difference between proto and prototype.

A: proto is the actual prototype link on instances, prototype is a property on constructor functions Q3: How to check if property exists on object vs prototype.

A: Use hasOwnProperty() or Object.

Code

const canEat = {
  eat() {
    return `${this.name} is eating`;
  }
};
const canWalk = {
  walk() {
    return `${this.name} is walking`;
  }
};
function Person2(name) {
  this.name = name;
}
Object.assign(Person2.prototype, canEat, canWalk);
const person3 = new Person2("Kuldeep");
console.log(person3.eat()); // "Kuldeep is eating"
console.log(person3.walk()); // "Kuldeep is walking"
console.log(obj.hasOwnProperty("ownProp")); // true
console.log(Object.hasOwn(obj, "ownProp")); // true (modern)

---

Summary

Understanding prototypes is essential for mastering javascript. Practice these examples and experiment with variations to deepen your understanding.

Key Takeaways

• prototypes is a fundamental concept in javascript
• Practice with these examples to build confidence
• Experiment with variations to explore edge cases
• Understanding prototypes will help you in technical interviews