JavaScript Inheritance Collation

Often asked about the inheritance of JS and the prototype chain (prototype chain) knowledge, often read after all quickly forgotten, now tidy up their own understanding of the situation, in order to deepen understanding.

　　

First, JS object

JS inside are objects, there is no "class" concept, we use the new operation to generate an instance object from the prototype object , for example:

function Parent (name) {

THIS.name = name;

This.get = function () {

return this.name;

}

}

For this constructor (note that the parent is not a class, just a constructor, this point to the newly created instance ) uses new to generate an instance of a human object,

var p1 = new Parent (' P1 ');

Console.log (P1.name); P1

Ii. Disadvantages of NEW:

　　properties and methods cannot be shared , when new two objects are generated, two instance objects are built, their properties are independent and do not affect each other:

var P2 = new Parent (' P2 ');

Console.log (p2.name);//p2

Console.log (p1.name);//p1

Each instance object has its own copy of properties and methods, not only data sharing, but also wasting resources.

Third, prototype properties

This property contains an object in which all instance objects need to share properties and methods, and those that do not need to be shared are placed inside the constructor.

Once the instance object is created, the properties and methods of the prototype object are automatically referenced. the properties and methods of an instance object are divided into two types, one independent (in the constructor) and one for the shared reference (in the prototype chain);

　　

Iv. Methods of succession

After understanding the construction of JS object, we summarize the different inheritance methods.

1. Constructor inheritance method (implemented with Apply&call)

A child object is implemented using the parent of the above as the parental object

var child = function () {

Parent.apply (this,arguments);

This.sex = "male";

}

Parent.prototype.log = function () {

Console.log (THIS.name)

}

　　　　

var C1 = new Child (' C1 ');

C1.name; ' C1 '

c1.log;//undefined

Alert (OB instanceof a);//False

This method inherits only the properties and methods in the constructor and can implement multiple inheritance, but the properties and methods in the prototype chain cannot be inherited , and the instance cannot be validated with instanceof.

2. Prototype Chain inheritance

Direct the prototype of the child object to an instance of the parent object, so that the parent object's constructors and properties and methods in the prototype chain are inherited to the child object's prototype chain , for example:

var ChildPro1 = function () {this.sex = "female"};

Childpro1.prototype = new Parent ();

ChildPro1.prototype.constructor = childpro1;//points to its own constructor

var CP1 = new ChildPro1 ();

ChildPro1; function () {this.sex = "female"}

childpro1.prototype;//parent {name:undefined,get:function, log:function}

cp1.name;//undefined, no value is assigned in the constructor

Cp1.get;//function () {return this.name}

Cp1.log;//function () {console.log (this.name)}

　　

This inheritance can inherit two of the parent object's properties and methods, but each inheritance will be a new instance of the parent object, in order to save memory, in another way, directly inherit prototype

var ChildPro2 = function () {};

Childpro2.prototype = Parent.prototype;

ChildPro2.prototype.construnctor = ChildPro2;  

　　

var cp2 = new ChildPro2 ();

cp2.get;//undefined

Cp2.log;//function () {Console.log (this.name)}

Compared to the previous method, the advantage of doing this is that it is more efficient (without having to execute and establish an instance of the parent) and saves memory. The disadvantage is that Childpro2.prototype and Parent.prototype now point to the same object , so any changes to the Childpro2.prototype will be reflected in the Parent.prototype.

Use an empty object as an intermediary to implement:

function Extend (child,parent) { var F = function () {}; Child.prototype = new F (); Child.prototype.constructor =child; }

F is an empty object, so it hardly accounts for memory. At this point, modifying the child's prototype object will not affect the parent's prototype object.

If you want to inherit methods and properties from the parent object constructor at this time, you can use apply to inherit from the child object's constructor, that is, mixed inheritance .

var childall = function () {parent.apply (this,arguments)};

Extend (childall,parent);

　　

var CA1 = new Childall (' CA1 ');

Ca1.name;//ca1

Ca1.get ();//CA1

Ca1.log ();//CA1

　

　　

3. Copy Inheritance Law

The above is implemented using the prototype method to implement inheritance. In fact, since the child object will have the parent object's properties and methods, we directly adopt the "copy" method can also achieve the effect. Simply put, if you copy all the properties and methods of the parent object into the sub-object, can you also implement inheritance?
　　

function extendcopy (Child, Parent) {
var p = parent.prototype;
var c = Child.prototype;
for (var i in P) {
C[i] = P[i];
}}
This function is to copy the attributes from the parent object's prototype object to the prototype object of the child object. One by one
Shallow copy

　　

function Lightcopy (p) {
var c = {};
for (var i in P) {
C[i] = P[i];
}//c.uber = P;
return C;
}
Deep copy
　　

function Deepcopy (p, c) {
var c = C | | {};
for (var i in P) {
if (typeof p[i] = = = ' object ') {
C[i] = (P[i].constructor = = = = Array)? [] : {};
Deepcopy (P[i], c[i]);
} else {
C[i] = P[i];
}
}
return c;}

　　

JavaScript Inheritance Collation