JS inheritance-prototype chain inheritance and class inheritance-Basic Knowledge

This article will introduce JavaScript inheritance-prototype chain inheritance and class inheritance. If you have any need, what is inheritance? A: The process that others give you is inheritance.

Why inherit? A: click it.

Well, since everyone wants to get the ready-made information, they have to learn how to inherit it!

Before learning, you need to understandConstructor,Object,Prototype chain......

Two inheritance Methods Commonly Used in JS:

Prototype chain inheritance (inheritance between objects) class inheritance (inheritance between constructors)

Prototype chain inheritance:

The Code is as follows:

// Object to be inherited
Var parent = {
Name: "baba"
Say: function (){
Alert ("I am baba ");
}
}

// New object
Var child = proInherit (parent );

// Test
Alert (child. name); // "baba"
Child. say (); // "I am baba"

With the proInherit (obj) method, you can pass in the object to realize the inheritance of Object Attributes and methods. This method is not a built-in method, so you need to define it yourself. It is very simple:

The Code is as follows:

Function proInherit (obj ){
Function F (){}
F. prototype = obj;
Return new F ();
}

F () is a temporary empty constructor, and then the prototype of F () is set as the parent object, at the same time, it has all the functions of its parent object by benefiting from the _ proto _ link.

Chain diagram:

Class inheritance:

The Code is as follows:

// Parent Constructor
Function Parent (){
This. name = "baba ";
}
// Parent class Prototype Method
Parent. prototype. getName = function (){
Return this. name;
}

// Subclass Constructor
Function Child (){
This. name = "cc ";
}

// Class inheritance
ClassInherit (Parent, Child );

// Instance
Var child = new Child ();
Alert (child. getName () // "baba"

Next let's take a look at the key method of this inheritance: classInherit (Parent, Child)

The Code is as follows:

Var classInherit = (function (){
Var F = function (){}
Return function (P, C ){
F. prototype = P. prototype;
C. prototype = new F ();
C. prototype. constructor = C;
}
}());

Analyze this method:

First, create an empty constructor F () and use the _ proto _ attribute of its instance to construct the prototype chain of the parent class and subclass. It acts as a proxy to prevent C. prototype = P. prototype. This will be modified together with the parent class when the attributes or methods of the subclass are modified after the subclass is instantiated. The overall use of real-time functions and the storage of F () in the closure, to prevent the creation of a large number of empty constructors during multiple inheritance, thus reducing memory consumption. The last line means that, due to the relation of the prototype chain, the constructor of the C instance object will point to P, so you can reset it.

Chain diagram:

Although the prototype method is inherited during the instance, the attributes of the parent class cannot be inherited.Copy inheritanceIs a supplement to class inheritance.

Copy inheritance:

The Code is as follows:

// Copy inheritance
Function copyInherit (p, c ){
Var I,
ToStr = Object. prototype. toString,
Astr = "[object Array]";
C = c | {};
For (I in p ){
If (p. hasOwnProperty (I )){
If (typeof p [I] = "object "){
C [I] = toStr. call (p [I]) = astr? []: {};
C [I] = copy (p [I], c [I]);
}
Else {
C [I] = p [I];
}
}
}
Return c;
}

// Rewrite the Parent
Function Parent (){
This. name = "pp ";
This. obj = {a: 1, B: 2 };
This. arr = [1, 2]
}
// Instance
Var child = new Child ();
Var parent = new Parent ();
CopyInherit (parent, child );
Alert (child. name) // "baba"
Alert (child. arr) // 1, 2
Alert (child. obj. a) // 1

CopyInherit (p, c)

When a value is assigned to a variable, it can be divided into two methods: pass value and pass reference. When the attributes of your parent object contain the array type or object type, c [I] = toStr. call (p [I]) = astr? []: {}; This statement prevents the parent object attribute from being tampered with due to the modification of the sub-object attribute.

Summary:

Class inheritance is common because everyone is familiar with this constructor method, but the memory usage is large. The original type inheritance occupies a small amount of memory, but it is troublesome to include arrays or clone object types. Replication inheritance is simple and widely used.