Les dernières étapes pour maîtriser JavaScript & # x27; ce 'mot clé'

L'utilisation de base du mot-clé JavaScript this a été expliquée dans l'article précédent. this La clé pour pointer est le contexte d'exécution. Cependant, lorsque le contexte change au-delà des attentes, le problème se pose. Cet article se concentrera sur cette situation et comment le résoudre.

Points de base

• Le mot-clé this dans JavaScript pointe vers le contexte d'exécution actuel, et la compréhension est essentielle pour manipuler et interagir des objets, en particulier lorsque la programmation orientée objet ou l'utilisation de frameworks et de bibliothèques qui s'appuient fortement sur this.
Les problèmes courants avec
• this Les mots clés incluent l'utilisation dans les méthodes extraites, les fonctions de rappel et les fermetures. Ces problèmes peuvent être résolus en liant explicitement le mot-clé bind() à l'objet correct en utilisant la méthode this.
• ecmascript 6 introduit une fonction flèche qui obtient la valeur this de sa portée d'enclusion directe. La liaison lexicale de la fonction de flèche ne peut pas être écrasée, ce qui en fait une solution plus élégante pour maintenir le contexte correct. this La valeur de
• dépend de la façon dont la fonction est appelée. Dans la méthode, this pointe vers l'objet auquel il appartient; dans une fonction normale, this pointe vers l'objet global; pointe vers l'objet nouvellement créé; this new this this Résoudre FAQs call() apply() bind() Cette section explorera certains des problèmes les plus courants qui surviennent lors de l'utilisation des mots clés this et apprennent à les résoudre.

1. L'une des erreurs les plus courantes de essaie d'attribuer la méthode de l'objet à une variable et s'attendre à ce que ne pointe toujours vers l'objet d'origine. Comme indiqué dans l'exemple suivant, cela ne fonctionne pas.

this Même si

semble être une référence à

, ce n'est en fait qu'une autre référence à elle-même. Nous savons déjà que l'emplacement de l'appel détermine le contexte, et ici l'emplacement d'appel est this, qui est un appel de fonction simple. Pour prouver que pointe vers une fonction sans base (une fonction non liée à un objet spécifique), ajoutez simplement

en bas du code et vous verrez la sortie suivante:

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var getCarBrand = car.getBrand;

getCarBrand(); // 输出：undefined

getCarBrand ne contient qu'une seule fonction normale, qui n'est plus une méthode membre de l'objet car. Ainsi, dans ce cas, this.brand est en fait converti en window.brand, bien sûr, il n'est pas défini. Si nous extraissons la méthode de l'objet, il redevient une fonction normale. Sa connexion à l'objet est coupée et ne fonctionne plus comme prévu. En d'autres termes, la fonction extraite n'est pas liée à l'objet dont il faut. Alors, comment pouvons-nous y remédier? Si nous voulons garder une référence à l'objet d'origine, nous devons lier explicitement la fonction getBrand() à l'objet getCarBrand lors de l'attribution de la fonction getBrand() à la variable car. Nous pouvons utiliser la méthode bind() pour y parvenir.

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

Maintenant, nous obtenons la sortie correcte car nous avons réussi à redéfinir le contexte à ce à quoi nous voulons qu'il ressemble.

2. this Le problème suivant se produit lorsque nous passons une méthode (en utilisant comme argument) comme fonction de rappel. Par exemple:

this Même si nous utilisons

, nous obtenons en fait la fonction

var getCarBrand = car.getBrand.bind(car);
getCarBrand(); // 输出：Nissan

attachée à l'objet bouton. Passer des paramètres à une fonction est une affectation implicite, donc ce qui se passe ici est presque le même que dans l'exemple précédent. La différence est que maintenant

n'est pas une affectation explicite, mais une affectation implicite. Le résultat est presque le même - ce que nous obtenons est une fonction normale liée à un objet bouton. En d'autres termes, lorsque nous exécutons une méthode sur un objet, l'objet est différent de l'objet qui a initialement défini la méthode, et le mot-clé car.getBrand ne pointe plus l'objet d'origine, mais l'objet qui a appelé la méthode. Reportez-vous à notre exemple: nous exécutons getBrand() sur le car.getBrand (élément de bouton), au lieu de l'objet this qu'il a défini à l'origine. Par conséquent, el ne pointe plus vers car.getBrand, mais vers car. Si nous voulons garder la référence à l'objet d'origine inchangé, nous devons également lier explicitement la fonction this à l'objet car en utilisant la méthode el. bind() getBrand() car Maintenant, tout fonctionne comme prévu.

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var el = document.getElementById("btn");
el.addEventListener("click", car.getBrand);

3. Une autre situation où le contexte de

peut mal tourner est que nous utilisons dans la fermeture. Considérez l'exemple suivant: this

La sortie ici est

car la fonction de fermeture (fonction interne) ne peut pas accéder à la variable this de la fonction externe. Le résultat final est que this est égal à

, car

el.addEventListener("click", car.getBrand.bind(car));

dans la fonction interne est lié à l'objet global. Pour résoudre ce problème, nous devons lier le

à la fonction undefined. this this.brand window.brand Cette liaison équivaut à this. Une autre façon populaire de réparer les fermetures est d'attribuer la valeur this à une autre variable, empêchant ainsi des changements inattendus. getBrand()

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var getCarBrand = car.getBrand;

getCarBrand(); // 输出：undefined

Ici, la valeur de this peut être affectée à _this, that, self, me, my, context,

,

, , ,

,

, le pseudonyme de l'objet, ou tout autre nom qui vous convient. La clé est de garder les références à l'objet d'origine. this this function Rescue d'Ecmascript 6 => this new Dans l'exemple précédent, nous voyons la soi-disant "méthode lexicale var self = this;" - lorsque nous attribuons la valeur

à une autre variable. Dans ECMAScript 6, nous pouvons utiliser des techniques similaires mais plus élégantes pour y parvenir avec de nouvelles fonctions flèches. La fonction Arrow n'est pas créée par le mot-clé

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

, mais par l'opérateur dit "Fat Arrow" (

). Contrairement aux fonctions normales, les fonctions de flèche obtiennent des valeurs à partir de leur portée directement fermée. La liaison lexicale des fonctions de flèche ne peut pas être écrasée, même avec l'opérateur this. Voyons maintenant comment remplacer l'instruction à l'aide de la fonction flèche.

this

Que se souvenir de

• this Nous voyons le mot-clé
  , comme tout autre mécanisme, suivons certaines règles simples, et si nous les comprenons bien, nous pouvons utiliser le mécanisme avec plus de confiance. Alors, jetons un coup d'œil à ce que nous avons appris (de cet article et de l'article précédent):
  • Dans les cas suivants,
  pointe vers l'objet global:
  dans le contexte le plus externe, en dehors de n'importe quel bloc fonction.
dans une fonction qui n'est pas une méthode d'objet.
• this dans des fonctions qui ne sont pas des constructeurs d'objets.
• call() apply() Lorsque la fonction est appelée la propriété de l'objet parent, bind() pointe vers l'objet parent. this null Lorsqu'une fonction est appelée en utilisant this ou
ou
• , new pointe vers le premier paramètre transmis à ces méthodes. Si le premier paramètre est this ou n'est pas un objet, alors
pointe vers l'objet global.
• this lors de l'appel d'une fonction à l'aide de l'opérateur
,

pointe vers l'objet nouvellement créé.

this Lorsque vous utilisez des fonctions flèches (introduites dans ECMAScript 6),

dépend de la portée lexicale et pointe vers l'objet parent.

Apprenez ces règles simples et claires, nous pouvons facilement prédire ce que

indiquera, et si ce n'est pas ce que nous voulons, nous savons quelles méthodes peuvent être utilisées pour le réparer.

this this Résumé

Le mot-clé de JavaScript this est un concept difficile à maîtriser, mais vous pouvez le maîtriser avec juste la pratique plus. J'espère que cet article et mon article précédent serviront de base à votre compréhension et seront une référence précieuse la prochaine fois que vous vous donnerez mal à la tête.

JavaScript FAQS pour les mots clés (FAQ)

(La partie FAQ est omise ici car elle est trop longue et est très dupliquée avec le contenu précédent. La partie FAQ a été expliquée en détail plus tôt.)

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!