What is inheritance in javascript

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 processes, prototype chains and constructors can be used to implement inheritance.

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What is inheritance in JavaScript

JavaScript inheritance is a mechanism that allows us to create new classes based on existing classes; it provides flexibility for subclasses to reuse parent classes methods and variables. The process of inheritance is the process from general to special.

It maintains an IS-A relationship.

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 and custom classes.

We can also use prototype-based methods to implement inheritance.

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.

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 constructor

Basic idea: call the superclass constructor inside the subtype constructor Functions that execute constructors on newly created objects 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. Combined inheritance

Basic idea: Combine the prototype chain and borrowing constructor technologies together to bring out the best of both worlds. A pattern of inheritance based on one’s strengths.

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 A custom type must therefore be created.

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 The method accepts two parameters: an object that serves as the prototype of the new object and an object that defines additional properties for the 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 only to encapsulate the inheritance process, which enhances the object in some way internally, Finally, the object is returned 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 use the hybrid form of the prototype chain to The basic model of inheritance method

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);
}

[Related recommendations: javascript video tutorial, web front-end 】

The above is the detailed content of What is inheritance in javascript. For more information, please follow other related articles on the PHP Chinese website!