[3] Six Inheritance Ways of JS Inheritance Mechanism

Understanding the basic concepts above, we need to apply what we have learned in practice, how to achieve inheritance in the end? What are the ways to achieve it? Following is the main description of the three most commonly used ways to achieve inheritance, which can meet the basic development needs. For a deeper understanding, you can refer to it. Teacher Ruan Yifeng's Web Blog.

To implement inheritance, we first provide a parent class and add parameters to the constructor, as well as prototype attributes.

function Person(name){
    this.name =  name;
    this.type =  'father';
    this.sum = function(){
        console.log("father'name",this.name);
    }
}
Person.prototype.age = 10;
Person.prototype.sayName = function(){
    console.log('superType');
}Copy code

I. Inheritance of Prototype Chain

<!-- Prototype chain inheritance --> 
    function Per_1(){
        this.name = 'per_1_name';
    }
    Per_1.prototype = new Person();
    var per1 = new Per_1();
    console.log(per1.age);  //10
    console.log(per1 instanceof Person);
    console.log(per1.sum()) //Can output, but report undefined copy code

Emphasis: Make the prototype of the new instance equal to the instance of the parent class.

Features: 1. The inheritable attributes of an instance include the attributes of the instance constructor, the attributes of the parent constructor, and the attributes of the parent prototype. (The new instance will not inherit the attributes of the parent instance!)

Disadvantages: 1. New instances cannot pass parameters to parent constructors.

2. Single inheritance.

3. All new instances share attributes of parent instances. (Attributes on a prototype are shared, one instance fixes the prototype attributes, and the prototype attributes of another instance are modified!)

2. Inheritance by borrowing constructors

<!-- Borrowing constructor inheritance -->
    function Per_2(){
        Person.call(this,'jarmer');
        this.age = 12;
    }
    var per2 = new Per_2();
    console.log(per2.name); //jarmer
    console.log(per2.age);  //12 duplicate code

Emphasis: Introduce the parent constructor into the subclass function with. call() and. apply().

Features: 1. It inherits only the attributes of the parent constructor, but does not inherit the attributes of the parent prototype.

2. Solve the shortcomings of prototype chain inheritance 1, 2, 3.

3. Multiple constructor attributes (call multiple) can be inherited.

4. References can be passed to the parent instance in the child instance.

Disadvantages: 1. Can only inherit the properties of parent constructors.

2. The multiplexing of constructors cannot be realized. (Re-call every time you use it)

3. Each new instance has a copy of the parent constructor, which is bloated.

III. Combinatorial Inheritance

<!-- Combinatorial Inheritance -->
    function Per_3(name){
        Person.call(this,name);
    }
    Per_3.prototype = new Person();
    var per3 = new Per_3('jane');
    console.log(per3.name);
    console.log(per3.age);Copy code

Features: 1. It can inherit the attributes of the parent prototype, and can be passed on and reused.

2. The constructor attributes introduced by each new instance are private.

Disadvantage: The parent constructor (which consumes memory) is called twice, and the child constructor replaces the parent constructor on the prototype.

IV. Prototype Inheritance

<!-- Prototype inheritance -->
    function Content(obj){
        function F(){}
        F.prototype = obj;
        return new F();
    }
    var per4 = new Person();
    var per4_2 = Content(per4);
    console.log(per4_2.age);
    console.log(per4_2.name);Copy code

Emphasis: Wrap an object with a function, and then return the call of the function. The function becomes an instance or object that can add attributes with meaning. object.create() is this principle.

Features: Similar to copying an object, wrapped in functions.

Disadvantage: 1. All instances inherit the attributes on the prototype.

2. Unable to achieve reuse. (New instance attributes are added later)

V. Parasitic Inheritance

<!-- Parasitic inheritance -->
    function Per_5(obj){
        var per5 = Content(obj);
        per5.age = 20;
        per5.name = 'tom';
        return per5;
    }
    var per6 = new Person();
    var per7 = Per_5(per6);
    console.log(typeof Per_5);  //function
    console.log(typeof per7);   //object
    console.log(per7.name); //tom replication code

Emphasis: It's about putting a shell on the prototype inheritance.

Advantages: There is no custom type created, because only a shell return object (this) is set, and this function becomes a new object created.

Disadvantage: prototype is not used and can not be reused.

6. Parasitic combinatorial inheritance (commonly used)

<!-- Parasitic combinatorial inheritance (Commonly used) -->
    function inheritPrototype(subType,superType){
        var prototype = superType.prototype;
        prototype.constructor = subType;
        subType.prototype = prototype;
    }
    function subType(name){
        Person.call(this,name);
    }
    inheritPrototype(subType,Person);
    var per8 = new subType('inheritPrototype');
    console.log(per8.age);  //10
    console.log(per8.name);  //inheritPrototype replication code

Emphasis: It's about putting a shell on the prototype inheritance.

Advantages: There is no custom type created, because only a shell return object (this) is set, and this function is naturally created as a new object.

Disadvantage: prototype is not used and can not be reused.

Keywords: shell

Added by 5kyy8lu3 on Tue, 23 Jul 2019 12:32:19 +0300

Programming VIP