On the implementation of the inheritance in JavaScript

Source: Internet
Author: User

When it comes to object-oriented programming in JS, there is a common denominator, the choice of prototype properties or constructors, both have pros and cons, and on the one-sided from the creation of JS object and the implementation of the two aspects of inheritance, the official recommendation is the combination of the two, do their duty, each take its long, in the previous example, I've made a few summaries of the way objects are created in JavaScript, and the following inheritance says one or two:

1: Prototype chain inheritance:

   Each constructor has a prototype object, and the prototype object contains a pointer to the constructor, and the instance contains a pointer to the inside of the prototype object (the default prototype, all default types inherit object, and this inheritance is implemented using the prototype chain)
functionsupertype () { This. property =true; } SuperType.prototype.getSuperValue=function(){            return  This. property;        }; functionsubtype () { This. Subproperty =false; }        //Inherit supertypeSubtype.prototype =Newsupertype (); SubType.prototype.getSubValue=function(){            return  This. Subproperty;        }; varInstance =Newsubtype ();                alert (Instance.property);        Alert (Instance.getsupervalue ()); Alert (Instance.getsubvalue ());

Problem with prototype inheritance:

   1: The prototype attribute is shared by all instances   of a change, and the rest is changed.
2: You cannot pass parameters to a super-type constructor When you create an instance of a subtype
Summary: In practice, the prototype chain is seldom used alone
            (This seems to be the same as the problem with object creation)

2: Borrow constructor to create:
functionsupertype () { This. colors = ["Red", "Blue", "green"]; }        functionsubtype () {//inherited the subtype.Supertype.call ( This); }        varInstance1 =Newsubtype (); Instance1.colors.push ("Black");   alert (instance1.colors); ["Red", "Blue", "green", "black"]varInstance2 =Newsubtype () alert (instance2.colors); //["Red", "Blue", "green"]No, with an instance .
                                    Changes to
//--------------------------------------------------------------------------//parameter passing:         functionsupertype (name) { This. Name =name; }        functionsubtype () {//inherits the Supertype, and also passes the parametersSupertype.call ( This, "Nicholas");//Instance Properties             This. Age = 29; }        varInstance =Newsubtype ();  alert (instance.name);  Nicholas alert (instance.age); in

Cons: methods are defined within the constructor, so the reuse of the function is impossible to talk about (what does it mean: groping).

Combination Inheritance:

//Combination Inheritance:        functionsupertype (name) { This. Name =name;  This. colors = ["Red", "Blue", "green"]; } SuperType.prototype.sayName=function() {alert ( This. Name); }        functionsubtype (name, age) {//Inheritance properties: calling ConstructorsSupertype.call ( This, name);//Call Supertype () for the first time This. Age =Age ; }        //Inheritance Method:Subtype.prototype =Newsupertype ();//second call to Supertype () SubType.prototype.constructor=subtype; SubType.prototype.sayAge=function() {alert ( This. Age);        }; varInstance1 =NewSubtype ("Nicholas", 29); Instance1.colors.push ("Black");        alert (instance1.colors);        Instance1.sayname ();        Instance1.sayage (); varInstance2 =NewSubtype ("Greg", 27);        alert (instance2.colors);        Instance2.sayname (); Instance2.sayage ();

Naturally, this combination of creation also has its place, that is, to call the Supertype constructor two times, so that the instance properties colors and name of the repeated creation, the next time the creation of the nature will overwrite the previous.

With the derivation < parasitic combined inheritance >

On the code:

// Parasitic combined inheritance:        function Inheritprototype (subtype, supertype) {            var prototype = Object (supertype.prototype);  The creation of an object prototype
A copy
//Add the constructor property to the created copy to point to its own constructor             = subtype;
//Assign the newly created (copy) object to a prototype of the subtype Subtype.prototype=prototype; }        functionsupertype (name) { This. Name =name;  This. colors = ["Red", "Blue", "green"]; } SuperType.prototype.sayName=function() {alert ( This. Name);        }; functionsubtype (name, age) {Supertype.call ( This, name);  This. Age =Age ;        } inheritprototype (subtype, supertype); SubType.prototype.sayAge=function() {alert ( This. Age); };

From the code, we can see that the value called a supertype constructor, although there is no unnecessary unnecessary property creation.

On the implementation of the inheritance in JavaScript

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.