In JavaScript, inheritance is a mechanism that allows the creation of new classes based on existing classes; inheritance provides flexibility for subclasses and can reuse methods and variables of parent classes. The process of inheritance is from general to special. Inheritance can be achieved using prototype chains and constructors.
The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.
JavaScript inheritance is a mechanism that allows us to create new classes based on existing classes; it provides flexibility for subclasses to reuse methods and variables of parent classes. The process of inheritance is the process from general to special.
It maintains an IS-A relationship.
The extends keyword is used in class expressions or class declarations.
Using the extends keyword, we can get all properties and behaviors of built-in objects as well as custom classes.
We can also implement inheritance using a prototype-based approach.
How does JavaScript implement inheritance?
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 instance contains an internal pointer to the prototype object.
Example of prototype chain implementation inheritance:
function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function subType() {this.property = false;}//Inherited SuperTypeSubType.prototype = new SuperType ();SubType.prototype.getSubValue = function (){return this.property;}var instance = new SubType();console.log(instance.getSuperValue());//true2. 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);//Inherits 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 pattern that combines the technology of prototype chaining and borrowing constructors to take advantage of the best of both worlds.
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);//Inherited attribute this.age = age;}//Inherited method 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();//18var instance2 = new SubType("EvanChen666",20 );console.log(instance2.colors);//"red","blue","green"instance2.sayName();//"EvanChen666"instance2.sayAge();//204. Prototypal inheritance
The basic idea: Prototypes allow you to create new objects based on existing ones 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"ECMAScript 5 standardizes prototypal inheritance through the new Object.create() method, which accepts 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
The basic idea: Create a function that simply encapsulates the inheritance process, enhances the object in some way internally, and 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 combinatorial inheritance
Basic idea: inherit properties by borrowing functions, and inherit methods through the hybrid form of the prototype chain
Its basic model is as follows:
function inheritProperty(subType, superType) {var prototype = object(superType.prototype);//Create object prototype.constructor = subType;//Enhance object subType.prototype = prototype;//Specify object}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);}