JavaScript inheritance and Usage Analysis

Source: Internet
Author: User

Before learning about javascript inheritance, you must first understand the following concepts:
Parent class: inherited class
Subclass: inherited class
Superclass: that is, the parent class
Abstract class: a class that is generally not instantiated. It is used to inherit other classes.
Base Class: provided to other classes that can be inherited
Derived class: Class inherited from the base class

There are five methods to inherit javascript objects:
1. Object impersonating
2. call () method
3. apply ()
4. prototype chain
5. hybrid mode

A. Object impersonating
The so-called object impersonating is that the new class impersonates the old class (the old class must adopt the constructor method) to achieve the purpose of inheritance.
Eg.1
Copy codeThe Code is as follows:
Function people (name, sex, age) {// use the constructor Method
This. name = name;
This. sex = sex;
This. age = age;
This. say = function (){
Alert ("My name is" + this. name );
};

This. doing = function (){
Alert ("I am speaking ");
};
}
Var Marry = new people ("Marry", "Woman", "23 ");
Marry. say ();
Marry. doing ();

Function white_people (name, sex, age ){
This. inherit = people;
This. inherit (name, sex, age );
Delete this. inherit;

This. area = function (){
Alert ("I am in Europe ");
}
}
Var Tom = new white_people ("Tom", "man", "21 ");
Tom. say ();
Tom. area ();
Alert (Tom. age );

In the above example, people is the base class used for white_people. Remember that this format is used for object impersonating for inheritance purposes.
This. inherit = people; // impersonate
This. inherit (name, sex, age); // inherit
Delete this. inherit; // delete inheritance
All new attributes and new methods must be deleted and defined after inheritance, so as to avoid overwriting the relevant attributes and methods of the parent class.
In addition, object impersonating supports multi-inheritance.
Eg.2
Copy codeThe Code is as follows:
Function worker (pay, work ){
This. pay = pay;
This. work = work;
}
Function city_worker (name, sex, age, pay, work ){
This. inherit = people;
This. inherit (name, sex, age );
Delete this. inherit;

This. inherit = worker;
This. inherit (pay, work );
Delete this. inherit;
}

Var Jerry = new city_worker ("Jerry", "man", "21", "$1000", "coder ");
Jerry. say ();
Alert (Jerry. work );

There is a deficiency in object impersonating: when multiple inheritance mechanisms are implemented, if the base class has the same attributes or methods, it will inherit from the following classes.

B. call () method
This is just a function impersonating the encapsulated object. In this way, we no longer need to write the "classic" sentence, but use the following sentence instead:
Base class. call (object, parameter list)
Eg.1
Copy codeThe Code is as follows:
Function farmer (name, sex, age, pay, work ){
People. call (this, name, sex, age );
Worker. call (this, pay, work );
}

Var Nicolas = new farmer ("Nicolas", "man", "27", "$3000", "irrigator ");
Nicolas. say ();
Alert (Nicolas. pay );

Similarly, call () has a small problem of attributes and methods with the same name.

C. apply ()
Like call (). apply () is also an encapsulation function of object impersonating. Its format is:
Base class. apply (object, parameter array );
Eg.1
Copy codeThe Code is as follows:
Function white_collar (name, sex, age, pay, work ){
People. apply (this, new Array (name, sex, age ));
Worker. apply (this, [pay, work]);
}

Var Jiessie = new white_collar ("Jiessie", "woman", "26", "$2500", "editor ");
Jiessie. say ();
Alert (Jiessie. work );

Similarly, apply () has the same name attribute and method.

D. prototype chain
The above three methods use constructor inheritance, corresponding to the ground, and also have prototype function inheritance: prototype chain.
Eg.1
Copy codeThe Code is as follows:
Function blue_collar (){
}
Blue_collar.prototype.name = "Jean ";
Blue_collar.prototype.age = "33 ";
Blue_collar.prototype.say = function (){
Alert ("my name is" + this. name );
};

Function city_blue_collar (){
}
City_blue_collar.prototype = new blue_collar ();

Var jj = new city_blue_collar;
Jj. say ();

Prototype chain also has the disadvantages of prototype chain: parameter cannot be passed. In addition, prototype chain does not support multi-inheritance because

E. hybrid mode
Use constructor to write the class attributes, and use call () or apply () to inherit the attributes ()
The method written in prototype mode, and the method inheritance uses the prototype chain.
Eg.1
Copy codeThe Code is as follows:
Function beauty (name, age ){
This. name = name;
This. age = age;
}
Beauty. prototype. say = function (){
Alert ("female name" + this. name );
};

Function china_beauty (name, age, area ){
Beauty. call (this, name, age );
This. area = area;
}
China_beauty.prototype = new beauty ();
China_beauty.prototype.from = function (){
Alert ("I am from" + this. area );
};

Var diaochan = new china_beauty ("mink Chan", "16", "linxiao ");
Diaochan. say ();
Diaochan. from ();
Alert (diaochan. age );

Related Article

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.