Explication détaillée de la méthode d'héritage JavaScript (1)

La plupart des langages orientés objet prennent en charge l'héritage. L'avantage le plus important de l'héritage est la réutilisation du code, permettant ainsi de créer de grands systèmes logiciels. Si une classe peut réutiliser les propriétés et/ou méthodes d’une autre classe, on parle d’héritage. Examinons la méthode d'héritage de JS sous cet angle. La méthode d'héritage dans JS est étroitement liée à la manière d'écrire les classes. Différentes manières d’écrire des classes conduisent à différentes méthodes d’héritage. Diverses bibliothèques JS populaires ont également différentes méthodes d'héritage. Commencez par la réutilisation la plus simple.

1. Écrivez une classe en mode constructeur, copiez les attributs/champs de la classe parent dans la sous-classe via des appels de méthode pour obtenir l'héritage

Ici, le parent la classe et la sous-classe sont écrites en mode constructeur sans prototype. La sous-classe appelle la fonction de classe parent pour copier les attributs de la classe parent.

/**
 * 父类Polygon:多边形
  * @param {Object} sides 
  */
    function Polygon(sides) {
    this.sides = sides;
    this.setSides = function(s) {this.sides=s;}
  }
    /**
  * 子类Triangle:三角形
   */function Triangle() {this.tempfun = Polygon;//父类引用赋值给子类的一个属性
   tempfunthis.tempfun(3);//调用
   delete this.tempfun;//删除该属性  
   this.getArea = function(){};}//new个对象
   var tri = new Triangle();console.log(tri.sides);//继承的属性
   console.log(tri.setSides);//继承的方法
   console.log(tri.getArea);//自有的方法
   //缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false
   console.log(tri instanceof Triangle);//trueconsole.log(tri instanceof Polygon);//false
因为 JavaScript中具名函数的多种调用方式 ，子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。
function Triangle() {
Polygon.call(this,3); //call方式调用父类
this.getArea = function(){};
}
function Triangle() {
Polygon.apply(this,[3]); //apply方式调用父类this.getArea = function(){};
}
function Triangle() {
var temp = new Polygon(3); //new方式调用父类
for(atr in temp) { //全部复制给子类this[atr] = temp[atr];
}
this.getArea = function(){};
}

L'inconvénient de cette méthode est que l'objet instance de la sous-classe est toujours faux lors de la vérification de la classe parent avec instanceof. Ceci est contraire à la relation entre l'héritage "est un" en Java.

2. Écrivez des classes en mode prototype et héritez en mode prototype

Le propre système d'objets de Core JS est hérité à l'aide de la méthode prototype (basée sur un prototype) . En d'autres termes, le noyau JS n'utilise pas l'héritage de classe commun (classe basé), utilisez plutôt l’héritage prototypique pour implémenter votre propre système d’objets. Au travail, nous pouvons également utiliser des prototypes pour implémenter l'héritage et la réutilisation du code afin de construire nos propres modules fonctionnels.

/**
 * 父类Polygon:多边形
 * 
 */
function Polygon() {}
Polygon.prototype.sides = 0;
Polygon.prototype.setSides = function(s) {this.sides=s;}
/**
 * 子类Triangle:三角形
 */
function Triangle() {}
Triangle.prototype = new Polygon(); //这是原型继承关键的一句
Triangle.prototype.getArea = function(){}
//new个对象
var tri = new Triangle();
console.log(tri.sides);//继承的属性
console.log(tri.setSides);//继承的方法
console.log(tri.getArea);//自有方法
//instanceof测试
console.log(tri instanceof Triangle);//true，表明该对象是三角形
console.log(tri instanceof Polygon);//true，表明三角形也是多边形

Bien qu'il ressorte de la sortie que la sous-classe hérite de l'attribut côtés et de la méthode setSides de la classe parent Polygon, mais que les côtés sont 0, comment peut-il s'agir d'un triangle. Vous devez appeler tri.setSides(3) pour en faire un triangle. Cela semble très gênant. L'incapacité de transmettre des paramètres est le défaut de la méthode prototype. L'avantage est que correctement entretenu "est une" relation.

3. Écrivez une classe en utilisant la méthode combinée constructeur/prototype et utilisez la méthode précédente pour hériter de la classe parent de

, les attributs de la sous-classe sont accrochés dans le constructeur, et les méthodes sont accrochées sur le prototype

/**
 * 父类Polygon:多边形
 */
function Polygon(sides) {
this.sides = sides;
}
Polygon.prototype.setSides = function(s) {this.sides=s;}
/**
 * Triangle 三角形
 * @param {Object} base 底
 * @param {Object} height 高
 */
function Triangle(base,height) {
Polygon.call(this,3);//复制父类属性给自己
this.base = base;
this.height = height;
}
Triangle.prototype = new Polygon();//复制父类方法给自己
Triangle.prototype.getArea = function(){ //最后定义自己的方法
return this.base*this.height/2;
}
//new个对象
var tri = new Triangle(12,4);
console.log(tri.sides);//继承的属性
console.log(tri.setSides);//继承的方法
console.log(tri.base);//自有属性
console.log(tri.height);//自有属性
console.log(tri.getArea);//自有方法
//instanceof测试，表明正确的维护了"is a"的关系
console.log(tri instanceof Triangle);//true，表明该对象是三角形
console.log(tri instanceof Polygon);//true，表明三角形也是多边形

.

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!