[JavaScript] JavaScript implements inheritance.

Source: Internet
Author: User

For inheritance in JavaScript, there is no class-like inheritance in the backend language in JS. Therefore, the inheritance in JS is usually the prototype inheritance (prototype).

function P (name) {this.name = Name;this.say = function () {console.log (' P ');}} function S (name,id) {this.id = Id;this.eat = function () {console.log (' S ');}} S.prototype = P.prototype;var s = new S ();

There is an important problem with the above generation code:

S.prototype = P.prototype;

This code causes the prototype of the parent class to be affected by the same prototype element when the subclass is modified.

The solution typically uses the new parent object as follows:

S.prototype = new P ();
Here's how new works, New P (), creates an instance of P's prototype object, and then sets the member variables and member methods in the constructor method.

In this way, changing the prototype of a subclass does not affect the Prototpye of the parent class (because it is a new object and no longer points to the same prototype).

After setting prototype. You also need to reset the contrustor of the subclass S to point to S. Rather than the corresponding construstor of the new P (). For example, the following:

S.prototype.constructor = S;

Very often there is no reset here. There will be no failure, but if you need to use constructor to create an instance, or to determine the instance type, an error occurs.

So it's better to reset it here.


The prototype is inherited as described above. Although it is possible to inherit through JavaScript prototypes, there is a lack of the same.

This way of inheriting. You cannot inherit member variables and member methods that are set in the constructor method. Only the methods, or properties, that are set in the prototype can be inherited.

Such as:

var s = new S (' Yang ', ' 01 ');
The first of these parameters cannot be passed to the Name property.


Then leads to another way of inheriting: Object impersonating.

function P (name) {this.name = Name;this.say = function () {console.log (' P ');}} function S (name,id) {p.call (this,name); this.id = Id;this.eat = function () {console.log (' S ');}} var s = new S (' Yanghi ', ' test ');

In the subclass construction method, the construction method of the parent class is borrowed. Causes subclasses to have properties and methods of the parent class.

For example, the following:

P.call (This,name);

The sentence code is the same as the following effect:

THIS.name = Name;this.say = function () {}

The properties of the parent class are then copied to the subclass. This enables the object to impersonate.

Then this object pretends to be the way it is. The same problem exists:

1 cannot inherit attributes and master methods in prototype prototype.

2 A member method of a constructor method will have a copy of the parent class and the subclass, causing the memory to be added.


So the best way to achieve this is:

1 pairs of prototype objects. Using prototype inheritance

2 properties and methods in the constructor method. Use objects to impersonate.

This is also the current absolute large logarithm of the JS inheritance library used by the implementation method. For example, the following:

function P (name) {this.name = name;} P.prototype.say = function () {Console.log (' say ');} function S (name,id) {p.call (this,name); this.id = ID;} function Bare () {}bare.prototype = P.prototype; S.prototype = new Bare (); S.prototype.constructor = S; S.prototype.eat = function () {Console.log (' eat ');} var s = new S (' Yanghi ', ' test ');

The member property here. Using object impersonation, the member method adopts the prototype inheritance.

Be careful. The implementation of prototype inheritance here requires an intermediate variable. For example, the following:

S.prototype = new Bare ();

Assume that the intermediate variable is not used. The direct new P () will fail.

Because new will create an object in accordance with the prototype object template of P, there is no problem with this step.

But then. It will also set the member property of the P constructor method to this object, which will cause pollution to the object.

Here we just need its prototype to be able. Other member variables are used to impersonate the object in a way that is possible.


The third way of realizing inheritance is realized by using ES5 object.create.

Shape-superclassfunction Shape () {  this.x = 0;  This.y = 0;} Shape.prototype.move = function (x, y) {    this.x + = x;    This.y + = y;    Console.info ("Shape moved.");};/ /Rectangle-subclassfunction Rectangle () {  shape.call (this);//call Super constructor.} Rectangle.prototype = Object.create (shape.prototype); var rect = new Rectangle (); Rect instanceof Rectangle//true.rect instanceof Shape//true.rect.move (1, 1); Outputs, "Shape moved."

Just the biggest problem in this way is compatibility, need IE 9 +, Safari 5 +,opera 11.6 +


The above is the object of the inheritance of some problems, to record, beware of forgetting.


[JavaScript] JavaScript implements 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.