Tout d'abord, partagez des exemples de l'héritage du prototype JS pour votre référence. Le contenu spécifique est le suivant
1. Prototype JS
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> js Prototype héritage </ititle> </ head> <body> <! - Prototype Hérédité -> <script type = "text / javascrip {}; // Cette phrase est le cœur de l'héritage prototype. L'objet prototype de la fonction est l'objet litteral_f.prototype = obj; retourner new _f; } // Déclarer un objet littéral d'abord var animal = {quelque chose: 'Apple', manger: function () {console.log ("manger" + this.soming); }} // Pas besoin de définir une sous-classe de personne, il suffit de effectuer un clonage de clonage Cat = Clone (animal); // Vous pouvez obtenir directement la valeur par défaut fournie par personne, ou vous pouvez ajouter ou modifier les attributs et méthodes console.log (cat.eat ()); Cat.SOMTHING = 'Orange'; console.log (cat.eat ()); // Déclarer la sous-classe et effectuer un clonage var quelqu'un = clone (chat); </cript> </ body> </html>2. Principe de travail de l'héritage du prototype JavaScript
Il est bien connu que JavaScript adopte l'héritage du prototype, mais comme il ne fournit qu'une instance de l'implémentation, le nouvel opérateur, par défaut, l'explication est toujours déroutant. Expliquons ce qu'est l'héritage du prototype et comment utiliser l'héritage du prototype en JavaScript.
Définition de l'héritage du prototype
Lorsque vous lisez l'explication sur l'héritage du prototype JS, vous voyez souvent le texte suivant:
Lorsque vous recherchez les propriétés d'un objet, JavaScript traversera la chaîne du prototype jusqu'à ce que l'attribut du nom donné soit trouvé. - du jardin secret de Javascript
La plupart des implémentations JavaScript utilisent l'attribut __proto__ pour représenter la chaîne prototype d'un objet. Dans cet article, nous verrons la différence entre __proto__ et prototype.
Remarque: __proto__ est une utilisation informelle qui ne devrait pas apparaître dans votre code. Ici, nous l'utilisons simplement pour expliquer comment fonctionne l'héritage du prototype JavaScript.
Le code suivant montre comment le moteur JS recherche les propriétés:
fonction getProperty (obj, prop) {if (obj.hasownproperty (prop)) return obj [prop] else if (obj .__ proto__! == null) return getProperty (obj .__ proto__, prop) else return undefined}Donnons un exemple commun: un point bidimensionnel a des coordonnées bidimensionnelles XY, ce qui est similaire à une méthode d'impression.
En utilisant la définition de l'héritage prototype que nous avons mentionné précédemment, nous créons un point d'objet avec trois propriétés: x, y et imprimer. Afin de créer un nouveau point bidimensionnel, nous devons créer un nouvel objet, de sorte que ses points d'attribut __Proto__ au point:
var point = {x: 0, y: 0, print: function () {console.log (this.x, this.y); }}; var p = {x: 10, y: 20, __proto__: point}; p.print (); // 10 20Héritage de prototype bizarre javascript
Ce qui est déroutant, c'est que personne qui enseigne l'héritage du prototype ne donnera un tel morceau de code, mais donnera le code suivant:
Point de fonction (x, y) {this.x = x; this.y = y; } Point.prototype = {print: function () {console.log (this.x, this.y); }}; var p = nouveau point (10, 20); p.print (); // 10 20C'est différent de ce que j'ai dit. Ici, le point devient une fonction, et il existe également un attribut prototype, et il y a un nouvel opérateur. Que se passe-t-il avec ça?
Comment fonctionne le nouvel opérateur
Le créateur Brendan Eich voulait rendre JS pas très différent des langages de programmation traditionnels orientés objet, tels que Java et C ++. Dans ces langues, nous utilisons le nouvel opérateur pour instancier un nouvel objet à la classe. Il a donc écrit un nouvel opérateur en JS.
Il existe un concept de constructeur en C ++ pour initialiser les propriétés d'instance, de sorte que le nouvel opérateur doit être ciblé sur les fonctions.
Nous devons mettre la méthode d'objet en un seul endroit. Puisque nous utilisons le langage prototype, nous le mettrons dans les propriétés prototypes de la fonction.
Le nouvel opérateur accepte une fonction F et ses paramètres: Nouveaux F (arguments ...). Ce processus est divisé en trois étapes:
Créez une instance de la classe. Cette étape consiste à définir la propriété __proto__ d'un objet vide sur f.prototype.
Initialisez l'instance. La fonction f est transmise dans le paramètre et appelé, et le mot clé Ceci est défini sur cette instance.
Renvoie l'instance.
Maintenant que nous savons comment fonctionne le nouveau, nous pouvons l'implémenter dans JS Code:
fonction new (f) {var n = {'__proto__': f.prototype}; / * Étape 1 * / return function () {f.apply (n, arguments); / * Étape 2 * / retour n; / * Étape 3 * /}; }Un petit exemple de sa situation de travail:
Point de fonction (x, y) {this.x = x; this.y = y; } Point.prototype = {print: function () {console.log (this.x, this.y); }}; var p1 = nouveau point (10, 20); p1.print (); // 10 20 console.log (point de point de l'instance P1); // vrai var p2 = new (point) (10, 20); p2.print (); // 10 20 console.log (point de point de l'instance p2); // vraiVéritable prototype héritage en javascript
La spécification ECMA de JS nous permet uniquement d'utiliser le nouvel opérateur pour l'héritage du prototype. Mais le grand maître Douglas Crockford a découvert un moyen d'utiliser de nouveaux pour réaliser un véritable prototype de l'héritage! Il a noté l'objet. Créer la fonction comme suit:
Object.create = function (parent) {function f () {} f.prototype = parent; retourner nouveau f (); };Cela a l'air bizarre, mais c'est assez concis: il crée un nouvel objet et le prototype à n'importe quelle valeur que vous souhaitez définir. Si nous autorisons __proto__, nous pouvons également écrire ceci:
Object.create = function (parent) {return {'__proto__': parent}; };Le code suivant permet à notre point d'adopter un réel prototype d'héritage:
var point = {x: 0, y: 0, print: function () {console.log (this.x, this.y); }}; var p = object.create (point); px = 10; py = 20; p.print (); // 10 20en conclusion
Nous avons appris ce qu'est l'héritage du prototype JS et comment JS peut l'implémenter de manière spécifique. Cependant, en utilisant un réel prototype d'héritage (comme object.create et __proto__) a toujours les inconvénients suivants:
Carence standard: __ Proto__ n'est pas une utilisation standard, ni même une utilisation de désapprobation. En même temps, l'objet original.Create et la version originale écrite par Daoye sont également différents.
Mauvaise optimisation: si l'objet natif ou personnalisé.
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.