In-depth understanding of how JavaScript implements inheritance

In-depth understanding of how JavaScript implements inheritance_javascript skills

WBOY

Release： 2016-05-16 17:09:32

Original

1059 people have browsed it

Recently, I read online about someone’s experience during an interview with Taobao, and found that there were many things that I was not clear about, so I wrote an article to deepen my understanding of some issues.

A question mentioned in the article is: How does JavaScript implement inheritance?

Below I will explain some methods and examples found on the Internet to deepen my impression.

We know that function in JavaScript is versatile. In addition to being used for function definition, it can also be used for class definition.

JavaScript’s inheritance is a bit strange. Unlike C and some object-oriented languages, it does not have public, private and other access control modifications, and there is no implement or other specific symbols to indicate inheritance.

For inheritance of JavaScript classes, please refer to the following example.

Copy code The code is as follows:

In the above example, a person class is first declared, which contains some attributes and methods, and then a programmer class is declared, which has a base attribute. This attribute is not required, but for the sake of specifications and future You need to write it when looking for the class that the object inherits, and then copy the person class to the programmer's prototype object (prototype); thus realizing class inheritance.

Simulate some principles of 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() {
                                                                                                                                            {
                                                                                                                                                                                                                                                                                                  ;

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. 


The following is an example to illustrate the specific work done by javascript when creating a custom object: 

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, 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.
All work done.
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

In the above example, if it is only obtained by copying, after deleting the age attribute, the object will not exist. However, the age attribute in the example can still be output or overwritten. The previous value indicates that we have only deleted the attribute with the same name in the subclass, and the age attribute in the parent class still exists in the object through an invisible link.

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 prototype of Employee to an instance of Person
// Because Person Instances of Employee can call methods in the Person prototype, so instances of Employee 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

Okay, the above are some specific processes for implementing inheritance in JavaScript , and methods to implement inheritance .

Of course to summarize, the inheritance mechanism in JavaScript is only based on simulation. Compared with some object-oriented languages, it is rough and has some flaws. However, in general, this still does not slow down front-end development. author’s enthusiasm in this regard.