How JavaScript implements Inheritance (six ways)

Most OO languages support two types of inheritance: interface inheritance and implementation inheritance, and ECMAScript cannot implement interface inheritance, ECMAScript only supports implementation of inheritance, and its implementation is mainly based on the prototype chain to achieve.

1. Prototype chain

Basic idea: Use a prototype to have a reference type inherit the properties and methods of another reference type.

Constructors, prototypes, relationships between instances: each constructor has a prototype object, and the prototype object contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object.

Prototype chain Implementation Inheritance Example:

function SuperType() { this .property = true ; } SuperType.prototype.getSuperValue = function () { return this .property; } function subType() { this .property = false ; } //继承了SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function (){ return this .property; } var instance = new SubType(); console.log(instance.getSuperValue()); //true

2. Borrowing constructors

Basic idea: The superclass constructor is called inside the subtype constructor, and the constructor can be executed on the newly created object by using the call () and the Apply () methods.

Example:

function SuperType() { this .colors = [ "red" , "blue" , "green" ]; } function SubType() { SuperType.call( this ); //继承了SuperType } var instance1 = new SubType(); instance1.colors.push( "black" ); console.log(instance1.colors); //"red","blue","green","black" var instance2 = new SubType(); console.log(instance2.colors); //"red","blue","green"

3. Combining inheritance

Basic idea: Combine the prototype chain and the technique of borrowing the constructor in one piece, thus play a kind of inheritance pattern of the two long.

Example:

function SuperType(name) { this .name = name; this .colors = [ "red" , "blue" , "green" ]; } SuperType.prototype.sayName = function () { console.log( this .name); } function SubType(name, age) { SuperType.call( this ,name); //继承属性 this .age = age; } //继承方法 SubType.prototype = new SuperType(); Subtype.prototype.constructor = Subtype; Subtype.prototype.sayAge = function () { console.log( this .age); } var instance1 = new SubType( "EvanChen" ,18); instance1.colors.push( "black" ); consol.log(instance1.colors); //"red","blue","green","black" instance1.sayName(); //"EvanChen" instance1.sayAge(); //18 var instance2 = new SubType( "EvanChen666" ,20); console.log(instance2.colors); //"red","blue","green" instance2.sayName(); //"EvanChen666" instance2.sayAge(); //20

4. prototype-Type Inheritance

Basic idea: With prototypes, you can create new objects based on existing objects without having to create custom types.

The idea of archetypal inheritance can be explained by the following functions:

function object(o) { function F(){} F.prototype = o; return new F(); }Example: var person = { name: "EvanChen" , friends:[ "Shelby" , "Court" , "Van" ]; }; var anotherPerson = object(person); anotherPerson.name = "Greg" ; anotherPerson.friends.push( "Rob" ); var yetAnotherPerson = object(person); yetAnotherPerson.name = "Linda" ; yetAnotherPerson.friends.push( "Barbie" ); console.log(person.friends); //"Shelby","Court","Van","Rob","Barbie"ECMASCRIPT5 normalized the prototype inheritance by adding the Object.create () method, which receives two parameters: an object used as a prototype for a new object and an object that defines additional properties as a new object. var person = { name: "EvanChen" , friends:[ "Shelby" , "Court" , "Van" ]; }; var anotherPerson = Object.create(person); anotherPerson.name = "Greg" ; anotherPerson.friends.push( "Rob" ); var yetAnotherPerson = Object.create(person); yetAnotherPerson.name = "Linda" ; yetAnotherPerson.friends.push( "Barbie" ); console.log(person.friends); //"Shelby","Court","Van","Rob","Barbie"

5. Parasitic inheritance

Basic idea: Create a function that encapsulates the inheritance process, which internally enhances the object in some way, and then returns the object as if it were actually doing all the work.

Example:

function createAnother(original) { var clone = object(original); clone.sayHi = function () { alert( "hi" ); }; return clone; } var person = { name: "EvanChen" , friends:[ "Shelby" , "Court" , "Van" ]; }; var anotherPerson = createAnother(person); anotherPerson.sayHi(); ///"hi"

6. Parasitic combined inheritance

Basic idea: Inheriting a property by borrowing a function, inheriting the method through the form of a prototype chain

Its basic model is as follows:

function inheritProperty(subType, superType) { var prototype = object(superType.prototype); //创建对象 prototype.constructor = subType; //增强对象 subType.prototype = prototype; //指定对象 }Example: 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; } inheritProperty(SubType,SuperType); SubType.prototype.sayAge = function () { alert( this .age); }The above content to introduce you to the implementation of JavaScript six ways to inherit, I hope to help you!

How JavaScript implements Inheritance (six ways)