Detailed explanation of JavaScript inheritance Part 1_javascript skills

Object-oriented and object-based
Almost every developer has development experience in object-oriented languages ​​(such as C, C#, Java). In traditional object-oriented languages, there are two very important concepts - classes and instances. A class defines the public behaviors and methods of a class of things; and an instance is a specific implementation of the class. We also know that object-oriented programming has three important concepts - encapsulation, inheritance and polymorphism.

But in the world of JavaScript, all these features don’t seem to exist. Because JavaScript itself is not an object-oriented language, but an object-based language. There are some interesting features here. For example, everything in JavaScript is an object, including strings, arrays, dates, numbers, and even functions, such as the following example:

Copy code The code is as follows:

// Define a function - add
function add(a, b) {
add.invokeTimes;
return a b;
}
// Because the function itself is also an object, here defines an attribute for the function add to record the number of times this function is called
add.invokeTimes = 0;
add(1 1);
add(2 3);
console.log(add.invokeTimes); // 2

Simulate classes and inheritance in JavaScript
In object-oriented languages, we use classes to create a custom object. However, everything in JavaScript is an object, so how to create a custom object?
This requires the introduction of another concept - prototype. We can simply regard prototype as a template. The newly created custom objects are all copies of this template (prototype) (actually not copies but It’s a link, but this link is invisible and feels like a copy).
Let’s take a look at an example of creating a custom object through prototype:

Copy the code The code is as follows:

// Constructor
function Person(name, sex) {
this.name = name;
this.sex = sex;
}
// Define Person Prototype, the properties in the prototype can be referenced by custom objects
Person.prototype = {
getName: function() {
return this.name;
},
getSex: function() {
return this.sex;
}
}

Here we call the function Person a constructor, which is a function that creates a custom object. It can be seen that JavaScript simulates the functions of classes through constructors and prototypes.
Code to create a custom object (instantiated class):

Copy code The code is as follows:

var zhang = new Person("ZhangSan", "man");
console.log(zhang.getName()); // "ZhangSan"
var chun = new Person("ChunHua", "woman");
console.log(chun.getName()); // "ChunHua"

When the code var zhang = new Person("ZhangSan", "man") is executed When, the following things are actually done internally:
Create a blank object (new Object()).
Copy the attributes (key-value pairs) in Person.prototype to this empty object (as we mentioned earlier, the internal implementation is not a copy but a hidden link).
Pass this object into the constructor through the this keyword and execute the constructor.
Assign this object to variable zhang.
In order to prove that the prototype template is not copied into the instantiated object, but is a way of linking, please see the following code:

Copy code The code is as follows:

function Person(name, sex) {
this.name = name;
this.sex = sex;
}
Person.prototype.age = 20;
var zhang = new Person("ZhangSan", "man");
console.log(zhang.age); // 20
// Overwrite prototype The age attribute in
zhang.age = 19;
console.log(zhang.age); // 19
delete zhang.age;
// After deleting the instance attribute age, this attribute The value is obtained from prototype
console.log(zhang.age); // 20

This kind of hidden prototype link implemented inside JavaScript is the warm soil that JavaScript relies on to survive. , which is also the basis for simulation implementation inheritance.
How to implement simple inheritance in JavaScript?
The following example will create an employee class Employee, which inherits all the properties in the prototype prototype from Person.

Copy code The code is as follows:

function Employee(name, sex, employeeID) {
this.name = name;
this.sex = sex;
this.employeeID = employeeID;
}
// Point the Employee prototype to an instance of Person
// Because the Person instance can call methods in the Person prototype, the Employee instance can also call all properties in the Person prototype.
Employee.prototype = new Person();
Employee.prototype.getEmployeeID = function() {
return this.employeeID;
};
var zhang = new Employee("ZhangSan" , "man", "1234");
console.log(zhang.getName()); // "ZhangSan

The above implementation of inheritance is very rough and has many problems:
When creating the Employee constructor and prototype (hereinafter referred to as the class), Person is instantiated, which is inappropriate.
The constructor of Employee cannot call the constructor of the parent class Person, resulting in an error. Repeated assignment of name and sex attributes in the Employee constructor.
The function in Employee will overwrite the function of the same name in Person, and there is no overloading mechanism (this is a type problem like the previous one).
Create a JavaScript class. The syntax is too fragmented and not as elegant as the syntax in C#/Java.
There is a pointing error in the constructor attribute, which will be discussed in the second article.
We will improve this example in Chapter 3. 🎜>

Implementation of JavaScript inheritance

Because JavaScript itself does not have a complete implementation of classes and inheritance, and we have also seen many problems with manual implementation, there are already many implementations of this challenging task on the Internet:

Douglas Crockford -
• Prototypal Inheritance in JavaScript Douglas Crockford -
• Classical Inheritance in JavaScript John Resig -
• Simple JavaScript Inheritance Dean Edwards -
• A Base Class for JavaScript Inheritance
• Prototype
• Mootools
• Extjs

This series of articles will analyze these implementations in depth one by one, and ultimately achieve an in-depth understanding of how classes and inheritance are implemented in JavaScript.

In the next chapter, we will introduce relevant knowledge in class implementation, such as this, constructor, prototype, etc.