JavaScript
Kontext (dies)

dies mit einfachen Objekten

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"

Im obigen Code verwendet person.bio den Kontext ( this ). Wenn die Funktion als person.bio() aufgerufen wird, wird der Kontext automatisch übergeben und protokolliert "Mein Name ist John Doe". Wenn Sie die Funktion jedoch einer Variablen zuweisen, verliert sie ihren Kontext.

Im nicht strengen Modus ist der Standardkontext das globale Objekt ( window ). Im strikten Modus ist es undefined .

Speichern für die Verwendung in verschachtelten Funktionen / Objekten

Eine häufige Gefahr besteht darin, this in einer verschachtelten Funktion oder einem Objekt zu versuchen, bei dem der Kontext verloren gegangen ist.

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

Hier geht der Kontext ( this ) in der inneren Callback-Funktion verloren. Um dies zu korrigieren, können Sie den Wert speichern this in einer Variablen:

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';
      }
    })
}

Bindungsfunktionskontext

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.

Hardbindung

• Die Aufgabe der harten Bindung ist „hart“ auf eine Referenz verbinden this .
• Vorteil: Dies ist nützlich, wenn Sie bestimmte Objekte vor dem Verlust schützen möchten.
• Beispiel:

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

• Wie Sie im obigen Beispiel feststellen können, wird das Objekt, das Sie an Person weitergeben , immer das Objekt person0 verwenden : es ist fest gebunden .

dies in Konstruktorfunktionen

Wenn Sie eine Funktion als Konstruktor verwenden , hat this spezielle Bindung, die auf das neu erstellte Objekt verweist:

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