Réutilisation du code et ses principes
代码复用, comme son nom l'indique, est de réutiliser une partie ou même tout le code qui a été écrit pour créer un nouveau programme. Lorsque vous parlez de réutilisation du code, la première chose à laquelle nous pouvons penser est继承性. Le principe de la réutilisation du code est:
优先使用对象组合，而不是类继承Dans JS, comme il n'y a pas de concept de classe, le concept d'instances n'est pas très significatif. Les objets en JS sont des paires de valeurs clés simples qui peuvent être créées et modifiées dynamiquement.
Mais dans js , nous pouvons instancier un objet à l'aide de constructeurs et new opérateurs, qui présente une similitude de syntaxe avec d'autres langages de programmation qui utilisent des classes.
Par exemple:
var trigkit4 = new Person(); js semble être une classe lors de l'appel de la Person constructeur, mais c'est en fait une fonction, ce qui nous donne quelques idées de développement et des modèles d'héritage qui sont supposés être basés sur la classe, que nous pouvons appeler des "modèles d'héritage classiques".
Le modèle d'héritage traditionnel nécessite le mot-clé class . Nous supposons que le modèle d'héritage de classe ci-dessus est现代继承模式, qui est un modèle qui n'a pas besoin d'être pris en compte de manière en classe.
Mode d'héritage classique
Voir les deux exemples suivants du constructeur Parent() et Child() :
<script type="text/javascript">fonction parent (name) {
this.name = name || «Allen»;
}
Parent.prototype.say = function () {
Renvoie ce.name;
}
fonction enfant (nom) {}
// Créez un objet avec le constructeur parent et attribuez l'objet au prototype enfant pour obtenir un héritage
Fonction héritage (c, p) {
C.prototype = new p (); // L'attribut prototype devrait pointer vers un objet, pas une fonction
}
// appelle la fonction héritée déclarée
héritage (enfant, parent);
</cript>
Lorsqu'un objet est créé à l'aide de l'instruction new Child() , il obtient sa fonctionnalité à partir de Parent() via le prototype, tel que:
var kid = new Child();kid.say();//AllenChaîne prototype
Discutons de la façon dont les chaînes prototypes fonctionnent en mode héritage de classe. Nous considérons les objets comme des blocs quelque part en mémoire qui contiennent des données et des références à d'autres blocs. Lorsqu'un objet est créé à l'aide de la new Parent() , un bloc comme celui-ci à gauche de la figure ci-dessous sera créé. Ce bloc enregistre name . Si vous souhaitez accéder say() , nous pouvons accéder au __proto__ Parent.prototype à droite en pointant prototype du constructeur Parent() .
Alors, que se passe-t-il lors de la création d'un nouvel objet avec var kid = new Child() ? Comme indiqué dans la figure ci-dessous:
L'objet créé à l'aide de new Child() est presque vide à l'exception du lien implicite __proto__ . Dans ce cas, __proto__ pointe vers l'objet créé à l'aide de l'instruction new Parent() dans la fonction inherit()
Lors de l'exécution kid.say() , puisque l'objet de bloc dans le coin inférieur gauche n'a pas say() , il interroge l'objet de bloc moyen à travers la chaîne prototype. Cependant, l'objet de bloc central n'a pas non plus say() , il suit donc la chaîne prototype pour interroger l'objet de bloc le plus à droite, et l'objet se trouve avoir say() . Est-ce fini?
L'exécution n'est pas terminée ici. this.name est référencé dans say() , qui pointe vers l'objet créé par le constructeur. Ici, cela pointe vers le bloc new Child() . Cependant, il n'y a pas d'attribut name dans new Child() . Pour cette raison, le bloc intermédiaire sera interrogé et le bloc intermédiaire aura name . À ce stade, la requête de la chaîne prototype a été achevée.
Pour une discussion plus détaillée, veuillez consulter mon article: JavaScript Learning Notes (v) Explication détaillée des prototypes et des chaînes de prototypes
Prototype partagé
La règle de ce modèle est que les membres réutilisables doivent être transférés au prototype plutôt que placé dans ce domaine. Par conséquent, aux fins de l'héritage, tout ce qui vaut la peine de hériter doit être mis en œuvre dans le prototype. Par conséquent, vous pouvez définir le prototype de l'objet enfant et le prototype de l'objet parent à la même chose que l'exemple ci-dessous:
function inherit(C,P){C.prototype = p.prototype;
}
L'objet enfant et l'objet parent partagent le même prototype et peuvent accéder également say() . Cependant, l'objet enfant n'hérite pas de name
Héritage prototype
L'héritage prototype est un modèle d'héritage sans classe "moderne". Voir l'exemple suivant:
<script type="text/javascript">// l'objet à hériter
var parent = {
Nom: "Jack" // Il n'y a pas de point-virgule ici
};
//新对象var child = objet (parent);
alert(child.name);//Jack</cript>
En mode prototype, il n'est pas nécessaire d'utiliser des littéraux d'objets pour créer des objets parents. Comme indiqué dans le code suivant, vous pouvez utiliser le constructeur pour créer l'objet parent. Ce faisant, ses propres propriétés et les propriétés du prototype du constructeur seront héritées.
<script type="text/javascript">// Constructeur parent
fonction de fonction () {
this.name = "Trigkit4";
}
// Ajouter un attribut prototype
Personne.prototype.getName = function () {
Renvoie ce.name;
};
// Créer un nouvel objet de classe de personne
var obj = new personne ();
//hériter
var kid = objet (obj);
alert (kid.getName ()); // Trigkit4
</cript>
Dans ce mode, vous pouvez choisir de hériter uniquement de l'objet prototype qui existe dans le constructeur existant. Les objets héritent des objets, quelle que soit la façon dont l'objet parent est créé, comme indiqué dans l'exemple suivant:
<script type="text/javascript">// Constructeur parent
fonction de fonction () {
this.name = "Trigkit4";
}
// Ajouter un attribut prototype
Personne.prototype.getName = function () {
Renvoie ce.name;
};
// Créer un nouvel objet de classe de personne
var obj = new personne ();
//hériter
var kid = objet (personne.prototype);
console.log (typeof kid.getName); // fonction, car il se trouve dans le prototype
console.log (typeof kid.name); // non défini, car seul ce prototype est hérité
</cript>