Quelles sont les méthodes d'héritage de js ? Introduction à plusieurs façons d'implémenter l'héritage dans js

Ce que cet article vous apporte, c'est quelles sont les méthodes d'héritage de js ? Une introduction à plusieurs façons d'implémenter l'héritage dans js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

1. La façon dont js implémente l'héritage : chaîne de prototypes

Méthode d'implémentation : Une instance de prototype A est un attribut de prototype B

Non. Oubliez que l'objet existe par défaut dans la chaîne de prototypes. L'ajout de méthodes aux sous-classes ou le remplacement des méthodes de superclasse doivent être placés après l'instruction de prototype de remplacement

Une fois l'héritage implémenté via la chaîne de prototypes, les littéraux d'objet ne peuvent pas être utilisés. . Créez des méthodes et des propriétés, car la chaîne de prototypes sera réécrite

Une fois l'héritage implémenté via la chaîne de prototypes, les attributs de type référence de la super classe seront partagés par toutes les instances

2. js Méthodes d'implémentation de l'héritage : emprunter un constructeur

function SuperType() {
  this.property = true;
  this.arr=[1,2,3]
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  this.sub = false;
}
SubType.prototype = new SuperType();
//继承SuperType，即以superType的实例为中介，使subType。prototype指向superType的原型
SubType.prototype.getSubValue = function() { //添加新方法
  return this.sub;
}
SubType.prototype.getSuperValue = function() { // 重写超类中的方法
  return this.sub;
}
var instance1 = new SubType();
instance1.arr.push(4);
console.log(instance1.arr); //1,2,3,4
var instance2 = new SubType();
console.log(instance2.arr); //1,2,3,4

Méthode d'implémentation : Appelez le constructeur de la superclasse dans le constructeur de la sous-classe, c'est-à-dire utilisez call() ou apply() pour créer Modifications de la portée du constructeur de superclasse

Vous pouvez transmettre des paramètres au constructeur, mais vous ne pouvez pas réutiliser les fonctions

3. La façon dont js implémente l'héritage : l'héritage combiné

function SuperType(name,age){
  this.name = name;
  this.age = age;
}
function SubType() {
  SuperType.call(this,'i','21')//继承SuperType，并传递参数
  this.job = 'actor'
}

. 🎜>Méthode d'implémentation : utilisez la chaîne de prototypes pour réaliser l'héritage des propriétés et des méthodes du prototype, et empruntez le constructeur pour réaliser l'héritage des propriétés de l'instance

Danger caché : appelez le constructeur de la classe parent deux fois (méthode 1call(), 2new SuperType() )

function SuperType(name,age){
  this.name = name;
  this.age = age;
  this.f = [1,2,3,4]
}
SuperType.prototype.sayName = function() {
  console.log(this.name)
}
function SubType(name,age) {
  SuperType.call(this,name,age)//继承SuperType，并传递参数
  this.job = 'actor'
}
SubType.prototype=new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayHello=function() {
  console.log('hello')
}

var h = new SubType('hua', 18);
h.sayName()//haha
h.f.push(5)
console.log(h.f)//1,2,3,4,5
var n = new SubType();
console.log(n.f)//1,2,3,4

4 La façon dont js implémente l'héritage : l'héritage prototypique

Générer un nouvel objet. basé sur un objet, Puis modifiez le nouvel objet

Les attributs du type de référence de super classe sont toujours partagés

var person = {
  name:'lily',
  age:'21',
  friends:[1,2,3]
}
var people = Object.create(person);
people.friends.push(4);
var human = Object.create(person);
console.log(human.friends)//1,2,3,4

5 La façon dont js implémente l'héritage : héritage parasite

Créer une fonction uniquement pour implémenter le processus d'héritage, étendre l'objet à l'intérieur de la fonction, puis renvoyer l'objet

À ce stade, l'attribut de type référence du parent la classe est toujours partagée par toutes les instances

function anotherFunction(original) {
  var clone  = Object(original);
  clone.sayHi = function() {
    console.log('hi')
  }
  return clone;
}
var person = {
  name:'lili',
  age:'21',
  f: [1,2,3]
}
var people1 = anotherFunction(person);
people1.f.push(4)
console.log(people1.f);// 1,2,3,4
var people2 = anotherFunction(person);
console.log(people2.f);// 1,2,3,4

6. La façon dont js implémente l'héritage : héritage combiné parasite

Hérite des propriétés en empruntant des constructeurs et hérite méthodes via le mélange de chaînes de prototypes

Réduit une fois l'exécution du constructeur de classe parent et les attributs du type de référence de classe parent ne sont pas partagés

Recommandations associées :

function SuperType(name,age){
  this.name = name;
  this.age = age;
  this.f = [1,2,3,4]
}
SuperType.prototype.sayName = function() {
  console.log(this.name)
}
function SubType(name,age) {
  SuperType.call(this,name,age)
  this.job = 'actor'
}
function inherit(superType,subType) {
  var property =  Object.create(superType.property);// 创建父类原型的一个副本，并没有调用父类构造函数
  property.constructor = subType;// 使父类原型副本的constructor属性指向子类
  subType.property = property;// 子类的原型指向父类原型副本
}
inherit(SuperType,SubType)
var instance = new SubType('haha', 18);
instance.sayName()//haha
instance.f.push(5);
console.log(instance.f);//1,2,3,4,5
var ins = new SubType();
console.log(ins.f);//1,2,3,4

Héritage JS - Héritage de chaîne de prototypes et héritage de classe_Connaissances de base

Explication détaillée des méthodes d'héritage dans JS

Implémentation JS de l'héritage Plusieurs façons

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!