How to implement inheritance in javascript? Summarize several ways to implement inheritance in js

Back to Looking at the knowledge learned before, it can be roughly divided into two categories:

　1. Model based on constructor work.

　2. Working mode based on object.

　3. Whether to use prototype

　4. Whether to perform attributecopy.

5. Both (execute prototype attribute copy)

Let’s review all the previous knowledge:

1. Prototype Chain method (imitation of tradition):

child.prototype = new Parent();

Model: Based on constructor, using prototype chain mode.

Technical Note: By default inheritance mechanism, we can migrate the reusable parts of the method and attribute set to the prototype chain, and set the non-reusable part of the attributes and methods to our own Attributes.

2. Only inherit from prototype:

Child.prototype = Parent.prototype

Mode: constructor-based working mode, prototype copy mode (there is no prototype chain, all objects share one prototype).

Technical Note: Since this mode does not require new object instances to build inheritance relationships, it will have better performance in terms of efficiency.

The query on the prototype chain is also faster because there is no chain at all.

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

3. Temporary constructor method:

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

Affiliated mode: Constructor-based working mode, using prototype chain mode.

Technical Note: This mode is different from Mode No. 1. It only inherits the prototype properties of the parent object, but does not inherit the parent object’s own properties (that is, the properties added to this in the parent constructor). be inherited.

In addition, this mode also provides a way to access the parent object. (i.e. via the usber attribute).

4. Prototype attribute 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;
}

Official mode: Based on constructor working mode, attribute copy mode, use prototype mode.

Technical Note: Convert all contents in the prototype of the parent object into the prototype properties of the child object.

　　 There is no need to create a separate object instance for 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;
}

Official mode: object-based working mode, attribute copy mode.

Technical Note: Very simple, no prototype attributes are used.

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;
}

Official mode: object-based working mode, attribute copy mode.

Technical Note: Same as 5, but all objects are passed by value.

7. Prototype inheritance method:

function object(o){    function F(){};
    F.prototype = o;    return new F();
}

Official mode: Based on object working mode, based on prototype chain mode.

Technical Note: Throw away the class imitation mechanism and directly build inheritance relationships between objects.

                                                                                Taking advantage of the inherent advantages of prototypes.

8. Extension and enhancement mode:

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;
}

Affiliated mode: object-based working mode, using prototype chain mode, attribute copy mode.

Technical Note: This method is actually a hybrid application of prototype inheritance and prototype copy. It completes the inheritance and extension of the object at once through a function.

9. Multiple inheritance method:

function multi(){    var n = {}, stuff, j = 0;
    len = arguments.length;    for(j=0;j<len;j++){
        stuff = argument[j];        for(var i in stuff){
            n[i] = stuff[i];
        }
    }    return n;
}

Official mode: object-based working mode, attribute copy mode.

Technical Note: A hybrid plug-in inheritance implementation.

　 She will copy all attributes of the parent objects in sequence according to their inheritance order.

10. Parasitic inheritance method:

function parasite(victim){    var that = object(victim);
    that.more = 1;    return that;
}

Affiliated mode: Based on object working mode, using prototype chain mode.

Technical Note: This method creates an object through a constructor-like function.

This function will perform a copy of the corresponding object, expand it, and then return the copy.

11. Constructor borrowing method:

function Child{
    Parent.apply(this, arguments);
}

Official mode: Constructor-based working mode.

Technical Note: This method can only inherit the parent object's own properties (that is, this.properties and methods in the constructor).

Can be combined with method one.

  　　　　 她便于我们的子对象继承某个对象的具体属性时，该方式是最简单的方式。

12.构造器借用与属性拷贝法：

function Child(){
    Parent.apply(this, argument);
}
extend2(Child, Parent);

所属模式：基于构造器的工作模式,使用原型链模式,属性拷贝模式。

技术注解：她允许我们在不重复使用调用对象构造器的情况下同时继承自身属性和原型属性。

额，持续更新了这么多天，大概也就这么多了，能力有限，多多包涵！

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱（3）－JavaScript视频教程

The above is the detailed content of How to implement inheritance in javascript? Summarize several ways to implement inheritance in js. For more information, please follow other related articles on the PHP Chinese website!