JavaScript inheritance

Talk about my understanding of JavaScript inheritance

Express my humble opinion on js inheritance, the depth of understanding is relatively shallow, and I hope you can give me some pointers.

Here first write a public parent class

function Person (name, age) {
    this.name = name;
    this.age = age || 23;
    this.sayName = function () {
        console.log(`hello ${this.name}`)
    }
}

Person.prototype = {
    getAge: function () {
        console.log(`age: ${this.age}`);
    }
};

1. Constructive inheritance
Put all properties and methods in the constructor, and call the constructor of the parent class in the subclass, which is equivalent to moving all the things of the parent class to the subclass

/**
 * 1、构造函数继承
 * @constructor
 */
function Man() {
    Person.call(this);
    this.sex = 'man';
}
var man = new Man();
console.log(man instanceof Man);// true,是子类的实例
console.log(man instanceof Person);// false,不是父类的实例
man.sayName();// 正常输出
man.getAge();// man.getAge is not a function,没有把原型链上的函数也添加到子类实例上

2. Prototype chain
inheritance Subclasses put all properties and methods on the prototype chain, and put instances of the parent class on the prototype chain of the subclass.
In prototype chain inheritance, the methods and properties on the prototype chain are shared by all instances. Yes, it means that you modify the property on the prototype chain in instance A, and it is also modified in instance B

function Man () {}
Man.prototype = new Person();
Man.prototype.getSex = function () {
    console.log(`sex ${this.sex}`);
};

var man = new Man();
console.log(man instanceof Man);// true,是子类的实例
console.log(man instanceof Person);// true,是父类的实例
man.sayName();// 正常输出
man.getAge();// 正常输出

3. Combination inheritance
means using both constructor inheritance and prototype chain inheritance.
The constructor inherits the properties of the constructor class of the parent class, and the prototype chain inherits the properties on the prototype chain (usually, the properties are placed in the constructor to ensure that the properties of each subclass instance are independent, and the methods are implemented on the prototype chain Function reuse) The
only disadvantage is that the parent class constructor is called twice (once in the constructor and once on the prototype chain)

/**
 * 3、组合继承
 * @constructor
 */
function Man (name) {
    Person.call(this, name);
    this.sex = 'man';
}

Man.prototype = new Person();
Man.prototype.constructor = Man;
Man.prototype.getSex = function () {
    console.log(`sex ${this.sex}`);
};

var man = new Man();
console.log(man instanceof Man);// true
console.log(man instanceof Person);// true
man.sayName();// 正常输出
man.getAge();// 正常输出

4. Parasitic combined inheritance
The most perfect inheritance, but the implementation is more complicated, which fixes the shortcomings of combined inheritance

/**
 * 4、寄生组合继承
 * @param name
 * @constructor
 */
function Man(name) {
    Person.call(this);
    this.name = name;
}

function inherit(subType,superType){
    // 这个函数是最关键的
    // 定义一个空的类
    function F () {}
    // 把父类的原型链取出来
    F.prototype = superType.prototype;
    // 保存父类原型链
    let prototype = new F();
    /*---以上三行代码可以用ES5的这一行代码代替:var prototype=Object.create(superType.prototype); ---*/
    // 修正原型链的构造函数
    prototype.constructor = subType;
    // 把父类的原型链赋值给子类的原型链
    subType.prototype = prototype;
}

inherit(Man, Person);

var man = new Man();
console.log(man);
console.log(man instanceof Man);// true
console.log(man instanceof Person);// true
man.sayName();// 正常输出
man.getAge();// 正常输出

It is also very detailed about inheriting the Red Book. Here I recommend another blog post, which is also very simple → Several ways to implement inheritance in JS
If you have any questions, I hope you can give me some advice

JavaScript inheritance

Talk about my understanding of JavaScript inheritance

Guess you like