JavaScript
Contexto (este)

esto con objetos simples

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"

En el código anterior, person.bio hace uso del contexto ( this ). Cuando se llama a la función como person.bio() , el contexto se pasa automáticamente y, por lo tanto, registra correctamente "Mi nombre es John Doe". Sin embargo, al asignar la función a una variable, pierde su contexto.

En modo no estricto, el contexto predeterminado es el objeto global ( window ). En modo estricto está undefined .

Guardando esto para usar en funciones / objetos anidados

Un error común es tratar de usar this en una función anidada o en un objeto, donde el contexto se ha perdido.

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

Aquí el contexto ( this ) se pierde en la función de devolución de llamada interna. Para corregir esto, puedes guardar el valor de this en una variable:

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

Contexto de la función de unión

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.

Unión dura

• El objeto del enlace duro es vincular "duro" una referencia a this .
• Ventaja: es útil cuando desea proteger objetos particulares para que no se pierdan.
• Ejemplo:

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

• Entonces, como puede observar en el ejemplo anterior, cualquiera que sea el objeto que pase a Person , siempre utilizará el objeto person0 : está enlazado .

Esto en funciones constructoras.

Cuando se utiliza una función como un constructor , tiene una especial this unión, que se refiere al objeto recién creado:

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