यह कीवर्ड

कीवर्ड this उस ऑब्जेक्ट के मान के बारे में बताता है जो फ़ंक्शन के रूप में शामिल किया जाता है, जिसका मतलब है कि इसकी वैल्यू अलग-अलग है. यह तय करता है कि किसी फ़ंक्शन को मेथड के तौर पर, स्टैंडअलोन फ़ंक्शन के तौर पर या कंस्ट्रक्टर.

जब किसी फ़ंक्शन को कॉल किया जाता है, तो यह कीवर्ड के पीछे this का एक इंस्टेंस बनाता है उस ऑब्जेक्ट के संदर्भ के रूप में सीन, जिसमें वह फ़ंक्शन शामिल है. इससे यह पता चलता है कि इसके दायरे में आने वाली प्रॉपर्टी और मेथड को ऐक्सेस करने की अनुमति देती है. this के साथ काम करना, कुछ मामलों में बताए गए वैरिएबल के साथ काम करने जैसा ही है const के साथ. किसी कॉन्स्टेंट की तरह, this को हटाया नहीं जा सकता और न ही इसकी वैल्यू को फिर से असाइन किया गया, लेकिन उस ऑब्जेक्ट की विधियां और प्रॉपर्टी जिसे this कीवर्ड शामिल किए गए कॉन्टेंट को बदला जा सकता है.

ग्लोबल बाइंडिंग

किसी फ़ंक्शन या ऑब्जेक्ट के संदर्भ के बाहर, this globalThis प्रॉपर्टी, जो ज़्यादातर मामलों में ग्लोबल ऑब्जेक्ट का रेफ़रंस है JavaScript एनवायरमेंट. वेब ब्राउज़र में चल रही स्क्रिप्ट के संदर्भ में, ग्लोबल ऑब्जेक्ट, window ऑब्जेक्ट है:

this;
> Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, ...}

Node.js में, globalThis एक global ऑब्जेक्ट है:

$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> this
<ref *1> Object [global] {
...
}

स्ट्रिक्ट मोड के बाहर, this स्टैंडअलोन में ग्लोबल ऑब्जेक्ट के बारे में भी बताता है फ़ंक्शन का इस्तेमाल किया जा सकता है, क्योंकि पैरंट Window वह ऑब्जेक्ट है जो असरदार तरीके से "मालिकाना हक" देता है उन फ़ंक्शन को छोड़ सकता है.

function myFunction() {
    console.log( this );
}
myFunction();
> Window {...}

(function() {
    console.log( this );
}());
> Window {...}

स्ट्रिक्ट मोड का इस्तेमाल करने पर, एक स्टैंडअलोन में this की वैल्यू undefined होती है फ़ंक्शन:

(function() {
    "use strict";
    console.log( this );
}());
> undefined

स्ट्रिक्ट मोड शुरू होने से पहले, this के लिए null या undefined वैल्यू को ग्लोबल ऑब्जेक्ट के रेफ़रंस से बदल दिया जाएगा. आपको कभी-कभी ग्लोबल बाइंडिंग को "डिफ़ॉल्ट बाइंडिंग" कहा जाता है की एक वजह हो सकती है.

इंप्लिसिट बाइंडिंग

जब किसी ऑब्जेक्ट को ऑब्जेक्ट के तरीके के तौर पर कॉल किया जाता है, तो अंदर का this का इंस्टेंस वह विधि उस ऑब्जेक्ट का संदर्भ देती है, जिसमें तरीका होता है, जिससे इसके बगल में मौजूद तरीके और प्रॉपर्टी:

let myObject = {
    myValue: "This is my string.",
    myMethod() {
            console.log( this.myValue );
    }
};

myObject.myMethod();
> "This is my string."

ऐसा लग सकता है कि this की वैल्यू, इस बात पर निर्भर करती है कि फ़ंक्शन और पास के ऑब्जेक्ट बताए गए हैं. इसके बजाय, this की वैल्यू का कॉन्टेक्स्ट यह है वर्तमान निष्पादित संदर्भ के साथ. इस मामले में, एक्ज़ीक्यूशन का संदर्भ यह होता है कि myObject ऑब्जेक्ट, myMethod तरीके को कॉल कर रहा है. इसलिए, वैल्यू myObject है this के लिए. पिछले संदर्भ के हिसाब से यह तकनीकीता की तरह लग सकता है उदाहरण के लिए, लेकिन this के ज़्यादा बेहतर इस्तेमाल के लिए, यह एक ज़रूरी अंतर है ध्यान रखें.

आम तौर पर, this का इस्तेमाल इस तरह करें जिससे आस-पास के कोड के होने की उम्मीद न हो का इस्तेमाल किया जा सकता है. ES5 इस नियम का अपवाद है ऐरो फ़ंक्शन.

ऐरो फ़ंक्शन में this

ऐरो फ़ंक्शन में, this एक बाइंडिंग में बदल जाता है लैक्सिकली एनवायरमेंट. इसका मतलब है कि ऐरो फ़ंक्शन में शामिल this, उस फ़ंक्शन में this की वैल्यू दिखाता है निकटतम निकटतम संदर्भ:

let myObject = {
    myMethod() { console.log( this ); },
    myArrowFunction: () => console.log( this ),
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myMethod();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

myObject.myArrowFunction();
> Window {...}

पिछले उदाहरण में, myObject.myMethod() ने myObject को ऑब्जेक्ट के तौर पर लॉग किया है जिस पर "मालिकाना हक" उसी तरीके का इस्तेमाल करेगा, लेकिन myObject.myArrowFunction() globalThis नतीजे दिखाएगा (या undefined), क्योंकि ऐरो फ़ंक्शन के अंदर this का इंस्टेंस इसके बजाय, सबसे ज़्यादा एनक्लोज़िंग स्कोप का इस्तेमाल करता है.

नीचे दिए गए उदाहरण में, myEnclosingMethod ऑब्जेक्ट को एक्ज़ीक्यूट करने के दौरान उसे शामिल करता है. अंदर this का उदाहरण ऐरो फ़ंक्शन अब एनक्लोज़िंग के अंदर this की वैल्यू दिखाता है वातावरण, जिसमें वह तरीका होता है जिसमें ऐरो फ़ंक्शन होता है. क्योंकि आपके बाद, myEnclosingMethod के अंदर this का मान myObject दिखाता है ऐरो फ़ंक्शन को परिभाषित करें, ऐरो फ़ंक्शन के अंदर का this भी इससे जुड़ा है myObject:

let myObject = {
    myMethod() { console.log( this ); },
    myEnclosingMethod: function () {
        this.myArrowFunction = () => { console.log(this) };
    }
};

myObject.myEnclosingMethod();
myObject.myArrowFunction();
> Object { myMethod: myMethod(), myArrowFunction: myArrowFunction() }

एक्सप्लिसिट बाइंडिंग

this के साथ काम करने के लिए, इस्तेमाल के ज़्यादातर मामलों में इंप्लिसिट बाइंडिंग हैंडल. हालांकि, आपको खास फ़ंक्शन को दिखाने के लिए, कभी-कभी this वैल्यू की ज़रूरत पड़ सकती है का इस्तेमाल किया जा सकता है. उदाहरण के तौर पर, अगर थोड़ा पुराना हो, उदाहरण के लिए, setTimeout के कॉलबैक फ़ंक्शन में this के साथ काम करना क्योंकि इस कॉलबैक में, इसे रन करने का यूनीक कॉन्टेक्स्ट होता है:

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};
myObject.myMethod();
> "This is my string."

setTimeout( myObject.myMethod, 100 );
> undefined

हालांकि, setTimeout की इस खास कमी को अब तक अन्य सुविधाओं, "लॉस" की मिलती-जुलती समस्याएं this को पहले पता किया जा चुका है इसके लिए this की वैल्यू का साफ़ तौर पर रेफ़रंस दिया जा सकता है. और कॉन्टेंट की पहचान करने में मदद मिलती है. कभी-कभी आपको ऐसा दिख सकता है कि this असाइन किए गए हैं लेगसी में that, self या _this जैसे आइडेंटिफ़ायर का इस्तेमाल करके वैरिएबल में कोड बेस में भी सेव किया जा सकता है. वैरिएबल के लिए ये सामान्य आइडेंटिफ़ायर हैं, जिनमें this मान पास किया गया.

जब call(), bind() या apply() तरीकों का इस्तेमाल करके किसी फ़ंक्शन को कॉल किया जाता है, this कॉल किए जा रहे ऑब्जेक्ट का स्पष्ट रूप से संदर्भ देता है:

let myFunction = function() {
    console.log( this.myValue );
}

let myObject = {
   "myValue" : "This is my string."
 };

myFunction.call( myObject );
> "This is my string."

var myObject = {
  myString: "This is my string.",
  myMethod() {
    console.log( this.myString );
  }
};

setTimeout( myObject.myMethod.bind( myObject ), 100 );
> "This is my string."

एक्सप्लिसिट बाइंडिंग, इंप्लिसिट बाइंडिंग से मिली this वैल्यू को बदल देती है.

let myObject = {
    "myValue" : "This string sits alongside myMethod.",
    myMethod() {
        console.log( this.myValue );
    }
};
let myOtherObject = {
    "myValue" : "This is a string in another object entirely.",
};

myObject.myMethod.call( myOtherObject );
> "This is a string in another object entirely."

अगर किसी फ़ंक्शन को इस तरीके से कॉल किया जाता है, जिससे this का मान undefined या null, उस वैल्यू को सख्ती से बाहर globalThis से बदल दिया जाता है मोड:

let myFunction = function() {
    console.log( this );
}

myFunction.call( null );
> Window {...}

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

let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> Number { 10 }

सख्त मोड में, पास की गई this वैल्यू को किसी भी तरह से ऑब्जेक्ट पर लागू नहीं किया जाता है, भले ही वह कोई प्रिमिटिव, null या undefined वैल्यू हो:

"use strict";
let myFunction = function() {
    console.log( this );
}

let myNumber = 10;

myFunction.call( myNumber );
> 10

myFunction.call( null );
> null

new बाइंडिंग

जब किसी class को कंस्ट्रक्टर के तौर पर इस्तेमाल किया जाता है. new कीवर्ड, this नए बनाए गए उदाहरण को दिखाता है:

class MyClass {
    myString;
    constructor() {
        this.myString = "My string.";
    }
    logThis() {
        console.log( this );
    }
}
const thisClass = new MyClass();

thisClass.logThis();
> Object { myString: "My string." }

इसी तरह, कंस्ट्रक्टर फ़ंक्शन में this की वैल्यू, जिसे new का इस्तेमाल करके कॉल किया जाता है बनाए जा रहे ऑब्जेक्ट का संदर्भ देता है:

function MyFunction() {
  this.myString = "My string.";
  this.logThis = function() {
    console.log( this );
  }
}
const myObject = new MyFunction();

myObject.logThis();
> Object { myString: "My string.", logThis: logThis() }

इवेंट हैंडलर बाइंडिंग

इवेंट हैंडलर के संदर्भ में, this की वैल्यू उस ऑब्जेक्ट का रेफ़रंस देती है जो उसे शुरू करता है. किसी इवेंट हैंडलर के कॉलबैक फ़ंक्शन के अंदर, इसका मतलब है this हैंडलर से जुड़े एलिमेंट का रेफ़रंस देता है:

let button = document.querySelector( "button" );

button.addEventListener( "click", function( event ) { console.log( this ); } );

जब कोई उपयोगकर्ता पिछले स्निपेट में button से इंटरैक्ट करता है, तो नतीजा यह होता है वह एलिमेंट ऑब्जेक्ट जिसमें <button> शामिल है:

> Button {}

जब किसी ऐरो फ़ंक्शन का इस्तेमाल इवेंट लिसनर कॉलबैक के रूप में किया जाता है, तो this को फिर से सबसे नज़दीकी पास वाले निष्पादन संदर्भ से दिया जाता है. सबसे ऊपर लेवल की जानकारी देता है, इसका मतलब है कि इवेंट हैंडलर के कॉलबैक फ़ंक्शन में this globalThis (या undefined, सख्त मोड में):

let button = document.querySelector( "button" );

button.addEventListener( "click", ( event ) => { console.log( this ); } );
> undefined

किसी भी दूसरे ऑब्जेक्ट की तरह, जब call(), bind() या apply() का इस्तेमाल किया जाता है किसी इवेंट लिसनर के कॉलबैक फ़ंक्शन का रेफ़रंस देने के तरीके, this ऑब्जेक्ट को स्पष्ट रूप से संदर्भ देता है:

let button = document.querySelector( "button" );
let myObject = {
    "myValue" : true
};
function handleClick() {
    console.log( this );
}

button.addEventListener( "click", handleClick.bind( myObject ) );
> Object { myValue: true }

देखें कि आपको कितना समझ आया है