JavaScript
Context (deze)

dit met eenvoudige objecten

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"

In de bovenstaande code maakt person.bio gebruik van de context ( this ). Wanneer de functie person.bio() , wordt de context automatisch doorgegeven en logt het dus correct "Mijn naam is John Doe". Wanneer de functie echter aan een variabele wordt toegewezen, verliest deze zijn context.

In de niet-strikte modus is de standaardcontext het globale object ( window ). In de strikte modus is het niet undefined .

Dit opslaan voor gebruik in geneste functies / objecten

Een veel voorkomende valkuil is om te proberen this in een geneste functie of een object, waarbij de context verloren is gegaan.

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

Hier gaat de context ( this ) verloren in de innerlijke callback-functie. Om dit te corrigeren, kunt u de waarde this opslaan in een variabele:

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

Bindende functie context

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.

Moeilijk bindend

• Het doel van hard binding is "hard" koppeling een verwijzing naar this .
• Voordeel: handig als u bepaalde objecten wilt beschermen tegen verlies.
• Voorbeeld:

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

• Dus, zoals je in het bovenstaande voorbeeld kunt opmerken, welk object je ook aan Person doorgeeft, het zal altijd person0 object gebruiken : het is moeilijk gebonden .

dit in constructorfuncties

Bij gebruik van een functie als een constructor , heeft een bijzonder this binding die verwijst naar de nieuw gevormde zaak:

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