[JavaScript] JavaScript implements inheritance.

Source: Internet
Author: User

For the inheritance in JavaScript, because there is no class-like inheritance in the backend language in JS, 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 element of the parent class to be affected as well when the prototype of the subclass is modified.

Workarounds generally take the form of a new parent object:

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 construction method.

In this way, modifying 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 instead of the construstor corresponding to the new P (). As follows:

S.prototype.constructor = S;

There are times when it is not reset and there is no problem, but if you need to use constructor to create an instance later, or to determine the instance type, an error will occur.

So it's better to reset it here.


The prototype inheritance described above, although it can be inherited through JavaScript prototypes, is also deficient.

In this way, you cannot inherit the member variables and member methods that are set in the constructor method, only the methods that are set in the prototype, or the properties.

Such as:

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


This leads to the second way of inheriting: the object is 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 constructor of the parent class is borrowed so that the child class has the properties and methods of the parent class. As follows:

P.call (This,name);

The sentence code is the same as the following:

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

The property of the parent class is then copied to the subclass, which implements the object impersonation.

Then there are problems with the way the object is impersonating:

1 cannot inherit attributes and master methods in prototype prototype.

2 The member method of the constructor method will have a copy in both the parent class and the subclass, resulting in an increase in memory.


So the best way to achieve this is:

1 for prototype objects, with prototype inheritance

2 the properties and methods in the construction method, using the object impersonation.

This is also the current absolute large logarithm of the JS Inheritance Library adopted by the implementation method. As follows:

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 ');

Here the member properties, using the object impersonation, the member method adopts the prototype inheritance.

Note that the implementation of the prototype inheritance here requires an intermediate variable, as follows:

S.prototype = new Bare ();

If you do not take the intermediate variable, the direct new P (), there will be problems.

Since new will create an object according to the prototype object template of P, there is no problem with this step.

But next, it will also set the member properties of the P constructor method to this object, which will cause pollution to the object.

Here we only need its prototype, and the other member variables will be used to impersonate the object.


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


Copyright NOTICE: This article for Bo Master original article, reprint please declare reprint address.

[JavaScript] JavaScript implements inheritance.

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.