How to reflect js inheritance relationship

JS is an object-oriented weakly typed language, and inheritance is also one of its very powerful features. So how to implement inheritance in JS? let us wait and see.

The following two inheritance methods are commonly used in js:

Prototype chain inheritance (between objects Inheritance)

Class-based inheritance (inheritance between constructors)

Because js is not a truly object-oriented language like java, js is based on objects, and it has no concept of classes. Therefore, if you want to implement inheritance, you can use the prototype mechanism of js or the apply and call methods to achieve

In object-oriented languages, we use classes to create a custom object. However, everything in js is an object, so how to create a custom object? This requires the use of js prototype:

We can simply think of prototype as a template, and the newly created custom objects are all copies of this template (prototype) (actually not a copy but a copy) Link, but this link is invisible. There is an invisible __Proto__ pointer inside the newly instantiated object, pointing to the prototype object).

js can simulate the functions of the class through constructors and prototypes. In addition, the implementation of js class inheritance also relies on the prototype chain.

Prototypal inheritance and class inheritance

Class inheritance is to call the supertype constructor inside the subtype constructor.

Strict class inheritance is not very common, and is usually used in combination:

function Super(){
    this.colors=["red","blue"];
}
 
function Sub(){
    Super.call(this);
}

Prototypal inheritance is to create new objects with the help of existing objects, pointing the prototype of the subclass to the parent Class is equivalent to joining the prototype chain of the parent class

Prototype chain inheritance

In order for the subclass to inherit the attributes (including methods) of the parent class, first A constructor needs to be defined. Then, assign the new instance of the parent class to the constructor's prototype. The code is as follows:

<script>
    function Parent(){
        this.name = 'mike';
    }
 
    function Child(){
        this.age = 12;
    }
    Child.prototype = new Parent();//Child继承Parent，通过原型，形成链条
 
    var test = new Child();
    alert(test.age);
    alert(test.name);//得到被继承的属性
    //继续原型链继承
    function Brother(){   //brother构造
        this.weight = 60;
    }
    Brother.prototype = new Child();//继续原型链继承
    var brother = new Brother();
    alert(brother.name);//继承了Parent和Child,弹出mike
    alert(brother.age);//弹出12
</script>

There is still one missing link in the above prototype chain inheritance, that is Object. All constructors inherit from Object. Inheriting Object is done automatically and does not require us to inherit manually. So what is their affiliation?

Determine the relationship between prototypes and instances

The relationship between prototypes and instances can be determined in two ways. Operator instanceof and isPrototypeof() method:

alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test 是brother的超类
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true

As long as it is a prototype that has appeared in the prototype chain, it can be said to be the prototype of the instance derived from the prototype chain. Therefore, the isPrototypeof() method will also return true.

Related learning recommendations: js video tutorial

The above is the detailed content of How to reflect js inheritance relationship. For more information, please follow other related articles on the PHP Chinese website!