Extension ou écrasement de prototypes JavaScript : quelle approche est la meilleure ?

Définir un prototype JavaScript : comprendre les différences

Définir des prototypes d'objets en JavaScript est essentiel pour l'héritage et la réutilisabilité du code. Cependant, il existe deux approches courantes pour la définition d'un prototype : étendre le prototype existant ou l'écraser entièrement.

Option 1 : Extension du prototype existant

Person.prototype.sayName = function(name) {
   alert(name);
}

Cette approche étend l'objet prototype actuel Person.prototype en ajoutant une nouvelle méthode sayName. Les instances existantes de Person hériteront de cette nouvelle méthode.

Option 2 : écraser le prototype

Person.prototype = {
   sayName: function(name) {
      alert(name);
   }
}

Contrairement à l'option 1, cette approche attribue un nouvel objet prototype à Person .prototype, écrasant celui d'origine. Seules les futures instances de Person hériteront de la méthode sayName.

Différences fonctionnelles et avantages

La principale différence fonctionnelle est que l'option 1 permet aux instances existantes d'accéder à la nouvelle méthode, tandis que l'option 2 n'affecte que les instances futures.

Une autre différence est qu'en écrasant le prototype (option 2), vous supprimez par inadvertance toute autre propriété ou méthode précédemment définie. dans le prototype original. Bien que celles-ci n'incluent généralement que la propriété constructeur, il convient de noter cet inconvénient potentiel.

Recommandation

L'option 1 (extension) est généralement considérée comme plus concise et robuste car elle garantit que toutes les instances de Person peuvent accéder à sayName. Évitez l'option 2, sauf si vous devez réinitialiser le prototype pour des raisons spécifiques.

Approche alternative

Si la syntaxe littérale d'objet de l'option 2 vous plaît, envisagez d'utiliser Object. assigner pour étendre le prototype existant :

Object.assign(Person.prototype, {
   sayName: function(name) {
      alert(name);
   }
});

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!