Js: In-depth inheritance

/**
* Js implementation inheritance:
* 1. Prototype-based link
* 2. Based on forgery
* 3. Combination-based approach
*/
1. Prototype-Based Chain
Function Parent (){
This. pv = "parent ";
}
Parent. prototype. showParentValue = function (){
Console. log (this. pv );
}

Function Child (){
This. cv = "child ";
}
// Let the Child prototype chain point to the Parent, which is equivalent to completing an inheritance
Child. prototype = new Parent ();
Child. prototype. showChildValue = function (){
Console. log (this. cv );
}

Var c = new Child ();
C. showParentValue (); // parent
C. showChildValue (); // child

/**
* When using prototype chain for inheritance, pay attention to the following issues:
* 1. You cannot assign a new value to the prototype chain after the prototype chain is set.
* 2. You must assign a value to the prototype chain before adding or overwriting methods.
*/
 
 
 
Disadvantages of using prototype chain inheritance are:
1. the constructor of the parent class cannot be called from the subclass,
2. If the parent class has a reference type, the reference type will be added to the prototype of the subclass. If an object modifies this reference, the references of other objects will be modified at the same time.

Therefore, the prototype chain is generally not used to implement inheritance.

Ii. Forgery-based methods
Function Parent (){
This. color = ["red", "blue"];
}

Function Child (){
// This in Child should be the object pointing to Child
// When the Parent method is called, and this points to Child, it is equal to: this. color = ["red", "blue"];
// This means that the Child has the this. color attribute, so that the inheritance is completed.
Parent. call (this );
// Parent (); this call method only completes the function call and cannot implement inheritance.
}
Var c1 = new Child ();
C1.color. push = "green ";
Console. log (c1.color); // red, blue, green
Var c2 = new Child ();
Console. log (c2.color); // red, blue

// But this is still not good, as shown below:
------------------------------------------------------------------------------
Function Parent (name ){
This. color = ["red", "blue"];
This. name = name;

/* This. say = function (){
Console. log (this. name );
}*/
}
Parent. prototype. say = function (){
Console. log (this. name );
}

Function Child (name, age ){
/**
* Using the forged method, you can pass the constructor parameters of the subclass to the parent class.
* Problems:
* 1. Because the spoofing method is used, the Child's prototype is not directed to the Parent, so the say method does not exist for the Child.
* Solution:
* Put this method in Parent and use this to create
* However, this causes the following problems:
* Each Child object has a say, which occupies space. Therefore, you should not use a forged method to implement inheritance.
* Therefore, we need to use a combination to solve this problem.
*/
This. age = age;
Parent. call (this, name );
}
Var c1 = new Child ("Leon", 13 );
Var c2 = new Child ("Ada", 22 );
Console. log (c1.name + "," + c1.age );
Console. log (c2.name + "," + c2.age );

Iii. Combination-based approach
The combination method is: property is implemented through forgery, and the method is implemented through prototype chain.

Function Parent (name ){
This. color = ["red", "blue"];
This. name = name;
}
Parent. prototype. ps = function (){
Console. log (this. name + ", [" + this. color + "]");
}

Function Child (name, age ){
This. age = age;
Parent. call (this, name );
}
Child. prototype = new Parent ();
Child. prototype. say = function (){
Console. log (this. name + "," + this. age + ", [" + this. color + "]");
}

Var c1 = new Child ("Leon", 22 );
C1.color. push ("green ");
C1.say (); // Leon, 22, [red, blue, green]
C1.ps (); // Leon, [red, blue, green]
Var c2 = new Child ("Ada", 23 );
C2.say (); // Ada, 23, [red, blue]
C2.ps (); // Ada, [red, blue]

 

 

Original article reprinted, please indicate the source, this article first in the csdn Website: http://blog.csdn.net/magneto7/article/details/25010555