Analyse comparative de plusieurs méthodes d'héritage en programmation Javascript_javascript skills

Cet article analyse la comparaison de plusieurs méthodes d'héritage en programmation Javascript avec des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ouverture

Au sens 'strict', JavaScript n'est pas un véritable langage orienté objet. La raison de cette déclaration est généralement que JavaScript en tant que langage faiblement typé est très différent de la méthode d'héritage des langages forts tels que Java ou C#, il s'agit donc d'une méthode orientée objet non traditionnelle par défaut, et là Il y en a même beaucoup. Le livre le décrit comme un langage « pas entièrement orienté objet ». En fait, je pense personnellement que la méthode n'est pas importante, ce qui est important est de savoir si elle a une pensée orientée objet. Les gens qui disent que JavaScript n'est pas un langage orienté objet n'ont peut-être pas étudié en profondeur la méthode d'héritage de JavaScript, donc. J'ai écrit cet article pour la communication.

Pourquoi devez-vous utiliser javascript pour implémenter l'héritage

Les performances des premières machines PC ne sont vraiment pas flatteuses. Toute la pression était du côté du serveur, et le navigateur client n'était qu'une décoration. Associé à la disposition des tables et à l'accès Internet par ligne téléphonique populaire à cette époque, la navigation sur une page Web était très lente ; aujourd'hui, l'ère Internet se développe rapidement, le matériel informatique personnel a été considérablement amélioré et les performances des navigateurs clients sont également très décevantes. Le modèle de développement Web évolue également tranquillement : le serveur n'est plus aussi « dur » qu'avant, le navigateur doit assumer autant de tâches que possible. De cette manière, la pression est répartie sur chaque client. l'entreprise Les économies de coûts rendent également le développement Web front-end plus intéressant - de plus en plus de frameworks front-end émergent, et même de nombreux frameworks front-end MVC ont vu le jour. Dans ce contexte, le rôle de JavaScript n'est certainement pas seulement d'effectuer une simple vérification, d'envoyer des requêtes ou d'exploiter du DOM. Il doit jouer davantage de rôles comme le routage frontal et la couche métier, et JavaScript doit faire beaucoup de choses logiques. tâches. , qui incluent l'abstraction des données frontales (c'est-à-dire le modèle), et ce n'est qu'en utilisant la pensée orientée objet que les données abstraites peuvent être correctement traitées, l'héritage est donc très important ici.

Commencez par un besoin simple

Extrayez maintenant un modèle nommé Personne de la réception, qui a les attributs de base nom et âge. Par défaut, tout le monde peut parler, donc la fonction parlante est placée sur l'objet prototype pour que chaque instance puisse en profiter. Maintenant, pour l’Homme, il doit hériter des attributs de base de la Personne et ajouter ses propres attributs uniques sur cette base.

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
  //my own properties
}

Ce qui suit présente plusieurs méthodes d'héritage traditionnelles.

1. Héritage de la chaîne prototype

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
}
Man.prototype = new Person('pursue');
var man1 = new Man();
man1.say(); //hello, my name is pursue
var man2 = new Man();
console.log(man1.say === man2.say);//true
console.log(man1.name === man2.name);//true

Cette méthode d'héritage est très directe. Afin d'obtenir toutes les méthodes d'attribut de Person (instance et prototype), l'instance new Person('pursue') de la classe parent est directement affectée au prototype de la sous-classe. , la sous-classe Les instances de classe man1 et man2 elles-mêmes sont des objets complètement vides. Tous les attributs et méthodes doivent être trouvés sur la chaîne de prototypes, donc les attributs et méthodes trouvés sont les mêmes.
Par conséquent, il n’est pas réaliste d’utiliser directement l’héritage de chaîne de prototypes.

2. Utiliser l'héritage du constructeur

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
//Man.prototype = new Person('pursue');
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
man1.say(); //say is not a function

Ici, la sous-classe utilise apply dans le constructeur pour appeler le constructeur de la classe parent, afin d'obtenir l'effet d'hériter des propriétés de la classe parent. C'est bien mieux que d'utiliser directement la chaîne de prototypes. a sa propre part de ressources, mais cette méthode ne peut hériter que des attributs d'instance de la classe parent, donc la méthode say est introuvable. Afin d'hériter de tous les attributs et méthodes de la classe parent, la chaîne de prototypes doit être modifiée, introduisant ainsi la méthode d'héritage combiné.

3. Héritage combiné

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = new Person();
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
console.log(man1.say === man2.say);//true
man1.say(); //hello, my name is joe

Il convient de noter que les attributs d'instance de man1 et man2 remplacent en fait les attributs du prototype, mais ils ne remplacent pas la méthode say sur le prototype (car ils ne l'ont pas), donc ici man1.say === man2 .say renvoie toujours vrai, alors veillez à ne pas remplacer la propriété prototype car elle est commune à toutes les instances.

4. Héritage combiné parasite

Pour être honnête, je ne connais vraiment pas le nom du formulaire suivant, mais c'est bien la méthode d'héritage JavaScript la plus populaire et la plus classique. En fait, il suffit de comprendre la structure de l'objet prototype :

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = Object.create(Person.prototype);//a.
Man.prototype.constructor = Man;//b.
var man1 = new Man('pursue');
var man2 = new Man('joe');
console.log(man1.say == man2.say);
console.log(man1.name == man2.name);

En fait, la seule différence entre l'héritage de combinaison parasite et l'héritage de combinaison ci-dessus est la manière de construire l'objet prototype de la sous-classe (a. et b. La méthode Object.creat(obj) est utilisée ici, qui est utilisée ici. traitera l'obj entrant. L'objet est copié superficiellement, semblable à :

function create(obj){
  function T(){};
  T.prototype = obj;
  return new T();
}

Par conséquent, a. connectera bien l'objet prototype de la sous-classe à l'objet prototype de la classe parent, au lieu de copier directement le prototype de la sous-classe comme l'héritage combiné général (comme Man.prototype = new Person() ;), il s'agit simplement d'un écrasement très violent des attributs. La méthode d'héritage de combinaison parasite hérite séparément des attributs d'instance et des attributs de prototype, ce qui est plus raisonnable dans la mise en œuvre.

Remarque : le code b. ne modifiera pas le résultat de instanceof, mais il est plus rigoureux pour les scénarios où un constructeur est nécessaire.

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.