This paper mainly introduces several classical inheritance modes of JavaScript, as well as their advantages and disadvantages

JavaScript object oriented & Inheritance

This paper mainly introduces several classical inheritance modes of JavaScript, as well as their advantages and disadvantages.

The prototype chain principle: use the example of the parent class to rewrite the prototype of the subclass.

Implementation:

function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ this.subproperty = false; } // SuperType subtype.prototype = new SuperType(); SubType.prototype.getSubValue = function (){ return this.subproperty; }; var instance = new SubType(); alert(instance.getSuperValue()); / / true faults:

A stereotype attribute containing a reference type value from a parent class is shared by all children; When creating an instance of a subclass, you cannot pass arguments to the constructor of the parent class. 2. Borrow constructor principle: call the constructor of the parent class inside the constructor of the subclass, pass the execution environment of the subclass this to the constructor of the parent class with call method, so that the attributes and methods in the parent class are rewritten to the subclass.

Implementation:

function SuperType(){ this.colors = [“red”, “blue”, “green”]; } function SubType(){// SuperType supertype.call (this); } var instance1 = new SubType(); instance1.colors.push(“black”); alert(instance1.colors); //”red,blue,green,black” var instance2 = new SubType(); alert(instance2.colors); / / “red, blue, green,” advantage:

Properties and methods are not shared by subclasses;

Arguments can be passed to the constructor of the parent class.

Disadvantages:

Methods in the parent class cannot be reused, and each method has to be recreated on the subclass.

3. Combinatorial inheritance principle: use prototype chain to achieve inheritance of prototype attributes and methods, using the constructor to achieve inheritance of instance attributes.

Implementation:

function SuperType(name){ this.name = name; this.colors = [“red”, “blue”, “green”]; } SuperType.prototype.sayName = function(){ alert(this.name); }; Function SubType(name, age){// Inherit supertype. call(this, name); this.age = age; } // subtype.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){ alert(this.age); }; var instance1 = new SubType(“Nicholas”, 29); instance1.colors.push(“black”); alert(instance1.colors); //”red,blue,green,black” instance1.sayName(); //”Nicholas”; instance1.sayAge(); //29 var instance2 = new SubType(“Greg”, 27); alert(instance2.colors); //”red,blue,green” instance2.sayName(); //”Greg”; instance2.sayAge(); / / 27 advantages:

Prototype chain and borrowed constructor inheritance are combined to learn from each other. Function reuse can be achieved, and ensure that each subclass does not share the parent class reference type attributes.

Disadvantages:

The supertype constructor is called twice: once while the subtype stereotype is being created and once inside the subtype constructor.

function SuperType(name){ this.name = name; this.colors = [“red”, “blue”, “green”]; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name, age){ SuperType.call(this, name); // Call SuperType() this.age = age; } SubType.prototype = new SuperType(); / / the first call SuperType () SubType. The prototype. The constructor = SubType; SubType.prototype.sayAge = function(){ alert(this.age); }; Parasitic combinatorial inheritance principle: inherits properties by borrowing constructors and inherits methods by mixing forms of prototype chains. The idea is to use parasitic inheritance to inherit the parent class’s prototype and then assign the result to the child class’s prototype.

Implementation:

Object.create() function Object (o){function F(){} f.totype = o; return new F(); }

Function inheritPrototype(subType, superType){var prototype = object(supertype.prototype); Prototype. constructor = subType; // Add object subtype. prototype = prototype; Function SuperType(name){this.name = name; this.colors = [“red”, “blue”, “green”]; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name, age){ SuperType.call(this, name); this.age = age; } inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function(){ alert(this.age); }; Advantages:

Fixed a bug where the superclass constructor is called twice in composite mode. Parasitic combinatorial inheritance is the most ideal inheritance pattern for reference types.

In ES6, the class keyword is officially given to achieve object-oriented style writing, but is essentially parasitic combinatorial inheritance syntax sugar.

class Person { constructor(age) { this.age_ = age; } sayAge() { console.log(this.age_); Return new Person(math.floor (math.random ()*100)); return Person(math.floor (math.random ()*100)); }}

Class Doctor extends Person {}

const doctor = new Doctor(32); doctor.sayAge(); // 32 ‘inheritance of the prototype chain schematic