Js inheritance implementation

1. Prototype chain inheritance

Assign an instance object of a superclass to a prototype object of a subclass.

• Advantages: Simple and easy to implement
• disadvantages
  • Inmultiinheritance
  • Subclasses cannot pass arguments to superclasses
  • Subclass instance members share attributes of the parent class, and if that attribute is a reference data type, subclass instance members affect each other.
  • Subclasses declare their stereotype methods after inheritance

  function SuperClass() {
    this.name = "super";
    this.list = []; // If a subclass member pushes, the list of other subclass instance members will change accordingly
  }
  SuperClass.prototype.say = function () {
    console.log("wo shi super");
  };
  SuperClass.prototype.push = function (p) {
    this.list.push(p);
  };

  function SubClass() {
    this.name = "sub";
  }
  SubClass.prototype.say = function () {
    console.log("wo shi sub");
  };

  SubClass.prototype = new SuperClass(); // Inherits an instance object from the parent class

  SubClass.prototype.print = function () {
    console.log("print sub");
  };

  const instance1 = new SubClass();
  instance1.say(); // wo shi super
  instance1.push("instance1"); // The list attribute that will affect other subclass instance members
  instance1.print();

  const instance2 = new SubClass();
  console.log(instance2.list); // ["instance1"];
Copy the code

2. Borrow constructor inheritance

(Calling the constructor of the parent class)

• advantages
  • You can have multiple inheritance
  • Subclasses can pass parameters to the superclass
  • Attribute subclasses that inherit reference types have no effect between instance members
• disadvantages
  • Properties and methods on the stereotype chain cannot be inherited
  • Methods are defined in constructors and cannot be reused (each subclass to inherit is a new function)

function SuperClass(age) {
  this.name = "super";
  this.age = age;
 // Cannot be reused
  this.say = function () {
    console.log("wo shi super");
  };
}
// Cannot be inherited
SuperClass.prototype.print = function () {
  console.log("wo shi super");
};

function SubClass() {
  SuperClass.call(this.123);
}

const instance = new SubClass();
console.log(instance.age);
Copy the code

3. Primary inheritance

(Essentially a shallow copy of the object)

• Advantages: Simple and easy to implement
• Disadvantages: Like stereotype chain inheritance, superclass reference types are shared by subclasses

 function CloneObj(o) { 
    const Fn = function () {};
    Fn.prototype = o;
    return new Fn();
  }

  const superObj = {
    sex: "Male".things: ["money"."house"]};const sub1 = CloneObj(superObj);
  const sub2 = CloneObj(superObj);

  sub1.things.push("car"); // Things properties that will affect other subclasses
  console.log(sub2.things); // ["money", "house", "car"]
Copy the code

The cloneObj function above essentially makes a shallow copy of the object passed in, in the case of one argument, Acting on the Object. The create (). < https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create >Copy the code

4. Combination of inheritance

(Stereotype chain inheritance + borrowing superclass constructor)

• advantages
  • The superclass prototype method can be reused
  • Superclass reference type attribute sharing subclasses do not affect each other
• disadvantages
  • The constructor is called twice, creating two instances of the superclass

 function SuperClass(age) {
   this.name = "super";
   this.age = age;
 }
 SuperClass.prototype.say = function () {
   console.log("wo shi super");
 };

 function SubClass() {
   SuperClass.call(this.123);
 }

 SubClass.prototype = new SuperClass();
 SubClass.prototype.constructor = SubClass; // Add the constructor pointer again

 const instance = new SubClass();
Copy the code

5. Parasitic combinatorial inheritance

(Currently the most perfect inheritance implementation)

function SuperClass(age) {
  this.name = "super";
  this.age = age;
}
SuperClass.prototype.say = function () {
  console.log("wo shi super");
};

function SubClass() {
  SuperClass.call(this.123);
}

// Inherit functions
function inherit(sup, sub) {
  const Fn = function () {};
  Fn.prototype = sup.prototype;
  sub.prototype = new Fn();
  sub.prototype.constructor = sub;

 // sub.prototype = Object.create(sup.prototype)
}

inherit(SuperClass, SubClass);
const instance = new SubClass();
Copy the code

6. Es6 inheritance

class SuperClass {
  constructor(name = "super", age = 123) {
    this.name = name;
    this.age = age;
  }

  say() {
    console.log(`wo shi The ${this.name}, age is The ${this.age}`); }}class SubClass extends SuperClass {
  constructor(name, age) {
    super(name, age); // Inherit superclass attributes and pass parameters
  }
  say() {
    super.say(); // Inherit superclass methods}}class SubClass2 extends SuperClass {
  constructor(name, age) {
    super(name, age); // Inherit superclass attributes and pass parameters
  }
  say() {
    super.say(); // Inherit superclass methods}}const instance1 = new SubClass("sub1".345);
const instance2 = new SubClass2("sub2".456);
instance1.say(); // wo shi sub, age is 345
instance2.say(); // wo shi sub2, age is 456

console.log(instance1.say == instance2.say); // false 
Copy the code