How does javascript implement inheritance? Summarize several methods for implementing inheritance in js

Source: Internet
Author: User
The previous knowledge can be divided into two categories: 1. the constructor-based working mode. 2. Object-based working mode. 3. Whether to use the prototype. 4. Whether to copy attributes. 5. Both have (execute prototype property copy) BackThe knowledge you have learned can be divided into two categories:

1. constructor-based mode.

2. Object-based working mode.

3. Use prototype?

4. Whether to copy attributes.

5. Both have (execute prototype property copy)

Next we will review all the previous knowledge:

1. prototype chain method (similar to the traditional method ):
child.prototype = new Parent();

Mode: uses the prototype chain mode based on the constructor mode.

Technical annotation: Default Inheritance mechanism. We can migrate reusable parts of methods and attributes to the prototype chain, and set attributes and methods that cannot be reused to their own attributes.

2. Inheritance from prototype only:
Child.prototype = Parent.prototype

Mode: the operating mode based on the constructor and the prototype copy mode (no prototype chain exists and all objects share a prototype ).

Technical note: Because this mode does not need to create a new object instance to build an inheritance relationship, it is efficient.

The query on the prototype chain is also faster, because there is no chain here.

The disadvantage is that the modification to the child object will affect the parent object, because the child object is only a reference of the parent object.

3. Method of temporary constructor:
function extend(Child, parent){    var F = fucntion(){};    F.prototype = Parent.prtotype;    Child.prototype = new F();    Child.prototype.constructor = Child;    Child.uber = Parent.prototype;  }

Mode: uses the prototype chain mode based on the constructor's working mode.

Technical note: this mode is different from the 1 model. She only inherits the prototype attribute of the parent object, the attributes of the parent object (that is, the attributes of this added to the parent constructor) are not inherited.

In addition, this mode also provides access to the parent object. (Through the usber attribute ).

4. Prototype COPY method:
function extend2(Child, Parent){    var p = Parent.prototype;    var c = Child.prototype;    for(var i  in p){        c[i] = p[i];    }    c.uber = p;}

Mode: The prototype mode is used based on the constructor's working mode and attribute copy mode.

Technical annotation: converts all content in the parent object prototype to the prototype attribute of the sub-object.

You do not need to create an object instance for the inheritance.

The prototype chain itself is also shorter.

5. Full attribute COPY method:
function extendCopy(p){    var c = {};    for(var i in p){        c[i] = p[i];    }    c.uber  = p;    return c;}

Mode: Object-based working mode and attribute copy mode.

Technical Notes: It is very simple and does not use prototype attributes.

6. Deep COPY method:
function deepCopy(Parent, Child){    Child = Child || {};    for(var i in Parent){        if(Parent.hasOwnProprty(i)){             if(typeof Parent[i] === 'Object'){                 Child[i] = Array.isArray(p[i]) ? [] : {};                 deepcopy(Parent[i], Child[i]);               }else{                 Child[i] = Parent[i]             }        }    }    return Child;}

Mode: Object-based working mode and attribute copy mode.

Technical annotation: Same as 5, but all objects are passed through values.

7. Prototype Inheritance Law:
function object(o){    function F(){};    F.prototype = o;    return new F();}

Mode: Based on the object working mode and the prototype chain mode.

Technical Notes: Drop the imitation mechanism to build inheritance relationships between objects directly.

Give full play to the inherent advantages of the prototype.

8. expansion and enhancement modes:
function objectPlus(o, stuff){    var n;    function(){};    F.prototype = o;    n = new F();    n.uber = o;    for(var i in stuff){        n[i] = stuff[i]    }    return n;}

Mode: Based on the object working mode, the prototype chain mode and attribute copy mode are used.

Technical annotation: This method is actually a hybrid application of prototype inheritance and prototype copy. It uses a function to inherit and expand objects at one time.

9. Multiple inheritance laws:
Function multi () {var n = {}, stuff, j = 0; len = arguments. length; for (j = 0; j
 
  

Mode: Object-based mode and attribute copy mode.

Technical annotation: A hybrid plug-in inheritance implementation.

She will copy all the attributes of the parent objects in sequence.

10. Parasitic Inheritance Law:
function parasite(victim){    var that = object(victim);    that.more = 1;    return that;}

Mode: uses the prototype chain mode based on the object working mode.

Technical note: This method creates an object through a function similar to the constructor.

This function will copy the corresponding object and extend it, and then return the copy.

11. constructor borrow method:
function Child{    Parent.apply(this, arguments);}

Mode: constructor-based working mode.

Technical note: this method can only inherit the attributes of the parent object (that is, this. Attribute and method in the constructor ).

Can be combined with method 1.

This method is the easiest way for our sub-objects to inherit specific attributes of an object.

12. Borrow constructors and copy attributes:
function Child(){    Parent.apply(this, argument);}extend2(Child, Parent);

Mode: Based on the constructor's working mode, the prototype chain mode and attribute copy mode are used.

Technical note: She allows us to inherit both our own attributes and prototype attributes without repeating the call object constructor.

Well, after so many days of continuous updates, there will probably be so many, limited capabilities, please forgive me!

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.