5 façons de gérer correctement le pointeur this de JS

J'aime changer le pointeur du contexte d'exécution de la fonction en JS, également connu sous le nom de ce pointeur.

Par exemple, nous pouvons utiliser des méthodes de tableau sur des objets de type tableau :

const reduce = Array.prototype.reduce;

function sumArgs() {
  return reduce.call(arguments, (sum, value) => {
    return sum += value;
  });
}

sumArgs(1, 2, 3); // => 6

Par contre, c'est difficile à comprendre.

Nous constatons souvent que nous utilisons cela pour pointer de manière incorrecte. Ce qui suit vous apprend comment simplement lier cela à la valeur souhaitée.

[Recommandations de cours associées : Tutoriel vidéo JavaScript]

Avant de commencer, j'ai besoin d'une fonction d'assistance execute(func) qui exécute uniquement la fonction fournie en paramètre.

function execute(func) {
  return func();
}

execute(function() { return 10 }); // => 10

Maintenant, passons à la compréhension de la nature de l'erreur entourant ceci : la séparation des méthodes.

1. Problème de séparation des méthodes

Supposons qu'il existe une classe Person contenant les champs firstName et lastName. De plus, il dispose d'une méthode getFullName() qui renvoie le nom complet de la personne. Comme indiqué ci-dessous :

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = function() {
    this === agent; // => true
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');
agent.getFullName(); // => '前端 小智'

Vous pouvez voir que la fonction Person est appelée en tant que constructeur : new Person('front end', 'Xiao Zhi'). Ceci à l'intérieur de la fonction représente l'instance nouvellement créée.

getfullname() renvoie le nom complet de la personne : « front-end Xiaozhi ». Comme prévu, ceci dans la méthode getFullName() est égal à agent.

Que se passera-t-il si la fonction auxiliaire exécute la méthode agent.getFullName :

execute(agent.getFullName); // => 'undefined undefined'

Le résultat de l'exécution est incorrect : 'undéfini undéfini', ce qui est un problème causé par un pointage incorrect.

Maintenant, dans la méthode getFullName(), la valeur de this est l'objet global (fenêtre dans l'environnement du navigateur). Ceci est égal à window et le résultat de l'exécution de ${window.firstName} ${window.lastName} est « indéfini, non défini ».

Cela se produit car la méthode est détachée de l'objet lorsque execute(agent.getFullName) est appelé. En gros, ce qui se passe est juste un appel de fonction normal (pas un appel de méthode) :

execute(agent.getFullName); // => 'undefined undefined'

// 等价于:

const getFullNameSeparated = agent.getFullName;
execute(getFullNameSeparated); // => 'undefined undefined'

C'est ce qu'on appelle une méthode qui se détache de son objet, lorsqu'une méthode est détachée puis exécutée, cela n'a aucun lien avec l'objet d'origine.

1. Afin de garantir que cela à l'intérieur de la méthode pointe vers le bon objet, cela doit être fait

2 Exécutez la méthode sous la forme d'un accesseur de propriété : agent.getFullName(. ) ou liez-le de manière statique. Le problème de séparation des méthodes

des objets inclus (en utilisant des fonctions fléchées, des méthodes .bind(), etc.), et le pointage incorrect qui en résulte, se produit généralement dans les situations suivantes :

Rappels

// `methodHandler()`中的`this`是全局对象
setTimeout(object.handlerMethod, 1000);

Lors de la configuration des gestionnaires d'événements

// React: `methodHandler()`中的`this`是全局对象
<button onClick={object.handlerMethod}>
  Click me
</button>

Puis continue en introduisant quelques méthodes utiles, c'est-à-dire si la méthode est détachée de l'objet, comment faire ce point vers l'objet souhaité.

2. Fermez le contexte

Le moyen le plus simple de garder cela pointant vers l'instance de classe est d'utiliser une variable supplémentaire self :

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  const self = this;
  this.getFullName = function() {
    self === agent; // => true
    return `${self.firstName} ${self.lastName}`;
  }
}
const agent = new Person('前端', '小智');
agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

getFullName() ferme statiquement la variable self, la liant efficacement manuellement.

Maintenant, lors de l'appel d'execute(agent.getFullName), tout fonctionne bien car cela à l'intérieur de la méthode getFullName() pointe toujours vers la valeur correcte.

3. Utilisation des fonctions fléchées

Existe-t-il un moyen de lier cela de manière statique sans variables supplémentaires ? Oui, c'est exactement ce que font les fonctions fléchées.

Utilisez les fonctions fléchées pour reconstruire Person :

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = () => `${this.firstName} ${this.lastName}`;
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

Les fonctions fléchées lient cela lexicalement. En termes simples, il utilise la valeur de la fonction externe là où elle est définie.

Il est recommandé d'utiliser les fonctions fléchées dans tous les cas où un contexte de fonction externe est requis.

4. Contexte de liaison

Allons maintenant plus loin et reconstruisons Person using classes dans ES6.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => 'undefined undefined'

Malheureusement, même avec la nouvelle syntaxe de classe, exécuté(agent.getFullName) renvoie toujours "undéfini undéfini".

Dans le cas des classes, utiliser une variable supplémentaire self ou une fonction flèche pour corriger ce vers quoi cela pointe ne fonctionne pas.

Mais il existe une astuce impliquant la méthode bind(), qui lie le contexte de la méthode au constructeur :

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

    this.getFullName = this.getFullName.bind(this);
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

this.getFullName dans le constructeur = this.getFullName.bind( this ) lie la méthode getFullName() à l'instance de classe.

execute(agent.getFullName) fonctionne comme prévu, renvoyant « frontend Xiaozhi ».

5. La méthode de la grosse flèche

la méthode de liaison est un peu trop verbeuse, on peut utiliser la méthode de la grosse flèche :

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName = () => {
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

La méthode grosse flèche getFullName =() =>{…} est liée à l'instance de classe, même si la méthode est détachée de son objet.

Cette méthode est le moyen le plus efficace et le plus concis de lier cela dans une classe.

6. Résumé

Les méthodes séparées des objets entraîneront le problème d'un pointage incorrect. Pour lier cela de manière statique, vous pouvez utiliser manuellement une variable supplémentaire self pour contenir l'objet contextuel correct. Cependant, une meilleure alternative consiste à utiliser des fonctions fléchées, qui servent essentiellement à lier lexicalement cela.

Dans une classe, vous pouvez utiliser la méthode bind() pour lier manuellement la méthode de classe dans le constructeur. Bien sûr, si vous n'avez pas besoin d'utiliser la longue méthode de liaison, vous pouvez également utiliser la méthode de représentation concise et pratique de la grosse flèche.

Texte original : https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter5.md

Cet article provient de js tutoriel Chronique, bienvenue pour apprendre !

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!