Inheritance of javascript

Prototype chain inheritance

Prototype chain inheritance modifies the prototype of the subclass to an instance of the parent class, so that the subclass can access the parent class's constructor and the properties or methods on the prototype.

            function Base(){
				this.id = '123'
				this.name = 'aaa'
				this.arr = [1]
			}
			function Ba(){
			 	this.id = '456'
			}
			Ba.prototype = new Base()  // 修改子类的原型为父类的实例
			let a1 = new Ba()
			let a2 = new Ba()
			
			a2.arr.push(2)  // 如果在1个子对象中对某个属性对象（不包括基本类型）做出改变（不是直接改变引用地址/重新赋值），其他子对象的该属性也会改变

			console.log(a1.arr) // 12
			console.log(a2.arr) // 12

The core is to use the parent class instance as the prototype object of the subclass

advantage

simple

Disadvantage

If a property object (not including the basic type) is changed in one sub-object (not directly changing the reference address/re-assignment), the property of other sub-objects will also change

Constructor + call()

The core is to use the parent class.call() method in the subclass;

            function Parent(name) {
			    this.name = name;
			    this.arr = [1];
			    this.getName = function () {
			        return this.name;
			    };
			}
			function Child(name) {
			    Parent.call(this, name); //核心代码
			}

Every time a new instance of child is created, every attribute is recreated.

Advantages 1. Solve the problem of referencing attributes 2. Can pass parameters 3. Can inherit multiple

Disadvantages: 1. Cannot inherit the properties and methods of the prototype 2. Instances are not counted as instances of the parent class, but only instances of the subclasses. 3. Functions cannot be reused and are copies, so they take up a lot of memory

Combination inheritance (prototype chain + prototype + call)

father:

1. Attributes are placed in constructor 2. Functions are placed in prototypes

Subclass:

1. The first time: write into the example 2. The second time: write into the prototype

// 定义属性
function Parent(name, arr) {
    this.name = name;
    this.arr = [1];
}

// 定义函数(不放在实例中)
Parent.prototype.getName = function () {
    return this.name;
}; 

function Child(name) {
    Parent.call(this, name); //【第一次】
}

Child.prototype = new Parent(); //【第二次】

advantage:

Solve the problem of referencing attributes. Parameters can be passed. Functions can be reused: because they are not placed in the instance, but in the prototype.

Disadvantages:

The parent class constructor is called twice, and the same properties are written in both the prototype and the instance. There is no need

Parasitic combination inheritance + obejct.create

Invoke the instance method: first look for itself → look for the prototype of its own constructor function → look for the prototype of the prototype constructor function

To achieve inheritance: prototype of the constructor = an instance of the parent

Object.create(): The parameter inside is the prototype to be inherited, without calling the parent class constructor, directly inheriting the prototype

//寄生组合继承
function Parent (name) {
  // 属性：避免复用的时候被修改，写在构造函数中每次创建新的
  this.name = name || 'Sony';
}

// 原型方法：函数可以复用，因此直接写在原型中直接继承
Parent.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

function Child(name){
  // 调用父构造函数，解决属性修改问题
  // 【继承属性】
  // =》创建父类的实例，然后添加子类新的属性
  Parent.call(this,name);
}

// 以父类原型创建自己的原型：【继承函数】
// =》1.原型链继承 2.函数可以复用所以不需要从构造函数继承
Child.prototype = Object.create(Parent.prototype);

// 再把原型的构造函数指向自己
// =》修改获取的父原型对象为自己，形成完整的原型链
Child.prototype.constructor = Child;

Note: Object.create (target) creates a new object through the target (a prototype object).

Advantages: solve the constructor call twice

ES6 inheritance

class Parent {
    // 构造函数，里面写上对象的属性
    constructor(props) {
        this.name = props.name || "Unknown";
    }
    // 方法写在后面
    getName() {
        // 父类共有的方法
        console.log(this.name);
    }
}

// class继承
class Child extends Parent {
    // 构造函数
    constructor(props, myAttribute) {
        // props是继承过来的属性
        // myAttribute是自己的属性
        // 调用实现父类的构造函数
        super(props); //相当于获得父类的this指向
        this.attr = myAttribute; //自己的私有属性
    }

    fly() {
        //自己私有的方法
        console.log(this.name);
    }
}

Class inheritance

Subclass constructor:

1. The first parameter +: inherited attributes (there are a few in the parent class to write a few)

2. The first parameter +: inherited attributes

3. First call the parent class constructor

Reprinted from: https://www.wolai.com/mary/eZTNTsNPfYeUtzXH3P689