Detailed explanation of inheritance knowledge in js

In this article, we mainly share with you the detailed explanation of inheritance knowledge in js, mainly in the form of text and code, hoping to help everyone.

1. Understand the relationship between constructs, instances, and prototypes. The prototypes of constructs and instances point to the prototype, and the constructor of the prototype points to the constructor

2. Subclass It is necessary to reuse the methods and attributes of the parent class

3. Point the prototype constructed by the subclass to an instance of the parent class, and the subclass can access the attributes and methods of the parent class through this instance

4. Progressing this relationship layer by layer forms a prototype chain

• Implementation

function Super(name) {
    this.name = "name";
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}
Super.prototype.getSuperproperty = function () {
    return this.superproperty;
}

function Sub(name) {
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();
Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}

var instance = new Sub("ctc");
console.log(instance.getSuperproperty());//true
console.log(instance.getSubproperty());//false
console.log(instance.getSuperName());//ctc
console.log(instance.getSubName());//ctc

The last two outputs are the process of ctc. When the instance encounters the "." operator, it will execute 1) search for the instance, 2) search for sub.prototype, 3) search for super.prototype.

• Attention issues

Default prototype object
Each instance has a default prototype Object, so the super.prototype just now. The prototype points to the prototype of Object

You need to be careful when defining it

//继承
Sub.prototype = new Super();

Rewrite when inheriting? Who does the constructor of sub.prototype point to at this time?

This sentence must be placed,

Before adding new methods and overriding the method code

Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}

• Disadvantages

The instance properties of the parent class become the prototype properties of the subclass and are shared;

When creating a subclass instance, it cannot be passed to the parent class without affecting all instances. parameter.

Borrow constructor

function Super(name) {
    this.name = name;
  
}
Super.prototype.getSuperName = function () {
    return this.name;
}


function Sub(name) {

  Super.call(this,name);

this.name = name;

}//Inherit Sub.prototype = new Super();Sub.prototype.getSubName = function () { return this.name;}

Mainly borrows the code of Super construction to realize the definition of sub's own properties.

But writing it this way allows each instance to have its own properties and methods, and at the same time, it loses Reusability of method functions

Combined inheritance

Used to solve the problem of method reuse

Use dynamic prototype construction or combined construction in the constructor of the parent class , let the constructor only have the assignment definition of the attribute, and the method definition is on the prototype

Then in the subclass, point the prototype of the subclass to an instance of the parent class, and borrow the parent class in the constructor of the subclass structure, so that each instance of the subclass has its own attributes, but the methods are shared.

function Super(name) {
    this.name = name;
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}

function Sub(name) {
    Super.call(this,arguments);
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();

// Sub.prototype.constructor = Sub;//如果此处未绑定，上一句重写了原型，Super的实例的constructor指向的自然是Super

Sub.prototype.getSubName = function () { return this.name;}var instance = new Sub("ctc");

Prototype inheritance

other An implementation of inheritance, only with the help of prototypes, new objects can be created based on existing objects

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

Understanding: F is a function and an object. Its prototype points to the o accepted by object(), and the returned F is a The prototype points to the object of o.

Order: Object.creat() standardizes the above function, that is, Object.creat(o) also implements the above code

Parasitic inheritance

In prototypal inheritance On the basis of this, this object has been strengthened

function creatAnother(o) {
    var clone = Object.create(o);
    clone.name = "ctc";
    clone.sayname = function () {
        console.log(this.name);
    }
    return clone;
}

Added attribute methods to the object

Parasitic combined inheritance

The purpose is to solve the problem of combined inheritance , there are at least two calls to Super() in combined inheritance, 1. Super.call(this,arguments) 2. Sub.prototype = new Super()

In fact, we just want the prototype of the subclass to inherit from the parent Class methods (usually on the parent class prototype, because not every instance has its own method space)

So we can use prototypal inheritance to only inherit the prototype of the subclass from the prototype of the parent class

function inherit(SubType,SuperType) {
    var prototype = Object.create(SuperType);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

Replace the

Sub.prototype = new Super();

of combined inheritance with

inherit(Sub,Super);

Related recommendations:

Detailed explanation of inheritance method examples in JS

What are the inheritance methods in JS?

Detailed interpretation of the inheritance mechanism in js

The above is the detailed content of Detailed explanation of inheritance knowledge in js. For more information, please follow other related articles on the PHP Chinese website!