JS inheritance method

Extensions class of es6

class Person {
    constructor(gender) {
        this.gender = gender;
    }
    say(msg) {
        console.log(msg);
    }
}

class Teacher extends Person {
    constructor(age) {
        super('male');
        this.age = age;
    }
}

const mike = new Teacher(26);
mike.age // 26
mike.gender // male
mike.say('hello') //hello

Prototype chain inheritance

function Person(gender) {
    this.gender = gender;
}

Person.prototype.say = function(msg) {
    console.log(msg);
}

function Teacher(age) {
    this.age = age;
}

Teacher.prototype = new Person('male');

const mike = new Teacher(26);
// mike.__proto__ === Teacher.prototype === p
// p.__proto__ === Person.prototype
mike.age // 26
mike.gender // male
mike.say('hello') //hello
  • This way of inheritance cannot dynamically pass parameters to the parent class. Once a connection is established, the input parameters of new Teacher must be confirmed;
  • At the same time, because the parent class instance is directly paid to the child class prototype, all instances of subsequent child classes share the properties in the parent class instance, that is, modifying the gender of any child class instance will affect other instances

Constructor inheritance

function Person(gender) {
    this.gender = gender;
}

Person.prototype.say = function(msg) {
    console.log(msg);
}

function Teacher(age) {
    this.age = age;
    Person.call(this, 'male')
}

const mike = new Teacher(26);
mike.age // 26
mike.gender // male
mike.say('hello') // report errors
  • The attributes on the parent class can be bound to the child class instance. Because they are directly mounted on the instance rather than the instance prototype, the attributes will not affect each other
  • However, this method does not associate the prototype chain, that is, the parent class cannot be found from the subclass, and the subclass instance cannot access the methods on the parent prototype chain

Combinatorial inheritance

function Person(gender) {
    this.gender = gender;
}

Person.prototype.say = function(msg) {
    console.log(msg);
}

function Teacher(age) {
    this.age = age;
    Person.call(this, 'male');
}

Teacher.prototype = new Teacher('female');

const mike = new Teacher(26);
mike.age // 26
mike.gender // male
mike.say('hello') // hello
  • Combining prototype chain inheritance and constructor inheritance
  • You can inherit both the parent class attribute and the attribute on the parent prototype chain
  • Because it is actually equivalent to calling the constructor of the parent class twice, the overhead is greater than other methods. At the same time, the gender attribute will be mounted on the subclass instance and the subclass prototype at the same time. The former will mask the latter, and the former will not affect each other between instances, but the latter is redundant

Parasitic Inheritance

function Person(gender) {
    this.gender = gender;
}

Person.prototype.say = function(msg) {
    console.log(msg);
}

function Inherit(Parent, age) {
    const obj = Object.create(new Parent('male'));
    // obj.__proto__ === p
    // p.__proto__ === Parent.prototype
    obj.age = age;
    return obj;
}

const mike = Inherit(Person, 26);
mike.age // 26
mike.gender // male
mike.say('hello') // hello
  • Parasitism, as its name suggests, is to create an object to implement inheritance, and then add various attributes to it
  • Inherited methods in this way are usually not reusable. When you need to change properties, you need to modify the methods
  • With prototype chain inheritance, in this mode, subclass instances share parent attributes and will affect each other

Parasitic combinatorial inheritance

function Person(gender) {
    this.gender = gender;
}

Person.prototype.say = function(msg) {
    console.log(msg);
}

function Teacher(age) {
    const obj = Object.create(Person.prototype);
    // obj.__proto === Person.proptype
    Person.call(obj, 'male');
    obj.age = age;
    return obj;
}

const mike = new Teacher(26);
mike.age // 26
mike.gender // male
mike.say('hello') // hello
  • Combining the characteristics of combinatorial inheritance and parasitic inheritance, in which the prototype of the subclass instance is directly directed to the prototype of the parent class, using object Create instead of new a parent instance, avoiding executing the construction method of the parent twice
  • At the same time, because Teacher will return an object, according to the execution principle of new, if the constructor returns an object, it will take the object as the return after the instance

Tags: Javascript Front-end

Posted by naveendk.55 on Mon, 09 May 2022 12:26:39 +0300