preface

This article explains in detail the JS inheritance of six ways, to ensure that a look to understand, the example is very paste and, no sense of violation. If you have different views on the answer, you are welcome to add the discussion in the comments section. Of course, you are welcome to point out the question in the comments section.

Remember: to learn JS inheritance, you need to understand and master the use of prototype chains and the way you can use constructors to add properties/methods

  • This article speak prototype chain very well blog.csdn.net/cc188688768…

  • The way constructors add properties/methods juejin.cn/post/699692…

Learning is that simple. Do you understand me?

The parent class constructor to inherit

function Father(name) {
    this.name = name;
    this.say = function(){
        console.log('111')}}Copy the code

How do I inherit Father attributes and methods from Son

1. Prototype chain inheritance

function Son(age){
    this.age = age;
}
console.log(Son.prototype)/ / {}
Son.prototype = new Father();
console.log(Son.prototype)//Father { name: undefined, say: [Function (anonymous)] }
​
const son1 = new Son(12);
console.log(son1)//Father { age: 12 }
console.log(son1.__proto__)  //Father { name: undefined, say: [Function (anonymous)] }
Copy the code

Important: Make the prototype of the new instance equal to the instance of the parent class

Disadvantages:

  1. The new instance cannot pass arguments to the parent constructor
  2. All new instances share the attributes of the parent instance. (Attributes on the stereotype are shared; if one instance modifies the stereotype attributes, the other instance’s stereotype attributes are also modified!)

2. Use constructors

// Solved two major problems with the prototype chain
function Son(name,age){
    Father.call(this,name);
    this.age = age;
}
Father.prototype.play = function (){
    console.log('222')}// Attribute/method on the superclass prototype
​
const son = new Son('hzy'.12);
console.log(son) //Son { name: 'hzy', say: [Function (anonymous)], age: 12 }
console.log(Son.prototype) / / {}
Copy the code

Important: Introduce a superclass constructor into a subclass function with call() or apply().

Disadvantages:

  1. Constructor reuse cannot be implemented. (Call it again every time you use it)
  2. Only instance properties and methods of the parent class can be inherited, not stereotype properties/methods

3. Combinatorial inheritance (the first two combinations)

// Use the stereotype chain to implement inheritance of stereotype properties and methods, and borrow the constructor to implement inheritance of instance properties
function Son(name,age){
    this.age = age;
    Father.call(this,name);
}
Son.prototype = new Father('hzy');
const son = new Son('jack'.12);
​
console.log(son)  //Father { age: 12, name: 'jack', say: [Function (anonymous)] }
console.log(son.__proto__)  //Father { name: 'hzy', say: [Function (anonymous)] }
Copy the code

Key points: combine the advantages of the two modes, parameter transfer and reuse

Disadvantages: Parent constructor called twice (memory consumption)

4. Inheritance of the original type

// An implementation similar to object.create
function myCreate(proto) {
    function F(){}
    F.prototype = proto;
    return new F();
}
​
console.log(myCreate(new Father('hzy')).__proto__)
Copy the code

Parasitic inheritance

function myCreate(proto) {
    function F(){}
    F.prototype = proto;
    return new F();
}
// Make some enhancements to the original type inheritance
function Son(father){
    var clone = myCreate(father);Create a new object by calling the function
    clone.play = function () {// Enhance the object in some way
        console.log("222");
    };
    return clone; // Return this object
}
​
const son = new Son(new Father('hzy'))
console.log(son)  //Father { play: [Function (anonymous)] }
son.play()    / / 222
Copy the code

Key points: make some enhancement on the basis of the original type inheritance

Disadvantages: no reuse of constructors, similar to using constructors.

6. Parasitic Combinatorial Inheritance (Optimal)

Father.prototype.play = () = > {
    console.log(222);
}; // The parent class can be enhanced
function Son(age,name) {
    Father.call(this,name);// The parent object can be inherited, and the name can be passed to the parent class
    this.age = age;
}
Son.prototype = Object.create(Father.prototype);// Inherits attributes from the parent stereotype
Son.prototype.constructor = Son;/ / repair constructor
​
const son = new Son(12.'hzy')
console.log(son.name,son.__proto__.constructor) //[Function: Son]
Copy the code

Key points: combining both combinatorial inheritance and parasitic inheritance

conclusion

Feel good writing, helpful to you, you can share with people around you, the more you share knowledge, do not be stingy

Follow-up update front-end interview handwritten JS high-frequency topic related, please pay attention to me, tidy up, share with you, we learn front-end together.