In-depth explanation of the various methods and advantages and disadvantages of JavaScript inheritance

1. Prototype chain inheritance

function Parent () {
     = 'kevin';
}

 = function () {
    ();
}

function Child () {

}

 = new Parent();

var child1 = new Child();

(()) // kevin

question:

1. The attributes of the reference type are shared by all instances, for example:

function Parent () {
     = ['kevin', 'daisy'];
}

function Child () {

}

 = new Parent();

var child1 = new Child();

('yayu');

(); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

(); // ["kevin", "daisy", "yayu"]

2. When creating Child instances, you cannot pass parameters to Parent

2. Borrow constructor (classic inheritance)

function Parent () {
     = ['kevin', 'daisy'];
}

function Child () {
    (this);
}

var child1 = new Child();

('yayu');

(); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

(); // ["kevin", "daisy"]

advantage:

• 1. Avoid the attributes of reference types being shared by all instances
• 2. You can pass parameters to Parent in Child

For example:

function Parent (name) {
     = name;
}

function Child (name) {
    (this, name);
}

var child1 = new Child('kevin');

(); // kevin

var child2 = new Child('daisy');

(); // daisy

shortcoming:

• Methods are defined in the constructor, and each time an instance is created, the method is created.

3. Combination inheritance

The two swords of prototype chain inheritance and classic inheritance are combined.

function Parent (name) {
     = name;
     = ['red', 'blue', 'green'];
}

 = function () {
    ()
}

function Child (name, age) {

    (this, name);

     = age;

}

 = new Parent();

var child1 = new Child('kevin', '18');

('black');

(); // kevin
(); // 18
(); // ["red", "blue", "green", "black"]

var child2 = new Child('daisy', '20');

(); // daisy
(); // 20
(); // ["red", "blue", "green"]

advantage:The advantages of fusing prototype chain inheritance and constructor are the most commonly used inheritance mode in JavaScript.

4. Prototype inheritance

function createObj(o) {
    function F(){}
     = o;
    return new F();
}

that is ES5 The simulation implementation of the object passed as the prototype of the object created.

shortcoming:Property values ​​containing reference types always share the corresponding values, which is the same as prototype chain inheritance.

var person = {
    name: 'kevin',
    friends: ['daisy', 'kelly']
}

var person1 = createObj(person);
var person2 = createObj(person);

 = 'person1';
(); // kevin

('taylor');
(); // ["daisy", "kelly", "taylor"]

Notice:Revisevalue,The value ofperson1andperson2Have independentname Value, but because = 'person1',Giveperson1Addedname value, not modifying the name value on the prototype.

5. Parasitic inheritance

Create a function that is only used to encapsulate the inheritance process, which internally makes the enhancement object in some form and finally returns the object.

function createObj (o) {
    var clone = (o);
     = function () {
        ('hi');
    }
    return clone;
}

shortcoming:Like borrowing the constructor pattern, a method is created every time an object is created.

6. Parasitic combination inheritance

To facilitate everyone's reading,Repeat the code of the combination inheritance here:

function Parent (name) {
     = name;
     = ['red', 'blue', 'green'];
}

 = function () {
    ()
}

function Child (name, age) {
    (this, name);
     = age;
}

 = new Parent();

var child1 = new Child('kevin', '18');

(child1)

The biggest disadvantage of combined inheritance is that the parent constructor will be called twice.

Once when setting up a prototype of a subtype instance:

 = new Parent();

Once when creating a subtype instance:

var child1 = new Child('kevin', '18');

Recalling the simulation implementation of new, in this sentence, we will execute:

(this, name);

Here, we will call the Parent constructor again.

So, in this example, if we printchild1 We will find the object and child1 have an attributecolors, the attribute value is['red', 'blue', 'green']。

So how can we strive for excellence and avoid this repeated call?

If we don't use = new Parent() , but indirectly Visit Woolen cloth?

See how to implement it:

function Parent (name) {
     = name;
     = ['red', 'blue', 'green'];
}

 = function () {
    ()
}

function Child (name, age) {
    (this, name);
     = age;
}

// Three key stepsvar F = function () {};

 = ;

 = new F();


var child1 = new Child('kevin', '18');

(child1);

Finally, let's encapsulate this inheritance method:

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

function prototype(child, parent) {
    var prototype = object();
     = child;
     = prototype;
}

// When we use:prototype(Child, Parent);

The compliment for parasitic combination inheritance in "JavaScript Advanced Programming" is:

This method's high efficiency reflects that it is called only onceParentConstructor, and therefore avoided Create unnecessary and unnecessary properties above. At the same time, the prototype chain can remain unchanged; therefore, it can be used normallyinstanceof andisPrototypeOf. Developers generally believe that parasitic combinatorial inheritance is the most ideal inheritance paradigm for reference types.

This is the article about in-depth explanation of the various methods and advantages and disadvantages of JavaScript inheritance. For more related JavaScript, please search for my previous articles or continue to browse the related articles below. I hope you will support me in the future!