Les méthodes pour gérer correctement ce pointage dans les fermetures JavaScript comprennent: 1. Utilisez les fonctions de flèche, 2. Utilisez des méthodes de liaison, 3. Utilisez des variables pour enregistrer cela. Ces méthodes garantissent que cette fonction intrinsèque pointe correctement le contexte de la fonction externe.

introduction

Aujourd'hui, nous discuterons d'un problème qui est souvent gênant dans le développement de JavaScript: comment gérer correctement this pointage dans les fermetures. Je sais que de nombreux développeurs sont souvent confus lorsqu'ils sont confrontés à ce problème, mais ne vous inquiétez pas, je vous emmènerai pour résoudre ce mystère étape par étape. Grace à cet article, vous apprendrez à contr?ler de manière flexible this pointage dans les fermetures et à ma?triser certains conseils pratiques et meilleures pratiques.

Examen des connaissances de base

En JavaScript, this s'agit d'un mot-clé très spécial, et son pointage variera selon différents contextes. Lorsque nous parlons de fermetures, this problème de pointage devient particulièrement compliqué. Une fermeture est une fonction qui a la permission d'accéder aux variables dans une autre portée de fonction, généralement implémentée en définissant une autre fonction à l'intérieur de la fonction.

Avant de discuter this pointage, passons en revue le comportement de base de this :

• Dans un environnement global, this indique un objet global ( window dans le navigateur et global dans Node.js).
• Lorsque vous appelez une fonction, la this dépend de la méthode d'appel de la fonction, telle que l'appel direct, l'appel via la méthode de l'objet, l'appel à l'aide call ou apply la méthode, etc.

Après avoir compris ces bases, nous pouvons explorer plus en profondeur comment gérer correctement this dans les fermetures.

Analyse du concept de base ou de la fonction

this problème de pointe dans la fermeture

Dans les fermetures, le problème auquel this pointe est principalement d? au fait que this de la fonction intérieure n'est pas synchronisé avec this de la fonction extérieure. Regardons un exemple simple:

fonction outerFunction () {
    this.name = 'exter';
    fonction innerFunction () {
        console.log (this.name); // Qu'est-ce que cela indique ici?
    }
    innerfonction ();
}
<p>const obj = {
Nom: ?Objet?
};</p><p> OuterFunction.Call (OBJ); // Sortie: indéfinie</p>

Dans cet exemple, this dans innerFunction indique un objet global, pas this de outerFunction . En effet, en mode non strict, this dans la fonction interne pointe vers l'objet global par défaut.

Solution

Pour gérer correctement this pointeur dans une fermeture, nous pouvons utiliser les méthodes suivantes:

Utiliser les fonctions de flèche

Une caractéristique importante des fonctions Arrow est qu'elles ne this ont pas, mais this héritent de la portée extérieure. Cela rend la fonction de flèche très utile dans les fermetures:

fonction outerFunction () {
    this.name = 'exter';
    const InnerFunction = () => {
        console.log (this.name); // cela ici indique ceci de la fonction extérieure
    };
    innerfonction ();
}
<p>const obj = {
Nom: ?Objet?
};</p><p> OuterFunction.Call (OBJ); // Sortie: extérieur</p>

Utiliser la méthode bind

La méthode bind nous permet de créer une nouvelle fonction dont this fonction est liée à la valeur spécifiée:

fonction outerFunction () {
    this.name = 'exter';
    fonction innerFunction () {
        console.log (this.name);
    }
    innerfonction.bind (this) ();
}
<p>const obj = {
Nom: ?Objet?
};</p><p> OuterFunction.Call (OBJ); // Sortie: extérieur</p>

Enregistrer this avec des variables

Une autre méthode courante consiste à enregistrer this à partir d'une fonction externe dans une variable, puis à utiliser cette variable dans la fonction interne:

fonction outerFunction () {
    this.name = 'exter';
    const Self = this;
    fonction innerFunction () {
        console.log (self.name);
    }
    innerfonction ();
}
<p>const obj = {
Nom: ?Objet?
};</p><p> OuterFunction.Call (OBJ); // Sortie: extérieur</p>

Exemple d'utilisation

Utilisation de base

Examinons un exemple d'application pratique, supposons que nous voulons créer une classe de comptoir, où une méthode est utilisée dans la fermeture:

classe Counter {
    constructeur () {
        this.Count = 0;
    }
<pre class='brush:php;toolbar:false;'>incrément () {
    setTimeout (() => {
        this.Count;
        console.log (this.Count);
    }, 1000);
}

}

const Counter = new Counter (); Counter.increment (); // Sortie après 1 seconde: 1

Dans cet exemple, nous utilisons la fonction Arrow pour nous assurer que this pointe vers Counter .

Utilisation avancée

Dans des scénarios plus complexes, nous devrons peut-être changer dynamiquement la direction de this dans la fermeture. Par exemple, supposons que nous ayons un gestionnaire d'événements de clic de bouton et que nous voulons mettre à jour l'état d'un objet lorsque vous cliquez:

classe Buthandhandler {
    constructeur (bouton) {
        this.button = bouton;
        this.clicks = 0;
        this.button.addeventListener ('click', this.handleclick.bind (this));
    }
<pre class='brush:php;toolbar:false;'>handleclick () {
    this.clicks;
    console.log (`bouton cliquait $ {this.clicks} Times`);
}

}

const Button = document.getElementById (?MyButton?); const Handler = new Buttonhandler (bouton);

Dans cet exemple, nous utilisons la méthode bind pour nous assurer que this dans la méthode handleClick pointe vers ButtonHandler .

Erreurs courantes et conseils de débogage

Les erreurs courantes lorsqu'ils traitent de this pointeur dans les fermetures comprennent:

• J'ai oublié d'utiliser des fonctions fléchées ou des méthodes bind , ce qui fait pointer this point vers l'objet global.
• En mode strict, this dans la fonction interne ne sera undefined au lieu d'un objet global.

Conseils de débogage:

• Utilisez console.log(this) pour produire this valeur à différents endroits pour vous aider à comprendre le pointage de this .
• Utilisez le débogage des points d'arrêt dans les outils de développement pour suivre progressivement les changements dans this .

Optimisation des performances et meilleures pratiques

Il existe plusieurs meilleures pratiques à noter lorsqu'ils traitent de this pointeur dans les fermetures:

• Utilisez les fonctions Arrow : les fonctions Arrow peuvent non seulement résoudre this problème de pointage, mais aussi rendre le code plus concis.
• évitez la surutilisation de bind : Bien que la méthode bind fonctionne, la surutilisation augmente la consommation de mémoire, car une nouvelle fonction est créée à chaque appel.
• Gardez votre code lisible : lorsque vous utilisez des fermetures, assurez-vous que votre code est structuré et bien élaboré afin que d'autres développeurs puissent facilement comprendre vos intentions.

Comparaison des performances

Comparons les performances de différentes méthodes:

fonction TestArrowFunction () {
    const obj = {
        Nom: ?Test?
    };
    const func = () => {
        console.log (this.name);
    };
    pour (soit i = 0; i <1000000; i) {
        func.Call (obj);
    }
}
<p>fonction testBindMethod () {
const obj = {
Nom: ?Test?
};
fonction func () {
console.log (this.name);
}
const BoundFunc = func.Bind (obj);
pour (soit i = 0; i <1000000; i) {
BoundFunc ();
}
}</p><p> fonction testVaribleMethod () {
const obj = {
Nom: ?Test?
};
fonction func () {
const Self = this;
return function () {
console.log (self.name);
};
}
const innerfunc = func.Call (obj);
pour (soit i = 0; i <1000000; i) {
innerfunc ();
}
}</p><p> Console.Time (?Fonction Arrow?);
TestArrowFunction ();
Console.Timeend (?Fonction Arrow?);</p><p> Console.Time (&#39;Bind Method&#39;);
TestBindMethod ();
Console.Timeend (&#39;Bind Method&#39;);</p><p> console.time (?méthode variable?);
TestVaribleMethod ();
Console.Timeend (?Méthode variable?);</p>

Exécutez ce code et vous constaterez que les performances de la fonction flèche sont généralement les meilleures, car elle ne nécessite pas de création de nouvelles instances de fonction.

Marcher sur des points de stand et penser profondément

Il y a plusieurs pièges communs à noter lorsqu'ils traitent de this pointeur dans les fermetures:

• Limites des fonctions flèches : les fonctions de flèche ne peuvent pas être utilisées comme constructeurs car elles ne this ont pas propre. Dans les scénarios où les constructeurs sont nécessaires, vous devez utiliser les définitions de fonction traditionnelles.
• Surcharge de la méthode bind : bien que la méthode bind puisse résoudre efficacement this problème de pointage, il crée une nouvelle instance de fonction, qui peut être un problème dans les applications sensibles aux performances.
• Les variables sauvent this complexité : cette approche, bien que efficace, peut entra?ner une diminution de la lisibilité du code dans le code complexe, comme une compréhension supplémentaire du r?le de variables telles que self ou that .

Pensez profondément:

• Choix des modèles de conception : Lors de la conception du code, envisagez d'utiliser des modèles de conception tels que des modèles de modules ou une exécution immédiate des expressions de fonction (IIFES), ce qui peut vous aider à mieux gérer la portée et this pointage.
• Impact du mode strict : En mode strict, this comportement par défaut variera et la compréhension de ces différences peut vous aider à écrire un code plus robuste.
• Curriculisation des fonctions : Dans certains cas, la programmation des fonctions peut vous aider à mieux gérer this pointage tout en améliorant la réutilisabilité du code et la flexibilité.

Grace à ces méthodes et techniques, vous pouvez contr?ler de manière flexible this pointage dans les fermetures et écrire plus efficace et plus facile à maintenir le code JavaScript. J'espère que cet article peut vous aider à mieux comprendre et résoudre this problème de pointe dans les fermetures.

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!