Ciao ,

In questo articolo cercheremo di spiegare i diversi possibili valori della thisparola chiave a seconda del contesto in cui viene utilizzata in JavaScript.

Ambito globale

Nell'ambito globale, thisfa riferimento all'oggetto globale ( windowsul Web e globalin Node.js).

globalThispotrebbe anche essere utilizzato come un modo indipendente dalla piattaforma per raggiungere l'oggetto globale.

// global scope (web)

console.log(this === window); // true
console.log(this === globalThis); // true

All'interno di una funzione non freccia, il valore di thisdipenderà da come viene chiamata la funzione.

Chiamato come funzione autonoma

• In modalità non rigorosa , fa riferimento all'oggetto globale: this

function getThis() {
  return this;
}

console.log(getThis() === globalThis); // true

"use strict"

function getThis() {
  return this;
}

console.log(getThis() === undefined); // true

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(bar.getThis() === bar); // true

const baz = {};
baz.getThis = bar.getThis;

console.log(baz.getThis() === baz); // true

// Called as a standalone function
const getThis = bar.getThis;
console.log(getThis() === globalThis); // true (`false` in strict mode)

I metodi di classe si comportano allo stesso modo dei metodi nei valori letterali oggetto.

Funzioni freccia

All'interno di una funzione freccia, il valore di this è uguale a quello del contesto lessicale che lo racchiude .

In altre parole, quando si valuta una funzione arrow, il motore JS non crea un nuovo thisbinding ma utilizza quello disponibile nell'ambito circostante :

// (1) `this` equals to `globalThis` here

const foo = {
  getThis: () => this
};

console.log(foo.getThis() === foo); // false
console.log(foo.getThis() === globalThis); // true (1)
// (1) `this` equals to `globalThis` here

const bar = {
  getArrowFn: function() {
    // (2) `this` equals to `bar` or `baz` here 
    // depending on how the function is called below
    
    return () => this;
  }
};

console.log(bar.getArrowFn()() === bar); // true (2)
console.log(bar.getArrowFn()() === globalThis); // false (1)

const baz = {};
baz.getArrowFn = bar.getArrowFn;

console.log(baz.getArrowFn()() === baz); // true (2)
console.log(baz.getArrowFn()() === globalThis); // false (1)

Costruttori di funzioni

All'interno di una funzione utilizzata come costruttore (con la newparola chiave), thisè associato al nuovo oggetto che viene costruito, indipendentemente da come si accede alla funzione su:

function Bar() {
  this.baz = 42;
}

let a = new Bar();
console.log(a.baz); // 42
const bar = {
  baz: function() {
    this.foo = 42;
  }
};

let a = new bar.baz();
console.log(a.foo); // 42
console.log(bar.foo); // undefined

function Bar() {
  this.baz = 42;
  return { baz: 44 };
}

let a = new Bar();
console.log(a.baz); // 44 (not 42)

applica(), chiama()

I metodi call()e apply()potrebbero essere usati per impostare esplicitamente il valore di this nelle funzioni non freccia:

function getThis() {
  return this;
}

const bar = {
  getThis: function() {
    return this;
  }
};

console.log(getThis() === globalThis); // true
console.log(bar.getThis() === bar); // true

const myThis = {};

console.log(getThis.call(myThis) === myThis); // true
console.log(getThis.apply(myThis) === myThis); // true

console.log(bar.getThis.call(myThis) === myThis); // true
console.log(bar.getThis.apply(myThis) === myThis); // true

Quando viene utilizzato su una funzione freccia, il thisparametro viene ignorato (è comunque possibile passare gli argomenti della funzione utilizzando questi metodi):

// (1) `this` equals to `globalThis` here

const getThis = () => this;

console.log(getThis() === globalThis); // true

const myThis = {};

console.log(getThis.call(myThis) === globalThis); // true
console.log(getThis.apply(myThis) === globalThis); // true

La bind()funzione viene utilizzata per creare una nuova funzione associata a un determinato oggetto.

Ciò significa che quando viene chiamata la nuova funzione, la thisparola chiave farà riferimento all'oggetto a cui è associata:

function getThis() {
  return this;
}

console.log(getThis() === globalThis); // true

const myThis = {};
const getMyThis = getThis.bind(myThis);

console.log(getMyThis() === myThis); // true
console.log(getMyThis.call(globalThis) === myThis); // true
console.log(getMyThis.apply(globalThis) === myThis); // true

Quando viene utilizzato su una funzione freccia, il thisparametro viene ignorato (è comunque possibile passare gli argomenti della funzione utilizzando questi metodi):

// (1) `this` equals to `globalThis` here

const getThis = () => this;

console.log(getThis() === globalThis); // true

const myThis = {};
const getMyThis = getThis.bind(myThis);

console.log(getMyThis() === globalThis); // true
console.log(getMyThis.call(myThis) === globalThis); // true
console.log(getMyThis.apply(myThis) === globalThis); // true