[JavaScript] JavaScript implementation inheritance.

Source: Internet
Author: User

[JavaScript] JavaScript implementation inheritance.

For inheritance in javascript, because javascript does not have class inheritance in the back-end language, inheritance in js is generally prototype inheritance ).

 

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

 

The above code generation has an important problem:

 

S.prototype = P.prototype;

This code will cause the prototype element of the parent class to be affected when the prototype of the subclass is modified.

 

The solution generally uses the new parent-level object method:

 

S.prototype = new P();
The working principle of new is involved here. new P () creates an instance based on the prototype object of P, and then sets the member variables and member methods in the constructor.

 

In this way, modifying the prototype of the subclass does not affect the prototpye of the parent class (because an object is created, it no longer points to the same prototype ).

After prototype is set, you also need to reset the contrustor of the subclass S to re-point to S, instead of the construstor corresponding to new P:

 

S.prototype.constructor = S;

In many cases, this parameter is not reset and will not cause any problems. However, if you need to use constructor to create an instance or determine the instance type, an error will occur.

 

So it is best to reset it here.

 

The prototype inheritance mentioned above can be inherited through the JavaScript prototype, but it also has shortcomings.

This inheritance method cannot inherit the member variables and member methods set in the constructor. It can only inherit the methods or attributes set in the prototype.

For example:

 

var s = new S('yang','01');
The first parameter cannot be passed to the name attribute.

 

 

This leads to the second Inheritance Method: 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 constructor, the constructor of the parent class is used to make the subclass have attributes and methods of the parent class. As follows:

 

P.call(this,name);

 

The code of this sentence has the same effect as the following code:

 

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

In this way, the attributes of the parent class are copied to the subclass to impersonate the object.

 

This method also has the following problems:

1. The prototype attributes and the primary method cannot be inherited.

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

 

Therefore, the best implementation method is:

One pair of prototype objects are inherited by prototype

2. The properties and methods in the constructor are impersonated by objects.

This is also the implementation method used by the js inheritance library of the vast logarithm currently. 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 attributes are impersonated by objects, and the member methods are inherited by prototype.

 

Note that an intermediate variable must be used to implement prototype inheritance, as shown below:

 

S.prototype = new Bare();

If no intermediate variable is used and new P () is used directly, the problem may occur.

 

Because new creates an object according to the prototype object template of P, this step is correct.

However, it will also set the member attributes of the P constructor to this object, which will cause pollution to this object.

Here we only need its prototype. Other member variables can be impersonated by objects.

 

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.