A Comprehensive Guide to JavaScript Class Prototypes in Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

Function Constructor की तरह ही आप Class के साथ भी prototype property का use कर सकते हैं , new properties और methods को add / access कर सकते हैं।

prototype द्वारा add की गयी सभी property / methods Object scope में होते थे , जिससे वो Object के through accessible ही होते थे। और scope में होने की वजह से add किये गए methods में this keyword के through किसी property को access भी किया जा सकता था।

JS Class Prototype Example

Copy
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

const animal = new Animal("Generic Animal");
animal.speak(); // Output: Generic Animal makes a sound.

// Adding a method to the Animal class's prototype
Animal.prototype.move = function(distance) {
  console.log(`${this.name} moves ${distance} meters.`);
};

animal.move(10); // Output: Generic Animal moves 10 meters.

ध्यान रहे कि कोई भी new property / methods को add करने के लिए हमेशा class name ही use होगा , class object में सिर्फ class data होता है उसमे prototype जैसी built इन properties नहीं होती है।

const animal = new Animal("Generic Animal");
animal.prototype.move = function(distance) {
  console.log(`${this.name} moves ${distance} meters.`);
};

// Uncaught TypeError: animal.prototype is undefined

JS Prototype Add properties

तो ऊपर दिए गए example में prototype का use करके एक new method को add किया गया था , हालाँकि आप चाहें तो इसी तरह से new properties को भी add कर सकते हैं।

Copy
// define empty class.
class User {}

const user = new User();

console.log(user.first_name);  // undefined.
// add first_name property.
User.prototype.first_name = "John"; 

console.log(user.last_name);  // undefined.
// add last_name property.
User.prototype.last_name = "Doe";

// Add method uto print full name.
User.prototype.printName = function() {
    console.log(`Hey ! ${this.first_name} ${this.last_name}`);
};
user.printName(); // Hey ! John Doe.

Important

ध्यान रहे कि class में new method add करते time Arrow Function का use न करे , क्योंकि arrow method में आप this keyword या current object का use नहीं कर पाएंगे।

For example

Copy
class User {
    constructor() {
        this.userAddress = "LA, USA";
    }
}

const user = new User();

// Add method using arrow syntax .
User.prototype.printName = () => {
    console.log(`Address : ${this.userAddress}`);
};
user.printName(); // Address : undefined.

तो example में आप देख सकते हैं कि आपको undefined मिला है। ऐसा इसलिए होता है , क्योंकि Arrow Functions , constructor नहीं होते हैं और न ही हम इनका object बना सकते हैं जैसे बाकी normally Functions को as a object की तरह use में ले सकते हैं।

Read More About Function Constructor . . .

Why prototype is so important ?

Actually prototype का main purpose dynamically properties या methods को किसी class में add करने के लिए बहुत important functionality है , क्योंकि कभी कभी हम class define करते समय सब कुछ add नहीं कर पाते हैं।

तो prototype का use करके आप need के according new properties और methods add कर सकते हैं।

***

I Hope , आपको JavaScript में Class Prototypes के बारे में अच्छे से समझ आ गया होगा।