Detailed explanation of JavaScript inheritance method (1)

Most object-oriented languages ​​support inheritance. The most important advantage of inheritance is code reuse, thereby building large software systems. If a class can reuse the properties and/or methods of another class, it is called inheritance. Let’s look at the inheritance method of JS from this perspective. The inheritance method in JS is closely related to the way of writing classes. Different ways of writing classes lead to different inheritance methods. Various popular JS libraries also have different inheritance methods. Start with the simplest reuse.

1. Write a class in constructor mode, and copy the properties/fields of the parent class to the subclass through method calls to achieve inheritance.

Here both the parent class and the subclass are Written in constructor mode without prototype. The subclass calls the parent class function to copy the parent class's attributes.

/**
 * 父类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(){};
}

The disadvantage of this method is that the instance object of the subclass is always false when checking the parent class with instanceof. This is contrary to the relationship between inheritance "is a" in Java.

2. Write classes in prototype mode and inherit in prototype mode

core JS’s own object system is inherited using prototype method (prototype based) . In other words, core JS does not use common class inheritance (class based) system, instead use prototypal inheritance to implement your own object system. At work, we can also use prototypes to implement inheritance and code reuse to build our own functional modules.

/**
 * 父类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，表明三角形也是多边形

Although it can be seen from the output that the subclass inherits the attribute sides and method setSides of the parent class Polygon, but sides is 0, how can it be a triangle? You have to call tri.setSides(3) to make it a triangle. This seems very inconvenient. The inability to pass parameters is the shortcoming of the prototype method. The advantage is that correctly maintained "is a" relationship.

3. Write the class using the combined constructor/prototype method, and use the previous method to inherit the parent class in this way

, the attributes of the subclass are hung in the constructor, and the methods are hung on the 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，表明三角形也是多边形

.

The above is the detailed content of Detailed explanation of JavaScript inheritance method (1). For more information, please follow other related articles on the PHP Chinese website!