`this` en JavaScript expliqué

Il s'agit de la question n°5 de la série de questions d'entretien Frontend. Si vous souhaitez améliorer votre préparation ou rester à jour en général, pensez à vous inscrire au Frontend Camp.

---

Le mot-clé this fait toujours référence au contexte actuel d'une fonction ou d'un script.

c'est un sujet déroutant pour la plupart d'entre nous (jeu de mots), mais ce n'est pas obligatoire. Tout ce que vous avez à faire est de vous rappeler quelques règles.

Les règles suivantes, par ordre de priorité, dictent la manière dont la valeur de ceci est déterminée pendant l'exécution :

Utilisation dans un constructeur de fonction

Si une fonction est appelée avec le mot-clé new, cela à l'intérieur de la fonction fait référence à l'instance d'objet nouvellement créée.

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

Lier explicitement ceci

call(), apply() ou bind() peuvent être utilisés pour définir explicitement la valeur de this dans une fonction.

• call() et apply() sont utilisés lorsqu'une fonction doit être invoquée immédiatement.
• bind() renvoie une nouvelle fonction à utiliser plus tard.

const obj = { name: 'Ben' };

function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

const sayHelloToBen = sayHello.bind(obj);

sayHelloToBen(); // Hello, Ben!
sayHello.call(obj); // Hello, Ben!
sayHello.apply(obj); // Hello, Ben!

Utilisation dans un appel de méthode

Si une fonction est une méthode d'un objet, alors cela fait référence à l'objet.

const person = {
  name: 'Ben',
  logThis: function() {
    console.log(this);
  }
}

person.logThis(); // { name: 'Ben', logThis: fn() }

Utilisation dans un appel de fonction régulier (invocation de fonction gratuite)

Si une fonction est invoquée dans le contexte global, alors cela fait référence à l'objet global (en mode non strict) ou indéfini (en mode strict).

Pour les navigateurs, l'objet global est window.

// Browser

function showThis() {
  console.log(this);
}

showThis(); // Window { open: fn, alert: fn, ... }

Lorsqu'une fonction est déclarée dans le contexte global, elle devient une propriété de l'objet window. L'appel de window.showThis() donnerait le même résultat. C'est pourquoi il s'agit d'un appel de méthode implicite. (Référez-vous à la règle au dessus de celle-ci)

Si plusieurs règles s'appliquent, alors la règle ayant la priorité la plus élevée s'appliquera.

const obj1 = {
    value: 1,
    showThis: function() {
        console.log(this);
    },
};

const obj2 = { value: 2 };

obj1.showThis.call(obj2); // { value: 2 }

Dans l'exemple ci-dessus, deux règles sont appliquées : l'invocation de méthode et la liaison explicite. Comme la liaison explicite a une priorité plus élevée, elle peut en définir la valeur.

Fonctions fléchées

Les fonctions fléchées ne suivent pas les règles énoncées ci-dessus car elles n'ont pas leur propre valeur this. Ils sélectionnent cette valeur dans le portée parent.

const person = {
  name: 'Ben',
  showThis: () => {
    console.log(this);
  },
  showThisWrapped: function() {
    const arrowFn = () => console.log(this);
    arrowFn();
  }
}

person.showThis(); // Window { open: fn, alert: fn, ... }
person.showThisWrapped(); // { name: 'Ben', showThis: fn, showThisWrapped: fn }

C'est pourquoi vous devriez éviter d'utiliser les fonctions fléchées pour les auditeurs d'événements. Les écouteurs d'événements lient l'élément HTML à la valeur this mais si le gestionnaire est une fonction fléchée, ce n'est pas possible.

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

---

Résumé

1. Dans un constructeur de fonction (new Person()), ce sera l'instance d'objet nouvellement créée.
2. S'il est explicitement lié à l'aide de bind(), call() ou apply(), ceci à l'intérieur de la fonction sera défini sur la valeur fournie.
3. Dans une méthode, ceci est défini sur l'objet dont la méthode est une propriété.
4. Dans une invocation de fonction libre, cela pointe vers un objet global (mode non strict) ou undéfini (mode strict).
5. Si plusieurs règles s'appliquent, la règle indiquée en premier (1-4) s'appliquera.
6. Les fonctions fléchées n'ont pas leur propre ceci. Sa valeur est sélectionnée dans la portée parent.

---

Vous aimez ce que vous venez de lire ? Pensez à rejoindre la liste d'attente sur Frontend Camp ✌️

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!