6 ways to inherit in JS

OO language supports two kinds of inheritance: interface inheritance and implementation inheritance, JS function has no method signature, so it only supports implementing inheritance

1. Prototype chain inheritance

Implementation idea: The prototype object is also an object, the prototype of the prototype object is pointed to the prototype of the parent class (the parent object's instance is assigned to the prototype of the child object ), the inheritance can be implemented

<script type= "Text/javascript" >//prototype chain implementation inheritance        //Parent Class        functionparents () { This. Surname= ' King ';  This. getsurname=function() {Console.log ( This. surname); }        }        //sub-class        functionChild () {}//To assign an instance of a parent class to a prototype of a subclass, implementing inheritanceChild.prototype=Newparents (); varC=NewChild ();    C.getsurname (); </script>

Test results:

2. Borrowing constructor inheritance

Realization idea: Use Apply or call () to execute the constructor of the parent class in the constructor of the subclass

<script type= "Text/javascript" >//borrowing Constructors        functionparents () { This. Surname= ' Lee ';  This. getsurname=function() {Console.log ( This. surname);        }        }; functionChild () {//executes the constructor of the parent classParents.call ( This);        }; varC=NewChild (); Console.log (c);</script>

Test results:

3. Combining inheritance

Implementation idea: Using the prototype chain to implement the inheritance of the prototype properties and methods, and through the constructor to implement the inheritance of the instance properties

<script type= "Text/javascript" >//Combining Inheritance        functionparents (surname) { This. Surname= ' Lee '; } Parents.prototype.getSurname=function() {Console.log ( This. surname); }        functionChild (age) {//Inheritance PropertiesParents.call ( This); //own unique attributes             This. age=Age }//Inheritance MethodChild.prototype=Newparents (); Child.prototype.constructor=Child ; Child.prototype.getAge=function() {Console.log ( This. Age); }        varp=Newparents (); Console.log (P)varC=NewChild (12); Console.log (c)</script>

Test results:

4. Prototype-Type Inheritance:

Realization idea: By constructing a function, the argument is the parent object, a new object is created inside the function, the parent object is assigned to the prototype of the new object, and the new object is returned.

<script type= "Text/javascript" >//prototype Inheritance        //Way One        //passing in an object        //function Extend (o) {        //function F () {};        ////Assign object o to the prototype of F        //f.prototype=o;        ////Returns an instance of an F object        //return new F ();        // }        //var parents={        //surname: ' Lee ',        //getsurname:function () {Console.log (this.surname)}        // }        ////Call the Extend function to implement inheritance        //var child=extend (parents);        //child.getsurname ();        //Mode two        varparents={surname:Li, Getsurname:function() {Console.log ( This. surname); }        }        varChild=object.create (parents); //defining child object private properties and methodschild.age=11; Child.getage=function() {Console.log ( This. Age);        } child.getsurname (); Child.getage ();</script>

5. Parasitic inheritance

Realization idea: Create a function that encapsulates the inheritance process, which enhances the object internally in some way (creating a child object Private method), and finally returns the object as if it did all the work.

<script type= "Text/javascript" >//Parasitic Inheritance        functionCreate (original) {//calling a function to create an object            varClone=Object.create (original); //to enhance an object in some way (creating a private method of a child object)Clone.sayhi=function() {Console.log (' Hello '); }            returnclone; }        varparents={surname:Li        }        varChild=Create (parents); Console.log (Child) Child.sayhi ();</script>

6. Parasitic combined inheritance

Realization idea: Inheriting a property by borrowing a constructor, inheriting the method through the compositing form of the prototype chain (using parasitic inheritance to inherit the prototype of the parent class, and then assigning the result to the child class prototype).

<script type= "Text/javascript" >//Parasitic combined inheritance        functionInheritproto (parents,child) {varo=object.create (Parents.prototype); O.constructor=Child ; Child.prototype=o; }        //Parent class Constructors        functionparents (surname) { This. surname=surname; } Parents.prototype.getSurname=function() {Console.log ( This. surname); }        //sub-class constructors        functionChild (surname,age) {Parents.call ( This, surname);  This. age=Age ;        } inheritproto (Parents,child); Child.prototype.getAge=function() {Console.log ( This. Age); }</script>

6 ways to inherit in JS