Plusieurs façons de gérer le pointeur « this » dans JS

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

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, this est difficile à comprendre.

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

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

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

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

Maintenant, passons à la compréhension de la nature de l'erreur entourant this : 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('前端', '小智'). Le this à l'intérieur de la fonction représente l'instance nouvellement créée.

getfullname()Renvoie le nom complet de la personne : '前端 小智'. Comme prévu, getFullName() à l'intérieur de la méthode this est égal à agent.

Que se passe-t-il si la fonction d'assistance exécute la méthode agent.getFullName :

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

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

Maintenant dans la méthode getFullName(), la valeur de this est l'objet global (window dans l'environnement du navigateur). this est égal à window, et le résultat de l'exécution de ${window.firstName} ${window.lastName} est 'undefined undefined'.

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 détacher la méthode de son objet, lorsque la méthode est détachée puis exécutée, this n'a rien à voir faire avec l'objet d'origine, connecter.

Afin de vous assurer que le this à l'intérieur de la méthode pointe vers le bon objet, vous devez faire ceci

1. Exécuter la méthode en tant qu'accesseur de propriété : agent.getFullName()

2. Ou lier statiquement this à l'objet contenu (à l'aide de fonctions fléchées, de méthodes .bind(), etc.)
   

problème de séparation de méthode, et le this pointage résultant est incorrect, généralement apparaît dans les situations suivantes :

Callback

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

Lors de la définition du gestionnaire d'événements

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

Ensuite, nous introduisons quelques méthodes utiles , à savoir comment faire pointer this vers l'objet souhaité si la méthode est séparée de l'objet.

2. Fermez le contexte

Le moyen le plus simple de garder this 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, liant efficacement this manuellement.

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

3. Utiliser les fonctions fléchées

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

RefactoringPerson à l'aide de fonctions fléchées :

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 sont liées lexicalement à this. En termes simples, il utilise la valeur de la fonction externe this 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 utilisons le refactoring de classe dans ES6 Person.

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, execute(agent.getFullName) renvoie toujours “undefined undefined”.

Dans le cas d'une classe, utiliser une variable supplémentaire self ou une fonction flèche pour fixer le pointage de this ne fonctionnera pas.

Mais il existe une astuce impliquant une 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 = this.getFullName.bind(this) dans le constructeur lie la méthode getFullName() à l'instance de classe .

execute(agent.getFullName) fonctionne comme prévu et revient '前端 小智'.

5. Méthode de la flèche grasse

bind La méthode est un peu trop longue, on peut utiliser la méthode de la flèche grasse :

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); // => '前端 小智'

胖箭头方法getFullName =() =>{…}绑定到类实例，即使将方法与其对象分离。

这种方法是在类中绑定this的最有效和最简洁的方法。

6. 总结

与对象分离的方法会产生 this 指向不正确问题。静态地绑定this，可以手动使用一个附加变量self来保存正确的上下文对象。然而，更好的替代方法是使用箭头函数，其本质上是为了在词法上绑定this。

在类中，可以使用bind()方法手动绑定构造函数中的类方法。当然如果你不用使用 bind 这种冗长方式，也可以使用简洁方便的胖箭头表示方法。

更多JavaScript知识请关注PHP中文网JavaScript视频教程栏目

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!