JS: Deep inheritance

Source: Internet
Author: User

/**
* JS Implementation inheritance:
* 1. Based on the prototype chain approach
* 2. Forgery-based approach
* 3. A combination-based approach
*/
One, based on the prototype chain approach
function Parent () {
THIS.PV = "parent";
}
Parent.prototype.showParentValue = function () {
Console.log (THIS.PV);
}

function Child () {
THIS.CV = "Child";
}
Having child's prototype chain pointing to the parent 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 a prototype chain for inheritance, you should be aware of the following issues:
You cannot assign a value to the prototype chain after the prototype chain has been set.
Be sure to assign values to the prototype chain before adding or overriding methods
*/



The disadvantages of using the prototype chain inheritance are:
1. The constructor of the parent class cannot be called from the subclass.
2. If a reference type exists in the parent class, the reference type is added to the prototype of the subclass, and if an object modifies the reference, the reference to the other object is modified

Therefore, it is generally not simple to use the prototype chain to achieve inheritance.

Ii. Forgery-based approach
function Parent () {
This.color = ["Red", "Blue"];
}

function child () {
  // The This in child should be the object that points to child
  //when calling the parent method, and this points to child, which is equal to: This.color = ["Red", "Blue"];
  //is also equivalent to having the This.color attribute in the child, which also changes to the completion of the Inheritance
  parent.call (this);  
  // Parent (); This method of invocation simply completes the invocation of the function and cannot implement the inherited
}
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 very good, as follows:
----------------------------------- -------------------------------------------
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) {
  /**
     * Use a forged method to pass a constructor parameter of a class to the parent class
    * There is a problem:
    *      1. Because of the forgery used, the child's prototype will not be completed to the parent, so the say method does not exist for child
    * Solution:
    *      put this method in the parent and use this to create the
    * But this raises the previously mentioned problem:
    *      each child object will have a say, taking up space, so it should not be used in a separate way to implement inheritance.
    *     So we're going to use a combination of methods to solve this problem
    */
   This.age = age;
  parent.call (this,name);  
}
var c1 = new Child ("Leon");
var C2 = new Child ("Ada", 22);
Console.log (c1.name+ "," +c1.age ");
Console.log (c2.name+ "," +c2.age); 

Third, the combination-based approach
The way of composition is: The property is implemented by forgery, and the method is implemented by means of the 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 articles such as reproduced, please indicate the source, this article started in CSDN website: http://blog.csdn.net/magneto7/article/details/25010555

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.