Capire la parola chiave 'this' in JavaScript

'questo' in JavaScript

In JavaScript è più complicato perché dove questo dipende non solo da come viene definita la funzione, ma anche dalla forma in cui viene chiamata.

Guardate come questo funziona a seconda del luogo e della forma di invocazione.

Contesto globale

Utilizzato in un contesto globale legato all'oggetto globale, come finestra in un browser web.

questo; // finestra

Metodo interno all'oggetto

Utilizzato all'interno di un metodo oggetto legato all'oggetto più vicino. L'oggetto è il nuovo contesto del metodo questo parola chiave. Si noti che non si deve modificare funzione () alla sintassi ES6 fun: () => this.context perché cambierebbe il contesto.

const obj = {
  contesto: "oggetto",
  fun: function() {
    return this.context;
  }
};

obj.fun(); // oggetto

In questo esempio con un oggetto annidato, questo si riferisce ancora al suo contesto più prossimo.

const nestedObj = {
  contesto: "genitore",
  figlio: {
    contesto: "bambino",
    fun: function() {
      return this.context;
    }
  }
};

nestedObj.child.fun(); // bambino

Funzione senza contesto

Utilizzato all'interno di una funzione che non ha un contesto (non ha un oggetto come genitore) legato al contesto globale, anche se la funzione è definita all'interno dell'oggetto.

Si noti che si utilizza var contesto invece di contesto let/const perché lasciare che e costitutivo modificare il contesto della variabile racchiusa. var è sempre il più vicino al contesto di esecuzione globale. lasciare che e costitutivo dichiarare le variabili solo in un ambito di blocco locale.

var context = "global";

const obj = {
  contesto: "object",
  funA: function() {
    funzione funB() {
      const context = "function";
      return this.context;
    }
    return funB(); // invocata senza contesto
  }
};

obj.funA(); // globale

All'interno della funzione costruttore

Utilizzato all'interno di una funzione che è il costruttore del nuovo oggetto ad essa legato.

var context = "global";

funzione Obj() {
  this.context = "Obj context";
}

const obj = new Obj();
obj.context; // Contesto dell'oggetto

Funzione interna definita nella catena di prototipi

Utilizzato all'interno di una funzione definita nella catena dei prototipi per creare un oggetto ad essa legato.

const ProtoObj = {
  fun: function() {
    return this.name;
  }
};

const obj = Object.create(ProtoObj);
obj.name = "pippo";
obj.fun(); // pippo

All'interno chiamare() e le funzioni apply()

chiamare() e applicare() sono JavaScript funzioni. Con queste, un oggetto può utilizzare metodi appartenenti a un altro oggetto. chiamare() prende argomenti separatamente dove applicare() li prende come array.

questo è qui legato al nuovo contesto modificato in chiamare() e applicare() metodi.

const objA = {
  contesto: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  contesto: "objB"
};

objA.fun(1, 2); // objA, [1, 2]
objA.fun.call(objB, 1, 2, 3); // objB, [1, 2, 3]
objA.fun.apply(objB, [1, 2, 3, 4]); // objB, [1, 2, 3, 4]

All'interno della funzione bind()

bind() è anch'esso un metodo JavaScript. Crea una nuova funzione che avrà questo impostato sul primo parametro passato a bind()**.**

const objA = {
  contesto: "objA",
  fun: function() {
    console.log(this.context, arguments);
  }
};

const objB = {
  contesto: "objB"
};

const fun = objA.fun.bind(objB, 1, 2);
fun(3, 4); // objB, [1, 2, 3, 4]

All'interno dei gestori di eventi

Utilizzato in qualsiasi gestore di eventi (ad esempio, addeventListener, onclick, attachEvent), è legato all'elemento DOM a cui l'evento era collegato.

document.querySelector(".foo").addEventListener("click", function() {
  this; // si riferisce all'elemento div `foo
});

Funzione freccia ES6

Utilizzato all'interno della funzione freccia, è sempre legato al suo ambito lessicale. Nella funzione freccia, non è possibile riassegnare l'elemento questo in qualsiasi modo.

const globalArrowFunction = () => this;

globalArrowFunction(); // Finestra

const obj = {
  contesto: "oggetto",
  funA: () => this,
  funB: function() {
    return () => {
      restituisce this.context;
    };
  }
};

obj.funA(); // Finestra
obj.funB()(); // oggetto

Per saperne di più:

• Le maggiori sfide dello sviluppo di software personalizzato
• Quali sono le differenze tra una software house e un'agenzia di personale IT?