inheritance

Inheritance: A subclass inherits properties and methods from its parent class so that instances of the subclass can call properties and methods from the parent class.

1. Prototype inheritance

Have properties and methods in the parent class on the prototype chain of the subclass instance;

• Child.prototype=new Parent();
• Child.prototype.constructor=Child;

function Parent(){
    this.names=['Jack'.'Tom'];
}

Parent.prototype.getName=function(index){
    return this.names[index];
}

function Child(){}

// Prototype chain inheritance
Child.prototype=new Parent();
Child.prototype.constructor=Child;

const child1=new Child();
child1.names.push('Lucy');
console.log(child1.getName(0));//Jack
console.log(child1.names);//[ 'Jack', 'Tom', 'Lucy' ]

const child2=new Child();
console.log(child2.getName(0));//Jack
console.log(child2.names);//[ 'Jack', 'Tom', 'Lucy' ]
Copy the code

• Features:

  • 1. Unlike inheritance in other languages, “inheritance in other languages is generally copy inheritance”, which is to put the prototype of the parent class on the prototype chain of the subclass instance, the instance wants to call this method, is based on__proto__Prototype chain lookup mechanism completed;
  • 2. Subclasses can override methods on the parent class, “which will cause other instances of the parent class to be affected.”
  • 3. Private or public attribute methods in the parent class will eventually become public attributes and methods in the child class.

• Existing problems:

  • 1. Attributes of reference type are shared by all instances;
  • 2. When creating an instance, do not pass a value to the parent class.

2. Constructor inheritance “classical inheritance”

Using the Parent method as a normal function and making this point to the Child instance is equivalent to setting private attributes and methods on the Child instance

Features:

• 1. Only attributes and methods that are private to the Parent class can be inherited from the Parent class.
• 2. Private parent class becomes private subclass

function Parent(){
    this.names=['Jack'.'Tom'];
}

Parent.prototype.getNames=function(){
    return this.names;
}

function Child(){
    // Execute Parent as a normal function, this is an instance of Child
    Parent.call(this);
}

const c1=new Child();
c1.names.push('Lucy');
console.log(c1.names);//[ 'Jack', 'Tom', 'Lucy' ]

const c2=new Child();
console.log(c2.names);//[ 'Jack', 'Tom' ]

c1.getNames();/ / complains
Copy the code

function Animal(name){
    this.name=name;
}

function Dog(name){
    // Execute Animal as a normal function. This is an instance of Dog.
    Animal.call(this,name);// dog.name=name
}

const d=new Dog('dog');
console.log(d.name);//dog
Copy the code

• Advantages:

  • 1. Avoid the problem of reference type attributes being shared by the instances used
  • 2. You can pass values from subclasses to parent classes

• Disadvantages:

  • Methods are defined in the constructor and are created each time an instance is created

3. Combinatorial inheritance

function Parent(name) {
    this.name = name;
    this.colors = ['red'.'blue'.'green'];
}

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

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

Child.prototype = new Parent();
// Don't forget this
Child.prototype.constructor = Child;

const c1 = new Child('Jack'.18);
c1.colors.push('black');
console.log(c1.name);//Jack
console.log(c1.age);/ / 18
console.log(c1.colors);//[ 'red', 'blue', 'green', 'black' ]

const c2 = new Child('Tom'.20);
console.log(c2.name);//Tom
console.log(c2.age);/ / 20
console.log(c2.colors);//[ 'red', 'blue', 'green' ]
Copy the code

• Advantages:
  • Integration of prototype chain inheritance and the advantages of the constructor, JS commonly used inheritance pattern

3. Parasitic combination inheritance

Parasitic composite inheritance: Call inheritance + is similar to archetypal inheritance

Features:

The parent class is private, and the public properties and methods are the private and public properties and methods of the subclass instance. “Recommended.”

function Parent(name){
    this.name=name;
}

Parent.prototype.getName=function(){
    console.log(this.name);
}

function Child(name,age){
    //Parent executes, inheriting private attributes
    Parent.call(this,name);
    this.age=age; 
}

// object.create (Obj): Creates an empty Object with its __proto__ pointing to Obj
Child.prototype=Object.create(Parent.prototype);
Child.prototype.constructor=Child;

const c=new Child('Jack'.18);
console.log(c.name);//Jack
console.log(c.age);/ / 18
c.getName();// Print normally
Copy the code

Implement the object.create (obj) method: The object.create method creates an empty Object whose __proto__ points to obj

Object.create({name:'Jack'});

{
  __proto__: {name:'Jack'}}Copy the code

Object.create=function(obj){
  function Fn(){}
  Fn.prototype=obj;
  return new Fn();
}
Copy the code

4. ES6 inheritance

• If a subclass hasconstructorYou need to callsuper()“Is equivalent to executionA.call(this);
• If there is noconstructorBy default, the underlying layer is already calledsuper()

class A {
    constructor(name){
        this.name=name;
    }

    getName(){
        return this.name
    }

    static sex='male';
}

class B extends A{
    constructor(name,age){
        super(name);
        this.age=age;
    }

    getAge(){
        return this.age; }}const b=new B('Jack'.18);
console.log(b);//{ name: 'Jack', age: 18 }
Copy the code