JavaScript inheritance Detailed

object-oriented and object-based

Almost every developer has a development experience with object-oriented languages such as C + +, C #, and Java. In the traditional object-oriented language, there are two very important concepts-classes and instances. A class defines the behavior and methods of a class of things, whereas an instance is a concrete implementation of classes. We also know that object-oriented programming has three important concepts-encapsulation, inheritance, and polymorphism.

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

12345678910

// 定义一个函数 - addfunctionadd(a, b) {    add.invokeTimes++;    returna + b;}// 因为函数本身也是对象，这里为函数add定义一个属性，用来记录此函数被调用的次数add.invokeTimes = 0;add(1 + 1);add(2 + 3);console.log(add.invokeTimes); // 2

simulating classes and inheritance in JavaScript

In object-oriented languages, we use classes to create a custom object. While everything in JavaScript is an object, what is the way to create a custom object?

This requires the introduction of another concept-prototype (prototype), we can simply think of prototype as a template, the newly created custom object is a copy of the template (prototype) (actually not a copy but a link, but the link is not visible, It feels like a copy to the people.

Let's take a look at an example of creating a custom object through prototype:

1234567891011121314

// 构造函数   functionPerson(name, sex) {       this.name = name;       this.sex = sex;   }   // 定义Person的原型，原型中的属性可以被自定义对象引用   Person.prototype = {       getName: function() {           returnthis.name;       },       getSex: function() {           returnthis.sex;       }   }

Here we refer to the function person as the constructor, which is the function that creates the custom object. As you can see, JavaScript simulates the functionality of a class by constructing functions and prototypes.
Code to create a custom object (instantiation Class):

1234	var   zhang = new   person ( "Zhangsan" "man" console.log (Zhang.getname ()); //"Zhangsan" var  chun = new  person ( "woman" console.log (Chun.getname ()); //"Chunhua"

When code var Zhang = new person ("Zhangsan", "man") executes, there are actually several things that are done internally:

• Creates a blank object (new Object ()).
• Copy the attributes in Person.prototype (key-value pairs) into this empty object (as we mentioned earlier, the internal implementation is not a copy but a hidden link).
• Pass the object through the This keyword to the constructor and execute the constructor.
• Assign this object to the variable Zhang.

To prove that the prototype template is not copied to the instantiated object, but rather a link, see the following code:

12345678910111213

functionPerson(name, sex) {    this.name = name;    this.sex = sex;}Person.prototype.age = 20;varzhang = newPerson("ZhangSan", "man");console.log(zhang.age); // 20// 覆盖prototype中的age属性zhang.age = 19;console.log(zhang.age); // 19deletezhang.age;// 在删除实例属性age后，此属性值又从prototype中获取console.log(zhang.age); // 20

This hidden prototype link, implemented within JavaScript, is the moist soil that JavaScript relies on to survive, and is the basis for the simulation of inheritance.

How do I implement simple inheritance in JavaScript?
The following example creates an employee class employee, which inherits all the properties from the prototype prototype from person.

12345678910111213

functionEmployee(name, sex, employeeID) {    this.name = name;    this.sex = sex;    this.employeeID = employeeID;}// 将Employee的原型指向Person的一个实例// 因为Person的实例可以调用Person原型中的方法, 所以Employee的实例也可以调用Person原型中的所有属性。Employee.prototype = newPerson();Employee.prototype.getEmployeeID = function() {    returnthis.employeeID;};varzhang = newEmployee("ZhangSan", "man", "1234");console.log(zhang.getName()); // "ZhangSan

The above implementation of inheritance is coarse, and there are many problems:

• It is not appropriate to instantiate a person when creating an employee constructor and prototype (hereafter referred to as a class).
• The constructor of the employee cannot invoke the constructor of the parent class person, resulting in a duplicate assignment of the name and sex attributes in the employee constructor.
• The function in the employee overrides the function with the same name in person, without overloading the mechanism (and the previous one is a type of problem).
• The syntax for creating JavaScript classes is too fragmented to be as elegant as the syntax in C#/java.
• The implementation has a pointing error in the constructor attribute, which is discussed in the second article.

We will refine this example in Chapter three.

implementation of JavaScript inheritance

Because JavaScript itself does not have complete classes and inherited implementations, and we also see a lot of problems with manual implementations, there are many implementations of this challenging task online:

• 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 each of these implementations in depth, culminating in an in-depth understanding of how classes and inheritance can be implemented in JavaScript.

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

JavaScript inheritance Detailed