« this » et référence d'objet directe en JavaScript : quelle approche est la plus sûre pour les fonctions imbriquées ?

Référence littérale d'objet dans la fonction de votre propre clé : évaluation des implications

En JavaScript, il est courant d'inclure des fonctions dans les littéraux d'objet, fournissant ainsi une solution pratique moyen d’encapsuler les données et le comportement. Cependant, un dilemme se pose lors de l'accès aux propriétés d'objet au sein de ces fonctions : doit-on utiliser ceci ou référencer directement le littéral de l'objet ?

Utiliser ceci par rapport à la référence d'objet directe

Le Le premier exemple fourni dans la description du problème utilise ceci pour référencer le littéral de l'objet :

var obj = {
    key1: "it",
    key2: function(){return this.key1 + " works!"}
};
alert(obj.key2());

Cependant, le deuxième exemple contourne cela et directement fait référence à l'objet :

var obj = {
    key1: "it",
    key2: function(){return obj.key1 + " works!"}
};
alert(obj.key2());

Pièges potentiels des deux approches

Les deux approches peuvent poser des problèmes :

• cette référence : Lorsqu'il n'est pas invoqué comme méthode de l'objet (obj.key2()), cela peut faire référence à autre chose, comme le global objet.
• Référence directe d'objet : Si l'objet est réaffecté pendant l'exécution de la fonction, la fonction peut accéder à une valeur incorrecte.

Résoudre les pièges

Pour contourner ces pièges, plusieurs options exist :

• ES6 Const : Utilisez const pour empêcher la réaffectation de l'objet.
• Fermeture : Stockez l'objet dans une fermeture de portée locale .
• bind() : Liez la fonction à l'objet pour garantir qu'elle soit toujours fait référence à l'objet correct.

Implémentation sécurisée

Le code suivant démontre une implémentation sécurisée à l'aide d'une fermeture :

var obj = (function(){
    var local = {
        key1: "it",
        key2: function(){ return local.key1 + " works always!" }
    };
    return local;
})();

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!