this, प्रोटोटाइप और क्लासेस

समझें कि this गतिशील रूप से कैसे हल होता है, प्रोटोटाइप चेन कैसे काम करती है, और क्लासेस असल में ऑब्जेक्ट मॉडल में क्या जोड़ती हैं।

10 मिनट · 3 प्रश्न

this की वैल्यू कॉल साइट पर तय होती है, घोषणा के समय नहीं। घटते क्रम में चार नियम: new के साथ कॉल करना, स्पष्ट बाइंडिंग (call, apply, bind), मेथड की तरह कॉल करना (obj.fn()), और सादा कॉल (fn()), जो स्ट्रिक्ट मोड में undefined देता है। वास्तविक दुनिया की सबसे आम बग सीधे इसी से आती है: किसी मेथड को उसके ऑब्जेक्ट से निकाल लेना अंतर्निहित बाइंडिंग को तोड़ देता है।

const user = {
  name: "Ada",
  greet() {
    return "Hello, " + this.name;
  },
};
console.log(user.greet()); // "Hello, Ada"
const detached = user.greet;
// detached(); // TypeError: this is undefined
const bound = user.greet.bind(user);
console.log(bound()); // "Hello, Ada"

एरो फंक्शन्स का अपना कोई this नहीं होता: वे उसे आसपास के स्कोप से लेक्सिकल रूप से कैप्चर करते हैं, ठीक किसी क्लोज़र की तरह। यह उन्हें कॉलबैक के लिए आदर्श बनाता है, पर ऑब्जेक्ट लिटरल पर मेथड के रूप में उलटा नुकसानदेह, जहाँ this बाहरी स्कोप की ओर इशारा करेगा। भीतर की बात यह है कि हर ऑब्जेक्ट अपनी प्रोटोटाइप चेन के ज़रिए डेलिगेट करता है: कोई गायब प्रॉपर्टी कड़ी-दर-कड़ी तब तक खोजी जाती है जब तक null तक न पहुँच जाए।

function Animal(name) {
  this.name = name;
}
Animal.prototype.describe = function () {
  return this.name + " is an animal";
};
const dog = new Animal("Rex");
console.log(dog.describe()); // "Rex is an animal"
console.log(Object.getPrototypeOf(dog) ===
  Animal.prototype); // true
console.log(dog.hasOwnProperty("describe")); // false

class सिंटैक्स इस मॉडल को बदलता नहीं है: यह उसे पठनीय बनाता है। क्लास बॉडी में घोषित मेथड्स Constructor.prototype पर उतरते हैं और इसलिए साझा होते हैं। इंस्टेंस फ़ील्ड्स (फ़ील्ड के रूप में असाइन किए गए एरो फंक्शन्स समेत) प्रति इंस्टेंस दोबारा बनते हैं: पक्की this बाइंडिंग, पर बढ़ी हुई मेमोरी लागत। अंत में, #private फ़ील्ड्स इंजन द्वारा लागू की गई प्राइवेसी देते हैं, _अंडरस्कोर वाली परंपरा के विपरीत।

class BankAccount {
  #balance = 0;
  deposit(amount) {
    if (amount <= 0) throw new Error("Invalid amount");
    this.#balance += amount;
    return this;
  }
  get balance() {
    return this.#balance;
  }
}
const account = new BankAccount();
account.deposit(50).deposit(25);
console.log(account.balance); // 75

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. स्ट्रिक्ट मोड में, बिना किसी ऑब्जेक्ट और बिना स्पष्ट बाइंडिंग के सादे कॉल fn() के दौरान this क्या होता है?
   • globalThis
   • undefined
   • वह ऑब्जेक्ट जिसमें fn घोषित किया गया था
   • null
2. क्लास बॉडी में घोषित मेथड्स (फ़ील्ड्स को छोड़कर) कहाँ संग्रहीत होते हैं?
   • हर इंस्टेंस पर, निर्माण के समय कॉपी किए जाकर
   • Constructor.prototype पर, सभी इंस्टेंस द्वारा साझा
   • एक अगम्य आंतरिक स्कोप में
3. this के संबंध में एरो फंक्शन की खास बात क्या है?
   • यह this को कॉल करने वाले ऑब्जेक्ट से बाँधता है, किसी मेथड की तरह
   • इसका अपना कोई this नहीं होता और यह आसपास के स्कोप वाले this को कैप्चर करता है
   • यह this को हमेशा globalThis से बाँधता है
   • यह this तक किसी भी पहुँच पर रोक लगाता है