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 the child's prototype chain point to the parent will be equal to the completion of 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 the prototype chain for inheritance, you should be aware of the following issues:
You cannot assign a value to the prototype chain again after you have set up the prototype chain.
Be sure to join or overwrite the method after the prototype chain is assigned
*/



The disadvantages of using the prototype chain inheritance are:
1. The constructor of the parent class cannot be called from the subclass.
2. Assume that a reference type exists in the parent class. This reference type is added to the prototype of the subclass. If an object changes this reference, the reference to the other object changes at the same time

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 will change to the end of the inheritance
  parent.call (this);  
  // Parent (); The invocation of this method is simply the completion of the function call. Inheriting
}
var c1 = new Child () is not possible at all;
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, for example:
--------------------------------- ---------------------------------------------
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 way to pass the constructor parameters of a class to the parent class
    * There is a problem:
    *      1. Because of the type of forgery used. Not finished. The child's prototype points to the parent, so the say method does not exist for child
    * Resolution:
    *      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 that takes up space. Therefore, it should not be used to implement inheritance in a forged way alone.
    *     So we're going to use a combination of ways to solve the 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 grouping is that properties are implemented in a forged manner. Methods are implemented by means of prototype chains.

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 starting at CSDN site:http://blog.csdn.net/magneto7/article/details/25010555

JS: Deep inheritance

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.