JS Inheritance Mode

Most OO languages support two types of inheritance: interface inheritance and implementation inheritance, and ECMAScript cannot implement interface inheritance, ECMAScript only supports implementation of inheritance, and its implementation is mainly based on the prototype chain to achieve. 1. Basic idea of prototype chain: Use the prototype to let one reference type inherit the properties and methods of another reference type. Constructors, prototypes, relationships between instances: each constructor has a prototype object, and the prototype object contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object. Prototype chain Implementation Inheritance Example:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function Supertype () { This.property = true; } SuperType.prototype.getSuperValue = function () { return this.property; } Function subtype () { This.property = false; } Inherited the supertype. Subtype.prototype = new Supertype (); SubType.prototype.getSubValue = function () { return this.property; } var instance = new Subtype (); Console.log (Instance.getsupervalue ());//true

2. Borrow the basic idea of a constructor: Call the superclass constructor inside the subtype constructor, and you can execute the constructor on the newly created object by using the Invoke () and apply () methods. Example:

1 2 3 4 5 6 7 8 9 10 11

function Supertype () { This.colors = ["Red", "Blue", "green"]; } Function subtype () { Supertype.call (this);//Inherit Supertype } var Instance1 = new subtype (); Instance1.colors.push ("Black"); Console.log (instance1.colors);//"Red", "Blue", "green", "black" var instance2 = new subtype (); Console.log (instance2.colors);//"Red", "Blue", "green"

3. The basic idea of combinatorial inheritance is to combine the prototype chain and the technique of borrowing the constructors together, thus exerting a succession pattern of the two. Example:

1 2 3 4 5 6 7 8 9 Ten All 19 + ( ) + -

function supertype (name) { THIS.name = name; This.colors = ["Red", "Blue", "green"]; } SuperType.prototype.sayName = function () { Console.log (this.name); } Function Subtype (name, age) { Supertype.call (this,name);//inheritance Property This.age = age; } //Inheritance method Subtype.prototype = new Supertype (); Subtype.prototype.constructor = subtype; Subtype.prototype.sayAge = function () { Console.log (this.age); } var Instance1 = new Subtype ("Evanchen", 18); Instance1.colors.push ("Black"); Consol.log (instance1.colors);//"Red", "Blue", "green", "Black" Instance1.sayname ();//"Evanchen" Instance1.sayage ();//18 var instance2 = new Subtype ("EvanChen666"); Console.log (instance2.colors);//"Red", "Blue", "Green" Instance2.sayname ();//"EvanChen666" Instance2.sayage ();//20

4. Prototype Inheritance basic idea: with prototypes, you can create new objects based on existing objects without having to create custom types. The idea of archetypal inheritance can be explained by the following functions:

1 2 3 4 5

function Object (o) { function F () {} F.prototype = O; return new F (); }

Example:

1 2 3 4 5 6 7 8 9 10 11

var person = { Name: "Evanchen", friends:["Shelby", "Court", "Van"]; }; var Anotherperson = object (person); Anotherperson.name = "Greg"; AnotherPerson.friends.push ("Rob"); var Yetanotherperson = object (person); Yetanotherperson.name = "Linda"; YetAnotherPerson.friends.push ("Barbie"); Console.log (person.friends);//"Shelby", "Court", "Van", "Rob", "Barbie"

ECMASCRIPT5 normalized the prototype inheritance by adding the Object.create () method, which receives two parameters: an object used as a prototype for a new object and an object that defines additional properties as a new object.

1 2 3 4 5 6 7 8 9 10 11

var person = { Name: "Evanchen", friends:["Shelby", "Court", "Van"]; }; var Anotherperson = object.create (person); Anotherperson.name = "Greg"; AnotherPerson.friends.push ("Rob"); var Yetanotherperson = object.create (person); Yetanotherperson.name = "Linda"; YetAnotherPerson.friends.push ("Barbie"); Console.log (person.friends);//"Shelby", "Court", "Van", "Rob", "Barbie"

5. The basic idea of parasitic inheritance: Create a function that encapsulates the inheritance process, which in some way enhances the object, and then returns the object as if it were actually doing all the work. Example:

1 2 3 4 5 6 7 8 9 10 11 12 13

function Createanother (original) { var Clone = Object (original); Clone.sayhi = function () { Alert ("HI"); }; return clone; } var person = { Name: "Evanchen", friends:["Shelby", "Court", "Van"]; }; var Anotherperson = Createanother (person); Anotherperson.sayhi ();///"HI"

6. Parasitic combined inheritance basic idea: by borrowing functions to inherit attributes, the basic model of inheriting the method through the compositing form of the prototype chain is as follows:

1 2 3 4 5

function Inheritproperty (subtype, supertype) { var prototype = object (supertype.prototype);//Create Object Prototype.constructor = subtype;//Enhanced Object Subtype.prototype = prototype;//The specified object }

Example:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function Supertype (name) { THIS.name = name; This.colors = ["Red", "Blue", "green"]; } SuperType.prototype.sayName = function () { alert (this.name); }; Function subtype (name,age) { Supertype.call (This,name); This.age = age; } Inheritproperty (Subtype,supertype); SubType.prototype.sayAge = function () { alert (this.age); }

The above content to introduce you to the implementation of JavaScript six ways to inherit, I hope to help you! In this paper, we describe 5 ways of JS implementation inheritance. Share to everyone for your reference, as follows: 1, inherit the first way: Object posing

1 2 3 4 5 6 7 8 9 One + , , , , , , , , and function Parent ( username) { This.username = username; This.hello = function () { alert (this.username); } } Function Child (Username,password) { //To implement inheritance by appending the properties and methods of the parent to child through the following 3-line implementation // Step One: This.method is a temporary property and points to the object that the parent points to, //Second step: Execute the This.method method, that is, execute the object function that the parent points to // Step three: Destroy the This.method property, which means that at this point, child has all the properties and methods of the parent This.method = parent; This.method (username);//The most critical line Delete This.method; This.password = password; This.world = function () { alert (This.password); } } var parent = new Parent ("Zhangsan"); var child = new Child ("Lisi", "123456"); Parent.hello (); Child.hello (); Child.world ();

2, Inherit the second way: Call () method call method is a method in a function class The value of the first parameter of the  call method is assigned to the second parameter of the This call method that appears in the class (that is, the method) begins to assign a value to the class (that is, the method) The parameters that are accepted

1 2 3 4 5 6 7 8 9 One , , , , , , , , , , function test ( STR) { Alert (this.name + "+ str); } var object = new Object (); Object.name = "Zhangsan"; Test.call (object, "Langsin");//At this point, the first parameter value object is passed to this in the test class (that is, the method), and the second parameter "Langsin" is assigned to the test class (that is, the method) of STR function Parent (username) { This.username = username; This.hello = function () { alert (this.username); } } Function Child (Username,password) { Parent.call (this,username); This.password = password; This.world = function () { alert (This.password); } } var parent = new Parent ("Zhangsan"); var child = new Child ("Lisi", "123456"); Parent.hello (); Child.hello (); Child.world ();

3, the third way of inheritance: Apply () method The Apply method accepts 2 parameters, a, the first parameter is the same as the first parameter of the call method, that is, the assignment to the class (that is, the method) appears in the This B, the second parameter is an array type, each element of the arrays is assigned to the class (i.e. method ) The parameters that are accepted

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function Parent (username) { This.username = Username; This.hello = function () { alert (this.username); } } function Child (Username,password) { Parent.apply (this,new Array (username)); This.password = password; This.world = function () { alert (This.password); } } var parent = new Parent ("Zhangsan"); var child = new Child ("Lisi", "123456"); Parent.hello (); Child.hello (); Child.world ();

4, inheritance of the fourth way: The prototype chain, that is, the subclass by prototype all the properties and methods appended to the parent class through prototype are appended to child, thus implementing the inheritance

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function person () { } Person.prototype.hello = "Hello"; Person.prototype.sayHello = function () { alert (This.hello); } function Child () { } Child.prototype = new Person (),//The function of this line is to append all the properties and methods appended by prototype to child in the parent, thus implementing the inheritance Child.prototype.world = "World"; Child.prototype.sayWorld = function () { alert (This.world); } var C = new Child (); C.sayhello (); C.sayworld ();

5, the fifth way of inheritance: Mixed mode of call mode, prototype chain mode

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function Parent (hello) { This.hello = Hello; } Parent.prototype.sayHello = function () { alert (This.hello); } function Child (Hello,world) { Parent.call (This,hello);//Inherit the properties of the parent class. This.world = world;//Added some properties } Child.prototype = new parent ();//Inherit the method of the parent class. Child.prototype.sayWorld = function () {//New method alert (This.world); } var C = new Child ("Zhangsan", "Lisi"); C.sayhello (); C.sayworld ();

It is hoped that this article will help you with JavaScript programming.

JS Inheritance Mode