Pourquoi avez-vous besoin d’utiliser JavaScript pour implémenter l’héritage ? Explication détaillée d'exemples de plusieurs méthodes d'héritage

Pourquoi avez-vous besoin d'utiliser JavaScript pour implémenter l'héritage ?

Les performances des premières machines PC ne sont vraiment pas flatteuses. Toute la pression est du côté du serveur et du navigateur client. c'est purement pour la 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 MVC front-end ont vu le jour. Dans ce contexte, le rôle de JavaScript ne consiste certainement pas seulement à effectuer une simple vérification, à envoyer des requêtes ou à 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.

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
}

Plusieurs méthodes d'héritage traditionnelles :

1. Héritage de chaîne de prototypes

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), ajoutez directement l'instance de la classe parent new Person('poursuite'. ) est affecté au prototype de la sous-classe. En fait, les instances de la sous-classe man1 et man2 elles-mêmes sont des objets complètement vides. Toutes les propriétés et méthodes doivent être trouvées sur la chaîne de prototypes, donc les propriétés et méthodes trouvées sont les mêmes.
Il est donc irré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 parent Le constructeur de La classe, afin d'obtenir l'effet d'hériter des propriétés de la classe parent, est bien meilleure que d'utiliser directement la chaîne de prototypes. Au moins, chaque instance a sa propre part de ressources. Cependant, cette méthode ne peut hériter que des propriétés de l'instance. la classe parent, il est donc préférable de trouver Sans la méthode say, afin d'hériter de toutes les propriétés 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ée.

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 le prototype. attributs , mais il n'est pas nécessaire de remplacer la méthode say sur le prototype (car ils ne l'ont pas), donc ici man1.say === man2.say renvoie toujours true, vous devez donc faire très attention au prototype propriétés qui ne sont pas écrasées, car elles sont communes à toutes les instances de.

4. Héritage combiné parasitaire

Pour être honnête, je ne sais pas comment s'appelle la forme suivante, mais c'est en effet la plus populaire et classique méthode d'héritage JavaScript. 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 combiné parasite et l'héritage combiné ci-dessus l'héritage est la construction de l'objet prototype de sous-classe (a. et b.), la méthode Object.creat(obj) est utilisée ici, qui fera une copie superficielle de l'objet obj entrant, similaire à :

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 propriétés. 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.

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!