Home > Article > Web Front-end > How JavaScript implements inheritance (six ways)_javascript tips
Foreword: Most OO languages support two inheritance methods: interface inheritance and implementation inheritance. However, interface inheritance cannot be implemented in ECMAScript. ECMAScript only supports implementation inheritance, and its implementation inheritance mainly relies on the prototype chain.
1. Prototype chain
Basic idea: Use prototypes to let one reference type inherit the properties and methods of another reference type.
The relationship between constructors, prototypes, and instances: Each constructor has a prototype object, the prototype object contains a pointer to the constructor, and the instances contain 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. Borrow constructor
Basic idea: Call the superclass constructor inside the subtype constructor, and the constructor can be executed on the newly created object by using the call() and 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. Combination inheritance
Basic idea: An inheritance model that combines the technology of prototype chain and borrowed constructor to take advantage of both.
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. Prototypal inheritance
Basic idea: With the help of prototypes, new objects can be created based on existing objects without having to create custom types.
The idea of prototypal inheritance can be illustrated by the following function:
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 standardizes prototypal inheritance through the new Object.create() method. This method receives two parameters: an object used as the prototype of the new object and an object used as the new object to define additional properties.
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 is only used to encapsulate the inheritance process, which internally enhances the object in some way, and finally returns the object as if it really did 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: inherit properties by borrowing functions, and inherit methods through the hybrid form of the prototype chain
The 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 introduces you to the six ways to implement inheritance in JavaScript. I hope it will be helpful to you!