Qu'est-ce qu'un prototype en javascript

JavaScript est un langage dynamique et basé sur le prototype, donc les prototypes sont l'un des concepts les plus importants de JavaScript. Disons d'abord pourquoi nous avons besoin de prototypes.

Pourquoi avons-nous besoin de prototypes?

Comme mentionné précédemment, JavaScript est un langage dynamique qui signifie que nous pouvons ajouter des propriétés à un objet à tout moment. Passons à un exemple pour expliquer ceci:

Fonction Player ()
ce.name = 'danger';
ce.Club = 'Chelsea';

var Player1 = new Player ();
joueur 1.âge = 30;
alerte (joueur1.âge);
var player2 = new Player ();
alerte (joueur2.âge);

Dans cet exemple, nous avons donné une autre propriété au joueur d'objet. Cependant, le premier objet I-E Player1 aura une propriété d'âge mais pas le deuxième objet I-E Player2. La raison en est que la propriété d'âge n'est définie que pour l'objet Player1.

Nous pouvons voir que l'objet Player2 montre non défini dans la sortie ci-dessous de l'exemple ci-dessus:

Maintenant que nous savons à quel problème nous sommes confrontés, la question se pose: quelle est la solution? La solution à ce problème est «prototype».

Solution

Les prototypes sont une caractéristique intégrée de JavaScript. Chaque fois que vous créez une fonction JavaScript, JavaScript ajoute automatiquement un prototype à cette fonction. Nous pouvons dire qu'un prototype est un objet qui vous permet d'ajouter de nouvelles propriétés à un objet existant. Bref, les prototypes contiennent une classe de base de tous les objets, nous aidant à atteindre l'héritage.

Nous pouvons attacher des propriétés supplémentaires à l'objet prototype qui sera ensuite partagé sur toutes les instances.

Nous allons maintenant utiliser la propriété Prototype dans l'exemple ci-dessus pour résoudre le problème du partage de la propriété d'âge à tous les objets I-E Player1 et Player2.

Fonction Player ()
ce.name = 'danger';
ce.Club = 'Chelsea';

Joueur.prototype.âge = 30;
var Player1 = new Player ();
alerte (joueur1.âge);
var player2 = new Player ();
alerte (joueur2.âge);

Nous verrons que l'âge des deux joueurs aura 30 ans maintenant. La sortie est indiquée ci-dessous:

Pour en dire simplement, la propriété prototype de JavaScript nous aide à ajouter de nouvelles propriétés aux constructeurs d'objets comme indiqué dans l'exemple ci-dessus.

Propriété prototype d'un objet

Chaque objet qui est initié à l'aide de la syntaxe littérale ou initié à l'aide de la syntaxe du constructeur à l'aide du nouveau mot-clé, comprend la propriété __proto__. Cela pointera vers l'objet prototype qui a créé cet objet.

Si vous souhaitez voir la propriété prototype d'un objet, nous pouvons le voir dans l'outil de développement de débogage. Dans l'exemple ci-dessous, nous l'implémenterons et le visualiserons dans la fenêtre de la console.

Exemple

Fonction Player ()
ce.name = 'danger';
ce.Club = 'Chelsea';

var playerObject = new Player ();
// fenêtre de console
console.journal (joueur.prototype);
console.Log (PlayerObject.prototype);
console.Log (PlayerObject.__proto__);
console.journal (typeof lecteur);
console.enregistrer();

Dans cet exemple, nous pouvons voir que la propriété Prototype de fonction est accessible en utilisant le nom de fonction qui est le joueur.prototype.

Nous pouvons également voir dans cet exemple que la propriété prototype n'est pas exposée à l'objet, nous ne pouvons y accéder qu'à l'aide du «__proto__».

Prototype de l'objet

Dans l'exemple précédent, nous avons vu que la propriété du prototype d'objet n'est pas définie, ce qui signifie qu'il est invisible. Nous pouvons utiliser l'objet.Méthode GetPrototypeOf (OBJ) au lieu de celle que nous avons utilisée I-e «__proto__». Par là, il ne sera pas défini et nous pourrons accéder à l'objet prototype.

Fonction Player ()
ce.name = 'danger';
ce.Club = 'Chelsea';

var playerObject = new Player ();
Joueur.prototype.sélectionné = fonction ()
alert ("sélectionné pour l'équipe d'aujourd'hui");

var Player1 = new Player ();
var checkingProto = objet.getPrototypeOf (Player1);
// Cela renverra un objet prototype Player1
alerte (vérification.constructeur);
// Cela renverra la fonction Player1 qui est sélectionnée

Conclusion

Dans cet article, nous avons principalement discuté du concept de base des prototypes en JavaScript. Nous avons creusé un peu plus profondément et discuté de ce qu'est un prototype en JavaScript. Nous avons également discuté d'un problème et avons donné la solution à l'aide du prototype. En dehors de cela, nous avons discuté de la recherche de propriétés et de méthodes d'objet en JavaScript à l'aide de prototypes. Tout cela a été démontré à l'aide d'exemples pour développer une meilleure compréhension du concept.