JavaScript inheritance detailed first _javascript tips

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 a common behavior and method of a class of things, and an instance is a concrete implementation of a category. We also know that object-oriented programming has three important concepts-encapsulation, inheritance, and polymorphism.

But in the JavaScript world, none of these features 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 everything in JavaScript is an object, including strings, arrays, dates, numbers, even functions, such as the following example:

Define a function-add function 
Add (A, b) { 
add.invoketimes++; 
return a + B; 
} 
Because the function itself is also an object, here defines a property for function add that records the number of times this function was invoked 
add.invoketimes = 0; 
Add (1 + 1); 
Add (2 + 3); 

simulate 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 this template (prototype) (actually not a copy but a link, except that 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:

constructor function person 
(name, sex) { 
this.name = name; 
This.sex = sex; 
} 
Defines the prototype of person, in which the attribute can be referenced by the custom object 
Person.prototype = { 
getname:function () {return 
this.name; 
}, 
getsex:function () {return 
this.sex; 
} 

Here we call the function person 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.
To create the code for the custom object (instantiated Class):

var Zhang = new person ("Zhangsan", "Mans"); 
Console.log (Zhang.getname ()); "Zhangsan" 
var chun = new Person ("Chunhua", "Woman"); 
Console.log (Chun.getname ()); "Chunhua" 

When the code var Zhang = new person ("Zhangsan" and "man") executes, there are actually several things internally:
Creates a blank object (new Object ()).
Copy 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 this object through the This keyword into the constructor and execute the constructor.
Assign this object to the variable Zhang.
To prove that the prototype template is not copied to an instantiated object, but rather a way of linking, see the following code:

function person (name, sex) { 
this.name = name; 
This.sex = sex; 
} 
Person.prototype.age =; 
var Zhang = new person ("Zhangsan", "Mans"); 
Console.log (Zhang.age); 
The age attribute in the coverage prototype 
zhang.age =; 
Console.log (Zhang.age); 
Delete zhang.age; 
After the instance property age is deleted, this property value is then fetched from the prototype 
Console.log (zhang.age);//20

This hidden prototype link, which is implemented in JavaScript, is the moist soil on which JavaScript relies, and also the basis for simulating inheritance.
How do I implement simple inheritance in JavaScript?
The following example creates an employee class employee that inherits all the attributes from the prototype prototype from person.

function Employee (name, sex, EmployeeID) { 
this.name = name; 
This.sex = sex; 
This.employeeid = EmployeeID; 
} 
Point the employee's prototype to an instance of person 
//Because instances of person can invoke methods in the person prototype, so an instance of employee can also invoke all attributes 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 implementation of the above about inheritance is rough, 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 employee cannot invoke the constructor of the parent class person, causing a duplicate assignment of the name and sex properties in the employee constructor.
Functions in employee overwrite functions with the same name in person, without mechanisms for overloading (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 for 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 a complete class and inheritance implementation, and we see a lot of problems with manual implementations, there are already 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 delve into these implementations in depth, culminating in an in-depth understanding of how to implement classes and inheritance in JavaScript.
In the next chapter we will introduce the relevant knowledge in the class implementation, such as this, constructor, prototype, etc.