Comment référencer au mieux les clés d'objet dans leurs propres fonctions dans les littéraux d'objet JavaScript ?

JavaScript : utilisation de littéraux d'objet pour référencer des clés dans leurs propres fonctions

Problème :
Lors de l'utilisation d'un objet littéraux en JavaScript, il est courant d'inclure des fonctions qui opèrent sur les propriétés de l'objet. Cependant, il existe deux manières de référencer l'objet dans ces fonctions : en utilisant ceci ou en utilisant explicitement le nom littéral de l'objet. Cet article explore les implications de chaque approche.

Solution :

Utiliser ceci :

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

• L'utiliser pour référencer l'objet dans la fonction garantit que la fonction accédera toujours au bon objet, quelle que soit la manière dont il se trouve. appelé.
• Cependant, si la fonction est extraite de l'objet (par exemple, assignée à une variable ou passée en argument), cela peut ne pas faire référence à l'objet comme prévu.

Utilisation du nom littéral de l'objet :

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

• Utilisation explicite du nom littéral de l'objet (par exemple, obj) pour référencer l'objet dans la fonction garantit que la fonction aura toujours accès à l'objet.
• Cependant, cette approche peut conduire à des modifications accidentelles ou à des écrasements de l'objet. Si une autre référence à l'objet est créée et attribuée à une valeur différente, la fonction continuera à référencer l'objet d'origine.

Problèmes potentiels :

• Utiliser ceci : Lorsqu'une fonction est extraite de l'objet, cela peut faire référence à l'objet global (fenêtre dans les navigateurs) au lieu de l'objet prévu objet.
• Utilisation du nom littéral de l'objet : Lorsque l'objet est réaffecté ou modifié, la fonction peut faire référence à l'objet d'origine au lieu de celui mis à jour.

Recommandations :

• Choisir l'approche en fonction de l'objectif visé utilisation : Utilisez ceci si la fonction sera principalement utilisée comme méthode de l'objet. Utilisez le nom littéral de l'objet si la fonction est susceptible d'être extraite et réutilisée.
• Utilisez ES6 const ou Closures : Dans ES6, utilisez const pour empêcher la réaffectation de l'objet. Dans ES5, utilisez une fermeture pour créer une portée locale et stocker l'objet.
• Liez la fonction à l'objet : Utilisez obj.key2 = obj.key2.bind(obj) pour vous assurer que la fonction fait toujours référence au bon 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!