JS Inheritance--prototype chain inheritance and class inheritance _ Basics

What is inheritance? A: The process of someone else's call for you is inheritance.

Why do you use inheritance? A: Pick up the ready-made chant.

Well, since we all want to pick up the ready-made, then we must learn how to inherit!

Before you know it, you need to understand the concepts of constructors , objects , prototype chains ...

JS commonly used in two ways of inheritance :

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

prototype chain inheritance :

Copy Code code as follows:

The object to inherit
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"

Using the Proinherit (obj) method, passing in the object, you can implement the object's properties and method inheritance, this method is not a built-in method, so you have to define, very simple:

Copy Code code as follows:

function Proinherit (obj) {
function F () {}
F.prototype = obj;
return new F ();
}

where F () is a temporary, empty constructor, and then the prototype of F () is set to the parent object, but at the same time it has all the functions of its father object by benefiting from the _proto_ link.

Chain diagram:

Class-Type Inheritance:

Copy Code code as follows:

Parent class constructor
function Parent () {
THIS.name = "Baba";
}
Parent-Class prototype method
Parent.prototype.getName = function () {
return this.name;
}

Child class constructor
function Child () {
THIS.name = "CC";
}

Class-Style inheritance
Classinherit (Parent, child);

Instance
var child = new Child ();
Alert (Child.getname ())//"Baba"

Now let's take a look at the key approach to inheritance: Classinherit (Parent,child)

Copy Code code 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_ property of its instance to construct a prototype chain of the parent class and subclass. acts as an agent to prevent c.prototype = P.prototype, which modifies a property or method, along with the parent class, after the subclass is instantiated. The overall use of instant functions and the storage of f () in the closure to prevent the creation of a large number of empty constructors, thereby reducing memory consumption. The last line means that because of the relationship between the prototype chain, C's instance object's constructor will point to P, so reset.

Chain diagram:

This way, although the prototype method is inherited at the instance, but the properties of the parent class cannot be inherited, the following describes a copy inheritance , which is a supplement to class inheritance.

Replication inheritance:

Copy Code code as follows:

Replication 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 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

Analysis of Copyinherit (P,C)

When a value is assigned to a variable, it is divided into two ways of passing value and referencing, when the attribute within your parent object contains an array type or an object type, c[i] = Tostr.call (p[i]) = = Astr? []: {}; This sentence prevents the parent object property from being tampered with by modifying the child object properties.

Summary :

Class inheritance is more common, because everyone is familiar with this constructor approach, but memory footprint is relatively large. Prototype inheritance, which takes up less memory, but contains arrays, or cloning of object types is cumbersome. Replication inheritance is simple and widely used.