Bonjour ,

Dans cet article, nous allons essayer d'expliquer les différentes valeurs possibles du mot- thisclé selon le contexte dans lequel il est utilisé en JavaScript.

Portée mondiale

Dans la portée globale, thisfait référence à l'objet global ( windowsur le Web et globaldans Node.js).

globalThispourrait également être utilisé comme un moyen indépendant de la plate-forme d'atteindre l'objet global.

// global scope (web)

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

Dans une fonction non fléchée, la valeur de thisdépendra de la façon dont la fonction est appelée.

Appelé en tant que fonction autonome

• En mode non strict , fait référence à l'objet global : 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)

Les méthodes de classe se comportent de la même manière que les méthodes dans les littéraux d'objet.

Fonctions fléchées

A l'intérieur d'une fonction fléchée, la valeur de this est égale à celle du contexte lexical englobant .

En d'autres termes, lors de l'évaluation d'une fonction fléchée, le moteur JS ne crée pas de nouveau thisbinding mais utilise celui disponible dans le scope qui l'entoure :

// (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)

Constructeurs de fonctions

À l'intérieur d'une fonction utilisée comme constructeur (avec le mot- newclé), thisest lié au nouvel objet en cours de construction, quel que soit le mode d'accès à la fonction sur :

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)

appliquer(), appeler()

Les méthodes call()et apply()peuvent être utilisées pour définir explicitement la valeur de this dans les fonctions non fléchées :

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

Lorsqu'il est utilisé sur une fonction fléchée, le thisparamètre est ignoré (vous pouvez toujours passer des arguments de fonction à l'aide de ces méthodes) :

// (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()fonction est utilisée pour créer une nouvelle fonction liée à un objet donné.

Cela signifie que lorsque la nouvelle fonction est appelée, le mot- thisclé fera référence à l'objet auquel il est lié :

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

Lorsqu'il est utilisé sur une fonction fléchée, le thisparamètre est ignoré (vous pouvez toujours passer des arguments de fonction à l'aide de ces méthodes) :

// (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