Detailed explanation of inheritance in JavaScript

The concept of js inheritance

The following two inheritance methods are commonly used in js:

Prototype chain inheritance (between objects Inheritance)
Class inheritance (inheritance between constructors)

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

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

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

jsYou can simulate the functions of the implementation 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, and The prototype of the subclass points to the parent class, which 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 = &#39;mike&#39;;
    }

    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, which 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 the prototype and the instance

The relationship between the prototype and the instance can be determined in two ways. Operators instanceof and isPrototypeof() methods:

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 appears 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

In js, the inherited function is called the super type (parent class , base class also works), inherited functions are called subtypes (subclasses, derived classes). There are two main problems with using prototypal inheritance:
First, overriding the prototype with literals will break the relationship, using the prototype of the reference type, and the subtype cannot pass parameters to the supertype.

Pseudo classes solve the problem of reference sharing and the inability to pass parameters of super types. We can use the "borrowed constructor" technology

Borrowed constructor (class inheritance)

<script>
    function Parent(age){
        this.name = [&#39;mike&#39;,&#39;jack&#39;,&#39;smith&#39;];
        this.age = age;
    }

    function Child(age){
        Parent.call(this,age);
    }
    var test = new Child(21);
    alert(test.age);//21
    alert(test.name);//mike,jack,smith
    test.name.push(&#39;bill&#39;);
    alert(test.name);//mike,jack,smith,bill
</script>

Although borrowing constructors solves the two problems just mentioned, without a prototype, reuse is impossible, so we need a pattern of prototype chain + borrowing constructors. This pattern is called combined inheritance

Combined inheritance

<script>
    function Parent(age){
        this.name = [&#39;mike&#39;,&#39;jack&#39;,&#39;smith&#39;];
        this.age = age;
    }
    Parent.prototype.run = function () {
        return this.name  + &#39; are both&#39; + this.age;
    };
    function Child(age){
        Parent.call(this,age);//对象冒充，给超类型传参
    }
    Child.prototype = new Parent();//原型链继承
    var test = new Child(21);//写new Parent(21)也行
    alert(test.run());//mike,jack,smith are both21
</script>

Combined inheritance is a commonly used inheritance method. The idea behind it is to use the prototype chain to inherit prototype properties and methods, and to borrow constructors to implement instances. Property inheritance. In this way, function reuse is achieved by defining methods on the prototype, and each instance is guaranteed to have its own attributes.

Usage of call(): Call a method of an object and replace the current object with another object.

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

Prototypal inheritance

This kind of inheritance uses prototypes and creates new objects based on existing objects without creating custom types. It is called Prototypal inheritance

<script>
     function obj(o){
         function F(){}
         F.prototype = o;
         return new F();
     }
    var box = {
        name : &#39;trigkit4&#39;,
        arr : [&#39;brother&#39;,&#39;sister&#39;,&#39;baba&#39;]
    };
    var b1 = obj(box);
    alert(b1.name);//trigkit4

    b1.name = &#39;mike&#39;;
    alert(b1.name);//mike

    alert(b1.arr);//brother,sister,baba
    b1.arr.push(&#39;parents&#39;);
    alert(b1.arr);//brother,sister,baba,parents

    var b2 = obj(box);
    alert(b2.name);//trigkit4
    alert(b2.arr);//brother,sister,baba,parents
</script>

Prototypal inheritance first creates a temporary constructor inside the obj() function, then uses the incoming object as the prototype of this constructor, and finally returns this temporary type a new instance of .

Parasitic Inheritance

This inheritance method combines the prototype + factory pattern to encapsulate the creation process.

<script>
    function create(o){
        var f= obj(o);
        f.run = function () {
            return this.arr;//同样，会共享引用
        };
        return f;
    }
</script>

Small problems with combined inheritance

Combined inheritance is the most commonly used inheritance pattern in js, but the supertype of combined inheritance will be called twice during use. times; once when creating a subtype, and another time inside the subtype constructor

<script>
    function Parent(name){
        this.name = name;
        this.arr = [&#39;哥哥&#39;,&#39;妹妹&#39;,&#39;父母&#39;];
    }

    Parent.prototype.run = function () {
        return this.name;
    };

    function Child(name,age){
        Parent.call(this,age);//第二次调用
        this.age = age;
    }

    Child.prototype = new Parent();//第一次调用
</script>

The above code is the previous combined inheritance, so parasitic combined inheritance solves the problem of two calls.

Parasitic combined inheritance

<script>
    function obj(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    function create(parent,test){
        var f = obj(parent.prototype);//创建对象
        f.constructor = test;//增强对象
    }

    function Parent(name){
        this.name = name;
        this.arr = [&#39;brother&#39;,&#39;sister&#39;,&#39;parents&#39;];
    }

    Parent.prototype.run = function () {
        return this.name;
    };

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

    inheritPrototype(Parent,Child);//通过这里实现继承

    var test = new Child(&#39;trigkit4&#39;,21);
    test.arr.push(&#39;nephew&#39;);
    alert(test.arr);//
    alert(test.run());//只共享了方法

    var test2 = new Child(&#39;jack&#39;,22);
    alert(test2.arr);//引用问题解决
</script>

call and apply

Global functionsapplyandcallcan be used to change functions# The direction of ##this is as follows:

// 定义一个全局函数
    function foo() {
        console.log(this.fruit);
    }

    // 定义一个全局变量
    var fruit = "apple";
    // 自定义一个对象
    var pack = {
        fruit: "orange"
    };

    // 等价于window.foo();
    foo.apply(window);  // "apple",此时this等于window
    // 此时foo中的this === pack
    foo.apply(pack);    // "orange"

The above is the detailed explanation of inheritance methods in JavaScript. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!