Six JavaScript Inheritance Modes, Advantages and Disadvantages

Friendship Tip: To better understand how JS inherits, you need to understand constructors, prototype objects, instantiated objects, prototype chains, and so on
First: prototype chain inheritance
Inherit using the characteristics of the prototype chain

function Parent(){
    this.name = 'web Front end';
    this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
    console.log(this.name);
}
function Son(){};
Son.prototype = new Parent();
son1 = new Son();
son1.Say();

The above examples illustrate:
1. Create a constructor called Parent, temporarily referred to as a parent constructor, with two attributes name d, type
(2) Set the Say method with the properties of the Parent constructor (that is, the prototype object), where Parent has two properties and one method
(3) Create a constructor called Son, temporarily referred to as a sub-constructor.
(4) Setting Son's attribute (that is, prototype object) value to be an instance object of parent constructor, that is, child constructor Son inherits parent constructor Parent, Son also has two attributes and one method
The Son constructor is instantiated, and the result is assigned to the variable son1, that is, son1 is the instantiated object, which also has two attributes and one method
Say method that outputs son1, the result is "web front end"
Benefits: Inheritance is possible
Disadvantages:
1. Because Son.prototype inherits the Parent instantiated object, all Son instantiated objects share the same properties and methods of the prototype object.The code is as follows:

son1 = new Son();
son2 = new Son();
son1.type.push('VUE');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','VUE']

The result son1, son2 are ['JS','HTML','CSS','VUE']
(2) Son constructor instantiation object cannot pass parameters


Second: Constructor Inheritance
Inherit through the constructor call method, looking directly at the code:

function Parent(){
    this.name = 'web Front end';
    this.type = ['JS','HTML','CSS'];
}
function Son(){
    Parent.call(this);
}
son1 = new Son();
son1.type.push('VUE');
console.log(son1.type);//['JS','HTML','CSS','VUE']
son2 = new Son();
console.log(son2.type);//['JS','HTML','CSS']

The above examples illustrate:
1. Create parent constructor Parent with name and type attributes
(2) Create a child constructor Son, which calls the parent constructor Parent through the call method to achieve inheritance
(3) Create two instantiated objects, son1 and son2, of the constructor Son respectively. There is no new element added to the type attribute of son1, and the result is different, indicating that the constructor Son is independent.
Advantage:
(1) Implement the independence of instantiated objects;
(2) You can also add parameters to instantiated objects

function Parent(name){
    this.name = name;
}
function Son(name){
    Parent.call(this,name);
}
son1 = new Son('JS');
console.log(son1);//JS
son2 = new Son('HTML');
console.log(son2);//HTML

Disadvantages:
(1) Methods are defined in constructors, and methods must be created once for each instantiation of an object. Function reuse is almost impossible
(2) The call method only calls the properties and methods of the parent constructor, not the methods of the parent constructor prototype object.

Third: Combinatorial Inheritance
Combine the advantages of prototype chain inheritance and constructor inheritance, or look at the code:

function Parent(name){
    this.name = name;
    this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
    console.log(this.name);
}
function Son(name){
    Parent.call(this,name);
}
Son.prototype = new Parent();
son1 = new Son('Zhang San');
son2 = new Son('Li Si');
son1.type.push('VUE');
son2.type.push('PHP');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','PHP']
son1.Say();//Zhang San
son2.Say();//Li Si

The above examples illustrate:
1. Create a constructor called Parent with two attributes, name and type
(2) Set the Say method with the properties of the Parent constructor (that is, the prototype object), where Parent has two properties and one method
(3) Create a child constructor Son, which calls the parent constructor Parent through the call method to achieve inheritance
(4) The child constructor Son inherits the parent constructor Parent, where Son also has two attributes and one method
Create two instantiated objects, son1 and son2, of the constructor Son, pass different parameters, add different elements to the type attribute, and call the Say method of the prototype object
Advantage:
1. Implement inheritance of prototype object methods by using prototype chain inheritance
(2) Using constructor inheritance to inherit attributes with parameters
Combinatorial function basically satisfies the inheritance of JS, which is more common
Disadvantages:
In any case, the parent constructor is called twice: once when a child prototype is created and once inside a child constructor

Fourth: prototype inheritance
Create a function that takes a parameter as a prototype object of an object

function fun(obj) {
    function Son(){};
    Son.prototype = obj;
    return new Son();
}        
var parent = {
    name:'Zhang San'
}
var son1 = fun(parent);
var son2 = fun(parent);
console.log(son1.name);//Zhang San
console.log(son2.name);//Zhang San

The above examples illustrate:
1. Create a function fun that internally defines a constructor Son
(2) Set Son's prototype object as a parameter, which is an object to complete inheritance
(3) When Son is instantiated, an instantiated object is returned.
Advantages and disadvantages: similar to prototype chains

Fifth: Parasitic Inheritance
Enriching objects within functions on the basis of prototype inheritance

function fun(obj) {
    function Son() { };
    Son.prototype = obj;
    return new Son();
}
function JiSheng(obj) {
    var clone = fun(obj);
    clone.Say = function () {
        console.log('I'm NEW');
    }
    return clone;
}
var parent = {
    name: 'Zhang San'
}
var parent1 = JiSheng(parent);
var parent2 = JiSheng(parent);
console.log(parent2.Say==parent1.Say);// false

The above examples illustrate:
1. Encapsulate a JiSheng function on the basis of reprogramming inheritance
(2) Enhance the object returned by fun function, add Say method, and finally return
(3) Call the JiSheng function twice and assign the variables parent1 and parent2, respectively.
(4) Comparing parent1 and parent2, the result is false, achieving independence
Advantages and disadvantages: Similar to constructor inheritance, calling a function once creates a method that does not allow function reuse and is inefficient

To supplement this, ES5 has a new method, Object.create(), which encapsulates prototype inheritance.This method can take two parameters: the first is the prototype object of the new object (optional), and the second is the new object's new attribute, so the code above can also do the same:

function JiSheng(obj) {
    var clone = Object.create(obj);
    clone.Say = function () {
        console.log('I'm NEW');
    }
    return clone;
}
var parent = {
    name: 'Zhang San'
}
var parent1 = JiSheng(parent);
var parent2 = JiSheng(parent);
console.log(parent2.Say==parent1.Say);// false

Sixth species: inheritance of parasitic combinations
Take advantage of combined inheritance and parasitic inheritance
As we have already said, the disadvantage of the combinatorial inheritance method is that it calls the parent constructor twice, once while creating a child prototype and once inside a child constructor, so we only need to optimize this problem by reducing the number of calls to the parent constructor, which takes advantage of parasitic inheritance to inherit the parent constructor's prototype to create a child.Prototype.

function JiSheng(son,parent) {
    var clone = Object.create(parent.prototype);//create object
    son.prototype = clone;      //Specify Object
    clone.constructor = son;     //Enhanced Objects
}
function Parent(name){
    this.name = name;
    this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
    console.log(this.name);
}
function Son(name){
    Parent.call(this,name);
}
JiSheng(Son,Parent);
son1 = new Son('Zhang San');
son2 = new Son('Li Si');
son1.type.push('VUE');
son2.type.push('PHP');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','PHP']
son1.Say();//Zhang San
son2.Say();//Li Si

The above examples illustrate:
1. Encapsulates a function JiSheng with two parameters, parameter 1 being a child constructor and parameter 2 being a parent constructor.
(2) Using Object.create(), clone the parent constructor prototype as a copy clone
(3) prototype the copy as a child constructor
(4) Add the constructor attribute to the copy, because (3) modifying the prototype in the copy causes the copy to lose its default attribute
Advantages and disadvantages:
Combining the advantages of inheritance and the advantages of parasitic inheritance, all of which are currently used in JS inheritance

Tags: Front-end Vue Attribute PHP

Posted on Wed, 05 Feb 2020 18:05:34 -0500 by eirikol