Advantages and disadvantages of various inheritance methods in JavaScript

There are many ways to implement inheritance in JavaScript, typically through the prototype chain and constructor functions. The following analysis of various implementation methods to summarize their advantages and disadvantages.

A prototype inheritance

Let Super = Functioin (name) {THIS.name = name;This.setname =(NewName) + = {THIS.name = name; };This.getname =() = {ReturnTHIS.name; }}Let Sub =functionsex) {this.sex = sex;} Sub.prototype = new Super ( ' Eric '); //by altering the prototype object to implement inheritance let sub1 = new Sub (  ' male ') Sub2 = new Sub ( ' female '); Sub1.setname ( "Ada"); //If you pass the sub1.name== ' Ada ', you cannot reach the goal because there is no Name attribute on the Sub1 object, // This is equivalent to adding a new property to the object instead of modifying the inherited Name property. console.log (sub2.name); //Ada, it can be seen that this sub2 name will also be modified console.log (sub1.getname = = = Sub2.getname) //True, multiplexed method         

Advantage: The method of the parent class (GetName) has been reused.

Disadvantage: The property of the parent class (name) is also reusable, that is, the subclass instance does not have its own properties.

Implementing inheritance with two constructors

Let Super =functionName) {THIS.name = name;This.getname =() = {Returnthis.name;} let Sub = function (sex,name" {super.call (this,name); //Call the parent class method to add properties to the subclass instance this.sex = sex;} let sub1 = new Sub ( ' male ', new Sub ( ' female ',  ' Ada '; //Eric, the properties of the instance do not affect each other console.log (sub1.getname = = = Sub2.getname); //false, the visible method is not multiplexed            

Advantage: Each instance of a subclass has its own attribute (name) and does not affect each other.

Disadvantage: However, this attribute is not required when inheriting the parent class method and does not implement the reuse of the parent class method.

Three-Combination inheritance

Let Super =functionName) {THIS.name = name;} Super.prototype = {Constructor:super,//maintain the integrity of constructors and prototype objects getName () {return this.name;} let Sub = function (sex) {Super.call (this, ' Eric '); //inherits the parent class property this.sex = sex;} Sub.prototype = new Super ( ' Eric '); //inherits the parent class method Sub.prototype.constructor = Sub; let sub1 = new Sub ( ' male '), Sub2 = Span class= "Hljs-keyword" >new Sub ( ' female ');  Can be verified in the above two methods, the method of reusing the parent class, the instance is not reused, to achieve the purpose of           

Advantages: Inherit the advantages of the above two methods, discard the shortcomings, reuse the method, the subclass has its own properties.

disadvantage: because the parent class constructor is executed two times, the child class's prototype object (Sub.prototype) also has an instance property of the parent class, and these properties are overwritten with the properties of the class instance (SUB1,SUB2), and there is a memory waste.

Four parasitic combined inheritance

let Super = function (name) {this.name = name;} Super.prototype = {constructor:super, GetName () {return this.name; }}let Sub = function (sex,name) {Super.call (this,name); this.sex = sex;} The disadvantage of //combination inheritance is that the parent class constructor is called when inheriting the parent class method, resulting in a memory waste, // Now just solve the problem and it's perfect. That when reusing the parent class method, //use Object.create method can also achieve the purpose, did not call the parent class constructor, problem resolution. Sub.prototype = object.create (Super.prototype); Sub.prototype.constructor = Sub;             

Class in the five ES6

ClassSuper () {Constructor (props = {Name:' Eric '}) {THIS.name = Props.name; } setName (name) {THIS.name = name; } getName () {ReturnTHIS.name; }}class sub extends super {constructor (props) {super (props = {sex:  ' male '}); //create instance, inherit parent class properties and methods this.sex = Props.sex;}} let sub1 = new Sub ({name: sex:  ' Male '})  Let sub2 = new Sub ({name:  ' Eric ', sex:  ' female '})        

Advantages and disadvantages of various inheritance methods in JavaScript (RPM)