कीवर्ड 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 }
देखें कि आपको कितना समझ आया है
वेब ब्राउज़र में चल रही स्क्रिप्ट के लिए, ग्लोबल ऑब्जेक्ट क्या है
जिसे this
का इस्तेमाल तब किया जाता है, जब इसे फ़ंक्शन के बाहर इस्तेमाल किया जाता है या
किसी ऑब्जेक्ट का संदर्भ क्या है?
undefined
ऑब्जेक्टbrowser
ऑब्जेक्टwindow
ऑब्जेक्ट