Detailed explanation of native Javascript inheritance methods and their advantages and disadvantages

Preface

I have been reviewing some basic knowledge of JavaScript recently to prepare for a new journey. So I started recording some of what I learned.

Today's topic is the native inheritance method of js

Enough talk, on to the code!

First is our parent class code.

Here we create a Person class as a parent class, and its constructor requires two parameters, name and age.

Then we add a sayHi method to its prototype.

// Parent class function Person (name, age) {
    this.name = name || 'no name';
    this.age = age || 0;
}

Person.prototype.sayHi = function () {
    console.log('Hi, I\'m ' + this.name + ' and i\'m ' + this.age + ' years old!');
}

var p = new Person('A',20);
p.sayHi();//Hi, I'm A and I'm 20 years old!

Prototypal inheritance

//Prototype inheritance function Teacher(){
}

Teacher.prototype = new Person('B',22);
Teacher.prototype.constructor=Teacher;

var t = new Teacher();
t.sayHi();//Hi, I'm B and I'm 22 years old!
console.log(t instanceof Person);//true
console.log(t instanceof Teacher);//true

advantage

From the above code, we can see that the Teacher instance has the properties and methods of Person. And the instance object is both an instance of Person and an instance of Teacher. And this inheritance method is particularly simple.

shortcoming

We can easily find that the name and age of the Teacher class are fixed, both name=B and age=22. In other words, we cannot pass parameters to the parent class constructor as we wish. And we cannot specify multiple prototypes for a Teacher, which means we cannot have multiple inheritance. Then let's look at the following code:

var t1 = new Teacher();
var t2 = new Teacher();
Teacher.prototype.name = "C";
t1.sayHi();//Hi, I'm C and I'm 22 years old!
t2.sayHi();//Hi, I'm C and I'm 22 years old!

In the above code, we can see that when the properties or methods in the prototype are changed, the properties and methods of all subclass instances will also be changed, which is another disadvantage of prototype inheritance: all subclasses share the same prototype object.

Here we are talking about prototypes. I wrote an essay about prototypes a long time ago, but it may be a little vague. My understanding now is different from that time. I will write another essay about prototypes later. (I'll attach the link when it's done)

Constructor inheritance

//Constructor inherits function Teacher (name, age) {
    Person.call(this, name, age);
}

var t1 = new Teacher('B', 22);
var t2 = new Teacher('C', 30);
console.log(t1.name);//B
console.log(t2.name);//C
console.log(t1 instanceof Person); //false
console.log(t1 instanceof Teacher);//true
t1.sayHi(); //TypeError: t1.sayHi is not a function
t2.sayHi(); //TypeError: t1.sayHi is not a function

advantage

Compared with prototype inheritance, constructor inheritance solves the problem of all subclass instances sharing a unified prototype. It can also pass parameters to the parent class constructor, and we can call multiple parent class constructors in the subclass constructor to achieve the so-called multiple inheritance (here multiple inheritance means that the subclass calls the parent class constructor through methods such as call and apply to make it have the properties and methods of the parent class, but there is only one prototype for a function object in js, so we can't actually reflect multiple inheritance through the form of prototype chain)

shortcoming

From the above code, we can see that the created instance is only an instance of the subclass, not an instance of the parent class, which cannot intuitively reflect inheritance. This inheritance method cannot inherit the properties and methods on the prototype of the parent class.

Combinatorial inheritance

//Combined inheritance function Teacher (name, age) {
    Person.call(this, name, age);
}

Teacher.prototype = new Person();
Teacher.prototype.constructor = Teacher;


var t1 = new Teacher('B', 22);
var t2 = new Teacher('C', 30);
Teacher.prototype.name = "D";
console.log(t1.name);//B
console.log(t2.name);//C
t1.sayHi();//Hi, I'm B and I'm 22 years old!
t2.sayHi();//Hi, I'm C and I'm 30 years old!
console.log(t1 instanceof Person);//true
console.log(t1 instanceof Teacher);//true

Combinatorial inheritance combines the advantages of prototype inheritance and constructor inheritance and solves some of the shortcomings of the two methods. However, we will find that every time we create a subclass instance, we will create an instance of the parent class. Although the parent class instance is not the same instance (the memory address is different), their properties and methods are exactly the same. Therefore, we improve it through the following (parasitic combination inheritance) method to avoid unnecessary instance construction.

Parasitic Compositional Inheritance

//parasitic combination inheritance function Teacher (name, age) {
    Person.call(this, name, age);
}

Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;


var t1 = new Teacher('B', 22);
var t2 = new Teacher('C', 30);
Teacher.prototype.name = "D";
console.log(t1.name);//B
console.log(t2.name);//C
t1.sayHi();//Hi, I'm B and I'm 22 years old!  
t2.sayHi();//Hi, I'm C and I'm 30 years old!
console.log(t1 instanceof Person);//true
console.log(t1 instanceof Teacher);//true 

The above method solves the problem that we create a parent class instance without creating a subclass instance. This is also the most commonly used js inheritance method. If we use Babel to convert the class inheritance in ES6 into ES5 code, we will find that parasitic combination inheritance is used.

Summarize

This concludes this article about native Javascript inheritance methods and their advantages and disadvantages. For more information about native Javascript inheritance methods, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!