A deep understanding of how JavaScript implements the _javascript technique of inheritance

Recently the most online saw a person interview Taobao experience, and then found himself a lot of not very clear place, so I write some articles to deepen their understanding of some problems.

One of the questions mentioned in the article is: How does JavaScript implement inheritance?

Below I will explain some of the methods and examples found on the Internet, in order to deepen their impression.

We know that functions in JavaScript are omnipotent, and can be used for class definitions in addition to the function definitions used.

JavaScript inheritance, it is also a bit strange, unlike C + + and some object-oriented languages, he does not have public,private, such as access control modification, there is no implement or other specific symbols to describe the implementation of inheritance.

The following example is a reference to the inheritance of JavaScript classes.

Copy Code code as follows:

<script type= "Text/javascript" >
function person () {
Property
This. Gender = "female";
This. Age = 18;
This. Words = "Silence";
Method
this.shouting = function () {
Alert ("Happy!") Method of the parent class ");
}
}
Inherited
function Programmer () {
This.base = person;
}
Programmer.prototype = new Person;
To add a new method to a subclass
Programmer.prototype.typeCode = function () {
Alert ("I'm knocking on the code!") It workers, very unhappy. Subclass of the Method ");
}
Call Example
function SayHello () {
var a = new programmer ();
alert (A.gender); Calling properties of the parent class
A.shouting (); Methods to invoke the parent class
A.typecode (); Methods to invoke subclasses
}
SayHello ();
</script>

In the example above, the first is to declare a person class, which contains some properties and methods, and then declares a programmer class, which has a base attribute that is not required, but is required for specification and later to look up the classes inherited by the object. It then copies the person class to the programmer prototype object (prototype), and then implements the class inheritance.

Some principles for 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 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:

Copy Code code as follows:

Constructors
function person (name, sex) {
THIS.name = name;
This.sex = sex;
}
Defines the prototype of person, in which attributes can be referenced by custom objects
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.

Here's an example to illustrate the specific work that JavaScript does by creating a custom object:

Copy Code code as follows:

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.
All work done.
To prove that the prototype template is not copied to an instantiated object, but rather a way of linking, see the following code:

Copy Code code as follows:

function person (name, sex) {
THIS.name = name;
This.sex = sex;
}
Person.prototype.age = 20;
var Zhang = new person ("Zhangsan", "Mans");
Console.log (Zhang.age); 20
Overwrite the age attribute in prototype
Zhang.age = 19;
Console.log (Zhang.age); 19
Delete Zhang.age;
This property value is then fetched from the prototype after the instance property age is deleted
Console.log (Zhang.age); 20

In the example above, if he had only copied it, the object would not exist after the age attribute was deleted, but the age attribute in the example would be able to output or overwrite the previous value, indicating that we simply deleted the attribute with the same name in the subclass. The age attribute in the parent class remains in the object through an invisible link.

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.

Copy Code code as follows:

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, instances 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

Well, here are some specific processes for JavaScript implementation inheritance, and ways to implement inheritance.

Of course, the inheritance mechanism in JavaScript is simply simulated, in some object-oriented languages, it's rough and flawed, but in general, it still doesn't and will reduce the enthusiasm of the front-end developers.