JavaScript
संदर्भ (यह)

साधारण वस्तुओं के साथ

var person = {
  name: 'John Doe',
  age: 42,
  gender: 'male',
  bio: function() {
    console.log('My name is ' + this.name);
  }
};
person.bio(); // logs "My name is John Doe"
var bio = person.bio;
bio(); // logs "My name is undefined"

उपरोक्त कोड में, person.bio संदर्भ का उपयोग करता है ( this )। जब फ़ंक्शन को person.bio() रूप में कहा जाता है, तो संदर्भ स्वचालित रूप से पास हो जाता है, और इसलिए यह "मेरा नाम जॉन डो है" सही ढंग से लॉग करता है। फ़ंक्शन को किसी वैरिएबल पर असाइन करते समय, यह अपना संदर्भ खो देता है।

गैर-सख्त मोड में, डिफ़ॉल्ट संदर्भ वैश्विक ऑब्जेक्ट ( window ) है। सख्त मोड में यह undefined ।

नेस्टेड फ़ंक्शन / ऑब्जेक्ट में उपयोग के लिए इसे सहेजना

एक सामान्य नुकसान this कि this एक नेस्टेड फ़ंक्शन या ऑब्जेक्ट में उपयोग करने की कोशिश करता है, जहां संदर्भ खो गया है।

document.getElementById('myAJAXButton').onclick = function(){
    makeAJAXRequest(function(result){
      if (result) { // success
        this.className = 'success';
      }
    })
}

यहां संदर्भ ( this ) आंतरिक कॉलबैक फ़ंक्शन में खो जाता है। इसे ठीक करने के लिए, आप के मान को बचा सकता है this एक चर में:

document.getElementById('myAJAXButton').onclick = function(){
    var self = this;
    makeAJAXRequest(function(result){
      if (result) { // success
        self.className = 'success';
      }
    })
}

document.getElementById('myAJAXButton').onclick = function(){
    makeAJAXRequest(result => {
      if (result) { // success
        this.className = 'success';
      }
    })
}

बंधन समारोह संदर्भ

var monitor = {
  threshold: 5,
  check: function(value) {
    if (value > this.threshold) {
      this.display("Value is too high!");
    }
  },
  display(message) {
    alert(message);
  }
};

monitor.check(7); // The value of `this` is implied by the method call syntax.


var badCheck = monitor.check;
badCheck(15); // The value of `this` is window object and this.threshold is undefined, so value > this.threshold is false

var check = monitor.check.bind(monitor);
check(15); // This value of `this` was explicitly bound, the function works.

var check8 = monitor.check.bind(monitor, 8);
check8(); // We also bound the argument to `8` here. It can't be re-specified.

कठिन बंधन

• बंधन मुश्किल का उद्देश्य "हार्ड" लिंक करने के लिए के लिए एक संदर्भ है this ।
• लाभ: यह तब उपयोगी होता है जब आप विशेष वस्तुओं को खो जाने से बचाना चाहते हैं।
• उदाहरण:

function Person(){
    console.log("I'm " + this.name);
}

var person0 = {name: "Stackoverflow"}
var person1 = {name: "John"};
var person2 = {name: "Doe"};
var person3 = {name: "Ala Eddine JEBALI"};

var origin = Person;
Person = function(){
    origin.call(person0);
}

Person();
//outputs: I'm Stackoverflow

Person.call(person1);
//outputs: I'm Stackoverflow


Person.apply(person2);
//outputs: I'm Stackoverflow


Person.call(person3);
//outputs: I'm Stackoverflow

• इसलिए, जैसा कि आप ऊपर दिए गए उदाहरण में टिप्पणी कर सकते हैं, आप जो भी वस्तु व्यक्ति के पास जाते हैं, वह हमेशा person0 ऑब्जेक्ट का उपयोग करेगा : यह कठिन बाइंड है ।

निर्माण कार्यों में यह

एक के रूप में एक समारोह का उपयोग करते समय निर्माता , यह एक विशेष है this बंधन है, जो नव निर्मित वस्तु को संदर्भित करता है:

function Cat(name) {
  this.name = name;
  this.sound = "Meow";
}

var cat = new Cat("Tom"); // is a Cat object
cat.sound; // Returns "Meow"

var cat2 = Cat("Tom"); // is undefined -- function got executed in global context
window.name; // "Tom"
cat2.name; // error! cannot access property of undefined