Detailed explanation of JavaScript inheritance (1)_js object-oriented

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:

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

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 look at an example of creating a custom object via prototype:

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

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):

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

When the code var zhang = new Person("ZhangSan", "man") is executed, 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:

    function Person(name, sex) {<br>      this.name = name;<br>      this.sex = sex;<br>    }<br>    Person.prototype.age = 20;<br><br>    var zhang = new Person("ZhangSan", "man");<br>    console.log(zhang.age);  // 20<br>    // 覆盖prototype中的age属性<br>    zhang.age = 19;<br>    console.log(zhang.age);  // 19<br>    delete zhang.age;<br>    // 在删除实例属性age后，此属性值又从prototype中获取<br>    console.log(zhang.age);  // 20<br>    

This hidden prototype link implemented within JavaScript is the warm soil on which JavaScript depends, and 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.

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

The above implementation of inheritance is very rough and has many problems:

• Person is instantiated when creating the Employee constructor and prototype (hereinafter referred to as the class), which is inappropriate.
• The constructor of Employee cannot call the constructor of the parent class Person, resulting in repeated assignment of the 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 the same type of problem as the previous one).
• The syntax for creating JavaScript classes is too fragmented and not as elegant as the syntax in C#/Java.
• There is a pointing error in the constructor attribute in the implementation, 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.