Several ways of js inheritance

Use as notes only, do not spray if you do not like. And you’re welcome to point out what went wrong.

First: borrow constructor inheritance

Basic idea: The subclass constructor calls the parent type constructor internally. In plain English, the superclass constructor is executed on the newly created object using the apply() and call() methods.

function Parents() { this.age = [50, 52]; }function Son() {parent.call (this); }console.log(new Son())Copy the code

The constructor of the parent type is borrowed via the call method at the * line.

It is also important to note that by inheriting the constructor, the Parent constructor is invoked in the context of the newly created Son instance, which has the advantage that each Son instance has its own copy of properties.

function Parents() { this.age = [50, 52]; }function Son() {parent.call (this); }let firstSon = new Son(); firstSon.age.push(25); console.log(firstSon.age); // [50, 52, 25]let secondSon = new Son(); console.log(secondSon.age); / / [50, 52]Copy the code

Disadvantage:

** Basic idea: ** Use stereotype chains to make one reference type inherit the properties and methods of another.

Function Parents () {enclosing parentsName = 'Parents name} Parents. The prototype. GetParentsName = function () {return ParentsName}function Son() {this.sonName = 'parentsName '}Son. Prototype = new Parents(); *Son.prototype.getSonName = function() { return this.sonName}let firstSon = new Son(); console.log(firstSon.getParentsName())Copy the code

Parents and Son types have their own attributes and methods, respectively. Implement prototype chain inheritance by creating an instance of Parents and assigning it to son.prototype.

Disadvantage:

2. You cannot use object literals to create prototype methods because this overrides the prototype chain.

   Function Parents () {enclosing parentsName = 'Parents name} Parents. The prototype. GetParentsName = function () {return ParentsName}function Son() {this.sonName = 'parentsName '}Son. Prototype = new Parents(); Son.prototype = { getSonName : function() { return this.sonName }}let firstSon = new Son(); console.log(firstSon.getParentsName()) // Uncaught TypeError: firstSon.getParentsName is not a functionCopy the code

3. Stereotype properties containing reference type values are shared by all instances.

   function Parents() { this.ages = [50, 52]; }function Son() {}Son.prototype = new Parents(); let firstSon = new Son(); firstSon.ages.push(25); console.log(firstSon.ages); // [50, 52, 25]let secondSon = new Son(); console.log(secondSon.ages) // [50, 52, 25]

Third: Combinatorial inheritance (prototype chain + constructor)

** Basic idea: ** Inheritance of stereotype properties and methods using stereotype chains, and inheritance of instance properties by borrowing constructors.

function Parents() { this.ages = [50, 52]; This. parentsName = 'parentsName '; } Parents. Prototype. SayParentName = function () {the console. The log (enclosing parentsName)} function Son () {/ / inheritance properties Parents.call(this); // Call Parents() this.sonname = 'son's name '; }// son.prototype = new Parents(); Parents() son.prototype. SayAge = function() {console.log(this.ages)}let firstSon = new Son(); console.log(firstSon)Copy the code

Combinatorial inheritance combines the advantages of constructor inheritance and stereotype inheritance. It can inherit the content of the parent prototype without causing the modification of the properties in the prototype.

Disadvantage:

1. Call the parent class’s constructor twice.

Fourth: original type inheritance

Basic idea: With prototypes, you can create new objects based on existing objects.

function createObj(obj) { function Func() { } Func.prototype = obj; return new Func(); }Copy the code

This can also be done with the object.create () method.

Fifth: parasitic inheritance

The basic idea: Create a function that encapsulates inheritance, enhance the object in some way inside the function, and finally return the object

Function createObj(obj) {let objClone = object.create (obj); SayHello = function() {console.log('Hello')} return objClone; }Copy the code

Disadvantage:

1. You create a method every time you create an object.
2. Unable to reuse.

Six: parasitic combination inheritance

Basic idea: parasitic inheritance, prototype-chain inheritance and structural inheritance combination

function Parents(name) { this.name = name; this.ages = [50, 52]; }Parents.prototype.getParentsName = function() { console.log(this.name)}function Son(name, Age) {// Inherit attribute parents. call(this, name); this.age = age; Function () {}; Func.prototype = Parents.prototype; // son.prototype = new Func(); let child = new Son('zcw', 25); console.log(child)Copy the code