SoFunction
Updated on 2025-04-12

JS Inheritance Notes

JS Inheritance
There is no concept of class in JavaScript, and there is no way to talk about the concept of inheritance related to class, but we can use special syntax to

Simulate inheritance in object-oriented languages.
There are many ways to simulate inheritance in JS, among which the parasitic combination mode is a relatively easy and simple simulation inheritance mode. Let's go

Let me introduce the use of parasitic combination mode to simulate inheritance.
JS inheritance includes inheritance of attributes and inheritance of methods, which are implemented through different methods.
1 Inheritance of attributes
The inheritance of attributes is achieved by changing the execution environment of the function. To change the execution environment of a function, you can use call() and apply() two types of work.

Method to implement.
We first create an Animal "class" (because there is no concept of class in JS, here is just a mock, it is actually just a

Function function object).
Copy the codeThe code is as follows:

function Animal(name){
=name;
}

Create another Lion "class" and "inherit" from Animal
Copy the codeThe code is as follows:

function Lion(){
(this, ["Lion"]);
}

Here, Animal's apply method is used to change the execution environment of Animal to the execution environment when Lion is called.
Here we need to explain that if we want to use the "class" of Lion, we usually need to new Lion. like:
var l = new Lion();
The new keyword is very great. In the previous code, the new keyword completes the following tasks:
1) Open up heap space to prepare to store Lion objects
2) Modify the execution environment of the Lion object itself so that this of the Lion function points to the Lion function object itself.
3) Call the "constructor" of Lion "class" and create a Lion object
4) Assign the heap address of the Lion function object to the variable l, and at this time l points to the Lion function object
So after the new keyword (this, ["Lion"]) this has pointed to the Lion function object itself,

With this code, the execution environment of Animal function is changed into the Lion function, which is equivalent to the following code:
Copy the codeThe code is as follows:

function Lion(){
function Animal(name){
=name;
}
}

At this time, this is already a Lion function object, so the previous code is further equivalent to:
Copy the codeThe code is as follows:

function Lion(){
=name;
}

This adds a name attribute to the Lion function object, and simulates the effect of the Lion function inheriting from the Animal function.
2 methods inheritance
Every "class" (i.e., function, note that it is not a function object) in JS has a prototype attribute, and the prototype represents the function

The prototype of , also represents a collection of members of a class (usually a collection of methods). We can implement the function's prototype property

inheritance of law.
We also first create an Animal "class":
Copy the codeThe code is as follows:

function Animal(name){
=name;
}

Add an eat method to Animal's prototype:
Copy the codeThe code is as follows:

=function(){
alter("I can eat! ~");
}

Create a Lion "class" and complete the inheritance of the properties of Animal "class" at the same time
Copy the codeThe code is as follows:

function Lion(){
(this, ["Lion"]);
}

Pay attention to the following code, we are about to complete the inheritance of the method
=new Animal();
In this way, an Animal function object is stored in the Lion prototype, and Lion also contains the methods in Animal (actually, it is also a

Included properties). This simulates the inheritance of the Lion function to Animal.