नमस्कार ,

thisइस लेख में, हम जावास्क्रिप्ट में उपयोग किए जाने वाले संदर्भ के आधार पर कीवर्ड के विभिन्न संभावित मूल्यों की व्याख्या करने का प्रयास करेंगे ।

वैश्विक कार्यक्षेत्र

वैश्विक दायरे में, वैश्विक वस्तु ( वेब ​​पर और Node.js में) thisको संदर्भित करता है ।windowglobal

globalThisवैश्विक वस्तु तक पहुंचने के स्वतंत्र तरीके के मंच के रूप में भी इस्तेमाल किया जा सकता है।

// global scope (web)

console.log(this === window); // true
console.log(this === globalThis); // true

एक गैर-तीर फ़ंक्शन के अंदर, का मान thisइस बात पर निर्भर करेगा कि फ़ंक्शन को कैसे कहा जाता है।

स्टैंडअलोन फ़ंक्शन के रूप में कॉल किया गया

• गैर-सख्त मोड में, वैश्विक वस्तु को संदर्भित करता है: this

function getThis() {
  return this;
}

console.log(getThis() === globalThis); // true

"use strict"

function getThis() {
  return this;
}

console.log(getThis() === undefined); // true

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(bar.getThis() === bar); // true

const baz = {};
baz.getThis = bar.getThis;

console.log(baz.getThis() === baz); // true

// Called as a standalone function
const getThis = bar.getThis;
console.log(getThis() === globalThis); // true (`false` in strict mode)

वस्तु शाब्दिक में विधियों की तुलना में वर्ग विधियाँ उसी तरह व्यवहार करती हैं।

तीर कार्य करता है

एक तीर फ़ंक्शन के अंदर, का मान this संलग्न शाब्दिक संदर्भ में से एक के बराबर होता है ।

दूसरे शब्दों में, तीर फ़ंक्शन का मूल्यांकन करते समय, जेएस इंजन एक नया thisबंधन नहीं बनाता है लेकिन आसपास के दायरे में उपलब्ध एक का उपयोग करता है :

// (1) `this` equals to `globalThis` here

const foo = {
  getThis: () => this
};

console.log(foo.getThis() === foo); // false
console.log(foo.getThis() === globalThis); // true (1)
// (1) `this` equals to `globalThis` here

const bar = {
  getArrowFn: function() {
    // (2) `this` equals to `bar` or `baz` here 
    // depending on how the function is called below
    
    return () => this;
  }
};

console.log(bar.getArrowFn()() === bar); // true (2)
console.log(bar.getArrowFn()() === globalThis); // false (1)

const baz = {};
baz.getArrowFn = bar.getArrowFn;

console.log(baz.getArrowFn()() === baz); // true (2)
console.log(baz.getArrowFn()() === globalThis); // false (1)

फंक्शन कंस्ट्रक्टर

कन्स्ट्रक्टर ( newकीवर्ड के साथ) के रूप में उपयोग किए जाने वाले फ़ंक्शन के अंदर, thisनई वस्तु के निर्माण के लिए बाध्य है, इससे कोई फर्क नहीं पड़ता कि फ़ंक्शन कैसे पहुंचा जा सकता है:

function Bar() {
  this.baz = 42;
}

let a = new Bar();
console.log(a.baz); // 42
const bar = {
  baz: function() {
    this.foo = 42;
  }
};

let a = new bar.baz();
console.log(a.foo); // 42
console.log(bar.foo); // undefined

function Bar() {
  this.baz = 42;
  return { baz: 44 };
}

let a = new Bar();
console.log(a.baz); // 44 (not 42)

लागू करें (), कॉल करें ()

गैर-तीर कार्यों में स्पष्ट रूप से मान निर्धारित करने के लिए call()और विधियों का उपयोग किया जा सकता है:apply()this

function getThis() {
  return this;
}

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(getThis() === globalThis); // true
console.log(bar.getThis() === bar); // true

const myThis = {};

console.log(getThis.call(myThis) === myThis); // true
console.log(getThis.apply(myThis) === myThis); // true

console.log(bar.getThis.call(myThis) === myThis); // true
console.log(bar.getThis.apply(myThis) === myThis); // true

तीर फ़ंक्शन पर उपयोग किए जाने पर, thisपैरामीटर को अनदेखा कर दिया जाता है (हालांकि, आप अभी भी इन विधियों का उपयोग करके फ़ंक्शन तर्क पास कर सकते हैं):

// (1) `this` equals to `globalThis` here

const getThis = () => this;

console.log(getThis() === globalThis); // true

const myThis = {};

console.log(getThis.call(myThis) === globalThis); // true
console.log(getThis.apply(myThis) === globalThis); // true

फ़ंक्शन का bind()उपयोग एक नया फ़ंक्शन बनाने के लिए किया जाता है जो किसी दिए गए ऑब्जेक्ट से जुड़ा होता है।

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

function getThis() {
  return this;
}

console.log(getThis() === globalThis); // true

const myThis = {};
const getMyThis = getThis.bind(myThis);

console.log(getMyThis() === myThis); // true
console.log(getMyThis.call(globalThis) === myThis); // true
console.log(getMyThis.apply(globalThis) === myThis); // true

तीर फ़ंक्शन पर उपयोग किए जाने पर, thisपैरामीटर को अनदेखा कर दिया जाता है (हालांकि, आप अभी भी इन विधियों का उपयोग करके फ़ंक्शन तर्क पास कर सकते हैं):

// (1) `this` equals to `globalThis` here

const getThis = () => this;

console.log(getThis() === globalThis); // true

const myThis = {};
const getMyThis = getThis.bind(myThis);

console.log(getMyThis() === globalThis); // true
console.log(getMyThis.call(myThis) === globalThis); // true
console.log(getMyThis.apply(myThis) === globalThis); // true