JavaScript basic knowledge Blind spot summary--inheritance

Source: Internet
Author: User

In the primitive chain inheritance method, JavaScript is inherited by an instance of another class (actually, the entity that uses one constructor function overwrites another object's prototype). The following code:

Twodshape.prototype = new Shape ();

Triangle.prototype = new Twodshape ();

You need to construct an entity directly with new Shape () before you can complete related inheritance work through the properties of that entity, rather than directly inheriting from the Shape () constructor.

This method also ensures that any modification to shape () does not affect Twodshape (), since the latter inherits only one entity created by the former

The above operation has a negative effect on the constructor property of the object, so you need to reset the constructor property:

TwoDShape.prototype.constructor = Twodshape;

Triangle.prototype.constructor = Triangle;

A better way to inherit from the primitive chain is to place a fixed or shared property in a class in the definition of a constructor function and put it directly on the prototype. This makes it more efficient to create new objects each time they are created without creating too much memory space:

function shape () {function shape () {}

this.name = ' shape '; "=" Shape.prototype.name = ' Shape ';

}

However, for attributes that are not the same for each entity value, you need to define them in the constructor function.

It is also important to note that when using this approach, it is important to complete the build of the inheritance relationship and then extend the prototype object, otherwise the inheritance overrides the object's extension, and the following code causes the property values in the prototype to overwrite the attribute values that are unique within the object:

TwoDShape.prototype.name = ' 2D shape ';

Twodshape.prototype = new Shape (); This will rewrite the name as shape

Summary: Add some reusable properties and methods to the prototype

The above method, by inheriting the new shape () entity, will set the Shape's properties to the object's own properties, so that the code is not reusable, you can take the following "directly inherit from the prototype" method to implement inheritance:

Twodshape.prototype = Shape.prototype;

The benefit of this approach is that when querying a property that does not exist on the object, the length of the query chain is shortened when the property exists on its upper layer. However, the disadvantage is that because both child and parent objects inherit from the same object, the parent object is randomly changed once the child object has modified the prototype. For example, the following code modifies the name value of a child object and modifies the parent object as well:

Triangle.prototype.name = ' Triangle '//After shape's name becomes Triangle

To solve the above problem, you can use the temporary constructor new F (), which is the idea of creating a temporary constructor to act as an intermediary. Create an empty function, f (), and set its prototype to the parent constructor, and then you can use NEWF () to create some objects that do not contain the parent object's properties, and you can inherit all the information from the parent object prototype property.

(In fact, it is through the intermediary, let the child object modification to the mediation constructor, not the parent object has influence)

var F = function () {};

F.prototype = Shape.prototype;

Twodshape.prototype = new F ();

TwoDShape.prototype.constructor = Twodshape; overriding constructors

In this way, we can leave the parent object's properties out of the child object based on preserving the primitive chain.

Encapsulates an inherited method into a function extend

function extend (child, Parent) {var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F (); Child.prototype.constructor =child; Child.uber = Parent.prototype;}

This can be inherited as follows:

Extend (Twodshape, Shape);

The above is also the Yui framework to implement the method of inheritance, in the Yui in the following inheritance:

YAHOO.lang.extend (Triangle, Shape);


JavaScript basic knowledge Blind spot summary--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.