An article teaches you JS function inheritance
1. Introduction: Hello, how are you all doing lately?😃 Function inheritance is a basic and important part in JS, and it is also often asked in interviews. The following will quickly show you which inheritance methods are common and must be mastered in JS. If you master the following content, you will have no problem with the interview~ Of course, this requires a certain foundation of prototype chain. If you are not familiar with the prototype chain, you can read my article 👉: Quick understanding of js prototype chain. 2. Prototype chain inheritance:The key point of prototype chain inheritance is that the instance of the parent class serves as the prototype of the child class. Take a look at the following example:
// Parent function Person
function Person(name, age) {
// Define some properties this.name = name;
this.age = age;
this.nature = ["auroras", "wind", "moon"];
}
// Define a method on the Person prototype Person.prototype.sayLove = function () {
console.log(this.name + " like " + this.nature[0]);
};
// Sub-function Jack
function Jack() {}
// The instance of the parent class is used as the prototype of the subclass (-------------------Implementation Core--------------------------)
Jack.prototype = new Person();
Now we create two instances of Jack and test whether the inheritance of Person is implemented:
var jack1 = new Jack();
var jack2 = new Jack();
jack2.nature[0] = "sea";
jack1.sayLove();
jack2.sayLove();
console.log(jack1.nature);
console.log(jack2.nature);
It can be seen from the running results that it is indeed inherited and the sayLove method can be executed. But there are many disadvantages. When creating a Jack instance, the name and age parameters cannot be passed, and the nature reference type attributes of different instances affect each other. If one is changed, all will change:
3. Borrowing constructor inheritance (object disguise):The core lies in "constructor stealing". Call the parent class constructor from the subclass constructor. After all, functions are simply objects that execute code in a specific context, so you can use the apply() and call() methods to execute the constructor with the newly created object as the context. It can resolve the conflict between parameters and reference type properties in prototype chain inheritance. Or look at the example directly:
// Parent function Person
function Person(name, age) {
// Define some properties this.name = name;
this.age = age;
this.nature = ["auroras", "wind", "moon"];
}
// Define a method on the Person prototype Person.prototype.sayLove = function () {
console.log(this.name + " like " + this.nature[0]);
};
// Sub-function Lucy
function Lucy(name, age) {
// Pointing this to Lucy through call is equivalent to copying the content in the parent function Person (---------implementation core--------------)
Person.call(this, name, age);
}
// Define a method on the child function prototype Lucy.prototype.syaName = function () {
console.log("My name is " + this.name);
};
Now we create two instances of Lucy and test whether the inheritance of Person is implemented:
var lucy1 = new Lucy("lucy1", "20");
var lucy2 = new Lucy("lucy2", "22");
lucy2.nature[0] = "sea";
console.log(lucy1.name);
console.log(lucy1.nature);
console.log(lucy2.nature);
lucy1.syaName();
lucy2.syaName();
lucy1.sayLove();
As a result, inheritance is possible, parameters can be passed, and reference type properties do not affect each other. However, the disadvantages are obvious. You can see an error and cannot use the sayLove method on the prototype of the parent class.
4. Combination inheritance:Composite inheritance is an inheritance method that combines the core implementations of prototype chain inheritance and borrowed constructor inheritance. It can pass parameters, and the reference type properties do not affect each other. At the same time, the subclass can also obtain the parent class method. This is also the most commonly used inheritance method at present. Let’s look at the example directly:
// Parent function Person
function Person(name, age) {
// Define some properties this.name = name;
this.age = age;
this.nature = ["auroras", "wind", "moon"];
}
// Define a method on the Person prototype Person.prototype.sayLove = function () {
console.log(this.name + " like " + this.nature[0]);
};
// Sub-function Lisa
function Lisa(name, age) {
// Pointing this to Lisa through call is equivalent to copying the content in the parent function Person (------Implementation Core-----------)
Person.call(this, name, age);
}
// The instance of the parent class is used as the prototype of the subclass (---------------Implementation Core-------------------)
Lisa.prototype = new Person();
//A little knowledge point, here is to let Lisa's constructor point to Lisa again, otherwise because Lisa's prototype is a Person instance, the constructor will point to Person
Lisa.prototype.constructor = Lisa;
Now we create two instances of Lisa and test whether the inheritance of Person is implemented:
var lisa1 = new Lisa("lisa1", "20");
var lisa2 = new Lisa("lisa2", "21");
lisa2.nature[0] = "sea";
console.log(lisa1.name);
console.log(lisa1.nature);
console.log(lisa2.nature);
lisa1.sayLove();
lisa2.sayLove();
You can see that the functions we inherited are basically realized. It also fixes the shortcomings of prototype chaining and borrowed constructor inheritance. However, it still has a small drawback. You can see that in the code comment implementation core, Person is called twice, so there are two identical properties on the Lisa prototype and the instance, which will waste some performance.
5. Parasitic Combination Inheritance: In fact, parasitic composition inheritance is similar to composition inheritance, but it has an additional solution to the disadvantage that the prototype and instance of composition inheritance produce two copies of the same properties. The core of the solution is that since we just want the subclass prototype to be assigned to the parent class prototype, there is no need to create a new parent class instance. Simply create a new object whose value is the prototype of the parent class, and then assign it to the child class prototype. The method Object.create(proto, [propertiesObject]) is used to create a new object. The __proto__ of the new object is equivalent to its parameter proto. Of course, Object.create may not be available in lower versions of IE, so the Object.create method is also custom-encapsulated below, but it is just a simple encapsulation. Let’s look at the example directly:
// Parent function Person
function Person(name, age) {
// Define some properties this.name = name;
this.age = age;
this.nature = ["auroras", "wind", "moon"];
}
// Define a method on the Person prototype Person.prototype.sayLove = function () {
console.log(this.name + " like " + this.nature[0]);
};
// Sub function Andy
function Andy(name, age) {
Person.call(this, name, age);
}
// If there is no Object.create() method, simply encapsulate if (!Object.create) {
Object.create = function (proto) {
function Temp() {}
Temp.prototype = proto;
return new Temp();
};
}
// Call the Object.create method to create a new pair of images, whose __proto__ is Person.prototype, and assign it to Andy.prototype (-------Implementation Core----------)
Andy.prototype = Object.create(Person.prototype);
//Modify the constructor to point to Andy.prototype.constructor = Andy;
Now we create two instances of Andy and test whether the inheritance of Person is implemented:
console.log(Andy.prototype.__proto__ === Person.prototype);
var andy1 = new Andy("andy1", "20");
var andy2 = new Andy("andy2", "21");
andy2.nature[0] = "sea";
console.log(andy1.name);
console.log(andy1.nature);
console.log(andy2.nature);
andy1.sayLove();
andy2.sayLove();
Works perfectly:
6. Class inheritance:After ES6 released the class syntax sugar, classes can be defined through classes and class inheritance can be implemented. Let’s look at the example directly:
//Define a parent class Animal
class Animal {
//Here the constructor points to the class itself, the same as es5 behavior constructor(name) {
this.name = name;
}
likeEat() {
console.log(this.name + " like eat " + this.food);
}
}
//Define a subclass Dog, inheriting the parent class Animal through extends
class Dog extends Animal {
constructor(name, food) {
//Inherit parent class attribute super(name) through super(attribute name);
this.food = food;
}
likeEat() {
//Inherit the parent class method through super.+parent class method super.likeEat();
}
}
Create a new Dog instance and test whether Dog inherits Animal:
var jinmao = new Dog("jinmao", "bone");
console.log(jinmao.name);
jinmao.likeEat();
You can see that it is perfectly implemented:
7. Summary:
This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM! You may also be interested in:
|
<<: How to implement one-click deployment of nfs in linux
>>: Detailed installation process of MySQL5.6.40 under CentOS7 64
Recommend
Vue implements a movable floating button
This article example shares the specific code of ...
How to import SQL files in Navicat Premium
I started working on my final project today, but ...
Implementing a simple timer based on Vue method
Vue's simple timer is for your reference. The...
A brief analysis of the problem of mysql being inaccessible when deployed with docker-compose
What is Docker-Compose The Compose project origin...
Docker removes abnormal container operations
This rookie encountered such a problem when he ju...
HTML unordered list bullet points using images CSS writing
Create an HTML page with an unordered list of at l...
Xftp download and installation tutorial (graphic tutorial)
If you want to transfer files between Windows and...
Full analysis of Vue diff algorithm
Table of contents Preface Vue update view patch s...
How to view the creation time of files in Linux
1. Introduction Whether the creation time of a fi...
How to install JDK 13 in Linux environment using compressed package
What is JDK? Well, if you don't know this que...
Detailed explanation of Docker+Jenkins+Gitlab+Django application deployment practice
1. Background In the context of rapid updates and...
How to remove the "Enter" in the form, "Submit" and "Enter != Submit"
To implement the "Enter != Submit" probl...
Q&A: Differences between XML and HTML
Q: I don’t know what is the difference between xml...
JavaScript implements AI tic-tac-toe game through the maximum and minimum algorithm
Without further ado, let’s run the screenshot dir...
Detailed explanation of the MySQL MVCC mechanism principle
Table of contents What is MVCC Mysql lock and tra...