Skip to content

Latest commit

 

History

History
188 lines (131 loc) · 5.5 KB

JavaScript-prototype.md

File metadata and controls

188 lines (131 loc) · 5.5 KB

What Is a Prototype in JavaScript ?

In JavaScript, every object has an internal hidden property called [[Prototype]], which refers to another object called its prototype. A prototype is essentially a blueprint or template from which objects inherit properties and methods. This prototype-based inheritance allows objects to share functionality and makes JavaScript more dynamic and flexible.

Understanding Prototypes

  • Prototype: An object that acts as a fallback for another object. When a property or method is not found directly on an object, JavaScript looks for it in the object's prototype chain.
  • Prototype Chain: A chain of objects connected via their [[Prototype]]. If the property or method is not found in the current object, JavaScript traverses up the prototype chain until it finds the property or reaches the end (null).

Why Is Prototype Important?

  1. Code Reuse: Prototypes allow shared methods and properties, reducing memory usage.
  2. Inheritance: Objects can inherit behavior from other objects without duplicating code.
  3. Dynamic Behavior: You can modify an object's prototype at runtime to add new properties or methods.

Accessing the Prototype

  1. Object.getPrototypeOf(): Retrieves the prototype of an object.

    let obj = {};
console.log(Object.getPrototypeOf(obj)); // Output: {}

  2. Object.prototype: The top-level prototype in the chain.

    console.log(Object.prototype); // Output: {}

  3. __proto__ (deprecated but still widely used): Refers to the [[Prototype]] of an object.

    let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

Creating Prototypes

1. Default Object Prototype

All objects by default inherit from Object.prototype, which provides built-in methods like toString(), valueOf(), and more.

let obj = {};
console.log(obj.toString()); // Output: "[object Object]"

2. Adding Properties and Methods to Prototypes

You can add properties or methods to an object's prototype to share functionality.

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

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

let alice = new Person("Alice");
let bob = new Person("Bob");

alice.greet(); // Output: "Hello, my name is Alice"
bob.greet();   // Output: "Hello, my name is Bob"

Prototype Chain

When a property or method is accessed, JavaScript checks:

  1. The object itself.
  2. The object's prototype.
  3. The next object in the prototype chain, continuing until it finds the property or reaches null.

Example

let obj = {
    name: "Alice"
};

console.log(obj.name);        // Output: "Alice" (found in the object itself)
console.log(obj.toString());  // Output: "[object Object]" (found in Object.prototype)

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

Custom Prototypes

You can set a custom prototype using Object.create().

let animal = {
    speak: function () {
        console.log(this.name + " makes a sound.");
    }
};

let dog = Object.create(animal);
dog.name = "Buddy";
dog.speak(); // Output: "Buddy makes a sound."

Prototype vs __proto__

  • prototype: A property of constructor functions (e.g., Person.prototype) that sets the prototype of objects created by that constructor.
  • __proto__: An internal reference that links an object to its prototype.

Example

function Person(name) {
    this.name = name;
}
let john = new Person("John");

console.log(Person.prototype); // The prototype object of Person
console.log(john.__proto__);   // The prototype object of john
console.log(john.__proto__ === Person.prototype); // Output: true

Prototype Inheritance

Objects can inherit from other objects via prototypes, enabling the reuse of properties and methods.

Example

function Animal(name) {
    this.name = name;
}
Animal.prototype.eat = function () {
    console.log(this.name + " is eating.");
};

function Dog(name) {
    Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function () {
    console.log(this.name + " is barking.");
};

let rex = new Dog("Rex");
rex.eat();  // Output: "Rex is eating." (inherited from Animal)
rex.bark(); // Output: "Rex is barking." (defined in Dog)

Advantages of Prototypes

  1. Memory Efficiency: Shared methods are stored in one location (prototype) rather than in every instance.
  2. Dynamic Behavior: You can extend prototypes at runtime.
  3. Supports Inheritance: Simplifies creating hierarchies and sharing behavior across objects.

Key Built-In Prototypes

  1. Array.prototype

    • Methods like map(), filter(), reduce() are part of Array.prototype.

  2. String.prototype

    • Methods like toUpperCase(), slice(), replace() are part of String.prototype.

  3. Function.prototype

    • Methods like bind(), call(), apply() are part of Function.prototype.

Conclusion

The prototype in JavaScript is a powerful feature that enables inheritance, code reuse, and dynamic extension of functionality. Understanding prototypes and the prototype chain is essential for working with JavaScript effectively and designing efficient, maintainable applications.