This is the 30th day of my participation in the August Challenge

When reading a large number of interviews, the blogger found that whether it is a large factory interview or a small factory interview, whether it is social recruitment or school recruitment, as long as the examination of JS foundation, inheritance, prototype, prototype chain are all topics that cannot be avoided, so this time I hope to learn with you seven inheritance methods that must be mastered. The blogger will carefully analyze the principle, advantages and disadvantages of each inheritance method and give online implementation method, which is not only helpful for the interview, but also for our understanding of the operation mechanism of JS, let us work together, by the way, give a thumb-up oh!

1: Prototype chain inheritance

The principle of

The principle of prototype chain inheritance is to use the relationship between prototype object and instance to realize inheritance. The key to realize inheritance is to make the prototype object of the subclass point to the newly created parent class instance.

The implementation code

// 1: prototype chain inheritance
function Father() {
    this.name = 'justin';
}
Father.prototype.getName = function () {
    return this.name
}

function Child() { }
Child.prototype = new Father();
const child = new Child();
console.log(child.getName());
Copy the code

The advantages and disadvantages

  • Advantages: Attributes that an instance can inherit include attributes of its constructor, attributes of its parent constructor, and attributes of its parent prototype object.
  • Disadvantages: If one instance modifies properties on the stereotype object, the stereotype properties of the other instance will also be modified. The new instance cannot pass arguments to the parent constructor.

The following example shows the disadvantages of prototype chain inheritance

Online implementation

codeSandBox

Constructor inheritance

The principle of

The core of constructor inheritance is that it is implemented in the subclass constructor through the parent constructor. Call (this).

The implementation code

// 2: constructor inheritance
function Father() {
    this.name = 'justin';
    this.say = {haha: 111}}function Child(age) {
    Father.call(this);
    this.age = age;
}

const child1 = new Child(10);
const child2 = new Child(20);

child1.say.haha = 222;

console.log(child1);
console.log(child2);
Copy the code

The advantages and disadvantages

  • advantages
  1. Can inherit multiple constructor properties (through multiple calls to call)
  2. The problem of instance sharing reference type in prototype chain inheritance is solved
  3. Arguments can be passed from a child instance to a parent instance
  • disadvantages
  1. It inherits only properties from the parent constructor, not properties from the parent prototype object.
  2. The superclass constructor cannot be reused and must be called again each time

Online implementation

codeSandBox

3. Composite inheritance (composite refers to inheritance that combines stereotype chains and constructors)

The principle of

The combination of the prototype chain and constructor inheritance is to modify this by having the parent constructor call call in the subclass constructor, and to have the prototype object of the subclass constructor point to an instance of the parent constructor.

The implementation code

// 3: combinatorial inheritance (combinatorial refers to the combination of stereotype chain inheritance and constructor inheritance)
function Father(age) {
    this.colors = ['red'.'pink'];
    this.age = age;
}
Father.prototype.say = () = > 'hello';
function Child(name,age) {
    // constructor method
    Father.call(this,age);
    this.name = name;
} 
/ / prototype chain
Child.prototype = new Father();
Child.prototype.constructor = Child;

const child1 = new Child('Joe'.20);
const child2 = new Child('bill'.25);
Child.prototype
child1
child1.colors.push('black');
console.log(child1.colors);
console.log(child2.colors);
console.log(child1.say());
Copy the code

The advantages and disadvantages

  • advantages
  1. You can inherit properties on the parent constructor as well as properties on the prototype object.
  2. You can pass parameters.
  3. The constructor properties introduced by each new instance are private.
  • disadvantages
  1. The superclass constructor is called twice.
  2. Attributes on a subclass instance exist on both the prototype chain and the subroutines, polluting the prototype chain.

Online implementation

codeSandBox

4: Original type inheritance

The principle of

Primitive inheritance is accomplished by using an empty function as a mediator, having the mediator’s prototype object point to the parent object to be inherited, and then returning an instance of the function.

The implementation code

// 4: Original type inheritance
function createObj(o) {
    function F() {}; F.prototype = o;return new F();
}

const obj = {
    name: 'justin'.friends: [1.2.3.4]}1 / / way
const m1 = createObj(obj);
const m2 = createObj(obj);
2 / / way
const m3 = Object.create(obj);

console.log(m1.name);  //justin
console.log(m2.name);  //justin
m1.friends.push(Awesome!);

console.log(m1.friends);  / /,2,3,4,666 [1]
console.log(m2.friends);  / /,2,3,4,666 [1]
Copy the code

The advantages and disadvantages

  • advantages
  1. It’s like copying an object and wrapping it with a function.
  • disadvantages
  1. Unable to pass a parameter to the parent class.
  2. Reference types of the parent class are shared by subclasses.

Online implementation

CodeSandBox online implementation

5: Parasitic inheritance

The principle of

Parasitic inheritance is an enhancement of the original type inheritance by adding a function and then adding attributes.

The implementation code

// 5: parasitic inheritance
function objCopy(o) {
    function F() {};
    F.prototype = o;
    return new F();
}

function enhanceObj(o) {
    const clone = objCopy(o);
    clone.say = function() {
        return 'hi';
    }
    return clone;
}

const obj = {
    name: 'justin'.colors: [1.2.3]}const m1 = enhanceObj(obj);
const m2 = enhanceObj(obj);

console.log(m1.name);  //justin
console.log(m1.colors); / / [1, 2, 3]
console.log(m1.say());  //hi

m1.colors.push(777)
console.log(m2.colors); / /,2,3,777 [1]
Copy the code

The advantages and disadvantages

  • advantages
  1. Enhanced the ability of original type inheritance.
  • disadvantages
  1. Unable to pass a parameter to the parent class.
  2. The reference type object of the superclass constructor is shared by the subclass instance.

Online implementation

CodeSandBox online implementation

6: Parasitic combinatorial inheritance

The principle of

Parasitic combinatorial inheritance is a combination of constructor inheritance and parasitic inheritance, so that the prototype object of the subclass’s constructor points to the instance passed by the original type of inheritance, and the constructor of that instance also points to the subclass constructor. Remember that the subclass constructor also requires the parent class constructor to change this reference by call.

The implementation code

// 6: Parasitic combinatorial inheritance
function Father(name) {
    this.name = name;
    this.colors = [1.2.3];
}
Father.prototype.say = function() {
    return 'hi';
}

function Child(name,age) {
    Father.call(this,name);
    this.age = age;
}
function createObj(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function inheritPrototype(Child,Father) {
    // Construct an object that points to the parent constructor prototype object
    const prototype = createObj(Father.prototype);
    // Make this object's constructor point to Child
    prototype.constructor = Child;
    Child.prototype = prototype;
}
inheritPrototype(Child,Father);
const child1 = new Child('justin'.Awesome!);
const child2 = new Child('Flying heart'.777);
console.log(child1.colors); / / [1, 2, 3]
console.log(child2.colors); / / [1, 2, 3]
child1.colors.push(Awesome!);

console.log(child1.colors);  / /,2,3,666 [1]
console.log(child2.colors);  / / [1, 2, 3]
Copy the code

The advantages and disadvantages

  • Advantages: This is by far the best inheritance method.
  1. A subclass constructor can pass arguments to a parent class.
  2. The superclass constructor is called only once.
  3. Reference type attributes of a parent class are not shared by subclasses.

Online implementation

CodeSandBox online implementation

Refer to the link

  • JS inheritance prototype chain inheritance, constructor inheritance, combination inheritance, prototype inheritance, parasitic inheritance, parasitic combination inheritance

  • There are eight inheritance schemes commonly used in JavaScript

  • Check those high frequency front end questions: SIX ways of JS inheritance