This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Yesterday we talked about prototypes and prototype chains, today we’re going to talk about inheritance, and we’re going to go over prototype chains again

What is inheritance

Inheritance is an easy word to understand, there are a lot of things that we don’t have, but our father did, so we can use our father’s. This is inheritance. We’ll go straight to the dry stuff.

Prototype chain inheritance

Prototype chain inheritance is the main inheritance method in JS, its basic idea is to inherit the attributes and methods of multiple reference types through the prototype.

/ / prototype chain
     function SuperType() {
        this.property = true;
    }
    SuperType.prototype.getSuperValue = function () {
        return this.property;
    };

    function SubType() {
        this.subproperty = false;
    }
    / / inherit the SuperType
    SubType.prototype = new SuperType();
    SubType.prototype.getSubValue = function () {
        return this.subproperty;
    };
    let instance = new SubType();
    console.log(instance.getSuperValue()); // true
Copy the code

This code defines two types, SuperType and SubType. SubType inherits from SuperType. This assignment rewrites the original stereotype of SUbType, replacing it with an instance of SuperType. This means that the SuperType instance can access all the properties and methods that also exist with subType. protoype.

In this way, an instance of SubType not only inherits properties and methods from an instance of SuperType, but also hooks into the stereotype of SuperType. So instance (via the internal Prototype) points to subtype. Prototype, Subtype. prototype (as an instance of SuperType via the internal prototype) points to superType. prototype. All outputs are true.

The search mechanism of the prototype chain is that when the properties on the instance are read, it first searches on its own instance. If the properties are not found, the search will continue through inheritance, and the search is upward. For attributes and methods it continues to the end of the stereotype chain

Although the prototype chain is a powerful inheritance implementation tool, but it all reference values are shared between instances, and subclasses can not pass parameters to the parent class, the general prototype chain will not be used alone, we can steal the constructor to solve these problems.

Stealing constructors

Stealing constructors is sometimes called “object masquerade” or “classical inheritance” by some. The idea is simple: call the superclass constructor inside the word class constructor. We can use.call() and.apply() to introduce the superclass constructor into the subclass function.

 // Steal the constructor
    function SuperType() {
        this.names = ["jackson"."bear"];
    }

    function SubType() {
        / / inherit the SuperType
        SuperType.call(this);
    }
    let instance1 = new SubType();
    instance1.names.push("daxiong");
    console.log(instance1.names); // ["jackson", "bear", "daxiong"]
    let instance2 = new SubType();
    console.log(instance2.names); // ["jackson", "bear"]
Copy the code

By using call() (or apply()), the SuperType constructor runs all the initialization code in the SuperType() function after the new object created for the instance of SubType is executed. Each instance will have its own names attribute.

Let’s talk about passing parameters again

 // Steal the constructor
    function SuperType(name) {
        this.name = name;
    }

    function SubType() {
        // Inherit SuperType and pass parameters
        SuperType.call(this."Jackson");
        // Instance properties
        this.age = 22;
    }
    let instance = new SubType();
    console.log(instance.name); // "Jackson";
    console.log(instance.age); / / 22
Copy the code

Here the SuperType constructor takes an argument called name, which is passed to the SubType constructor when SuperType is called. So the name attribute is defined on the instance of the SubType. We can also access the value of this property.

There are also problems with embezzling constructors

1. Only properties of the superclass constructor can be inherited.

Constructor reuse is not possible. (Every time you use it, you have to call it again.)

3, each new instance has a copy of the superclass constructor, bloated.

We’ll talk about that in the next article how do we solve some of these problems