En quoi le mot clé « this » diffère-t-il entre les fonctions fléchées et les fonctions régulières en JavaScript ?

Fonctions fléchées et "This" sans contexte

Dans ES6, les fonctions fléchées fournissent une syntaxe concise pour la déclaration de fonction. Cependant, une différence clé entre les fonctions fléchées et les fonctions traditionnelles est leur gestion du mot-clé "this".

Lorsque vous utilisez une fonction fléchée à l'intérieur d'un objet comme indiqué dans le code donné :

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

Le mot-clé "this" dans la fonction flèche ne fait pas référence à l'objet "personne". Au lieu de cela, il pointe vers la portée dans laquelle la fonction fléchée a été créée, qui dans ce cas est la portée globale. Par conséquent, lors de l'appel de "person.shout()", il enregistre "mon nom est" sans la propriété "jason".

Pour résoudre ce problème, vous pouvez utiliser la syntaxe de fonction normale au lieu d'une fonction fléchée :

var person = {
  name: "jason",

  shout: function() {
    console.log("my name is ", this.name)
  }
}

Dans les fonctions régulières, « ceci » fait référence à l'objet qui possède la fonction. Par conséquent, il affichera correctement « je m'appelle Jason » lorsqu'il est appelé.

Vous pouvez également profiter de la syntaxe de déclaration de la méthode ES6, qui est similaire à la syntaxe de la fonction fléchée :

var person = {
  name: "jason",

  shout() {
    console.log("my name is ", this.name)
  }
}

Avec cette syntaxe, la déclaration de fonction omet les deux points (:) et le mot-clé "function". Cependant, il utilise toujours la syntaxe habituelle de déclaration de fonction, garantissant que "this" est lié à l'objet.

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!