Principle analysis of javascript class inheritance mechanism_js object-oriented

The current inheritance method in JavaScript is not implemented through the "extend" keyword, but through the constructor function and prototype attributes. First we create an animal class

js code

Copy code The code is as follows:

var animal = function (){ //This is the constructor function

this .name = 'pipi';
this .age = 10;
this .height = 0;
}
//Create an instance of an animal
var a1 = new animal ();

The difference between the constructor and other ordinary functions is that 1. There is the this keyword in the constructor , 2. Calling the constructor uses the new keyword. After calling the constructor animal through the new operator, the system will return an object, which is equivalent to

Copy code The code is as follows :

var a1 = { name:'pipi' ,age:10,height:0 }
//or
var a1 = new Object();
a1. name='pipi';
a1.age = 10;
a1.height = 0;

This is the same way to generate js objects.
Now we know how to define a class in js, next we show how to write a cat

Copy code The code is as follows:

var cat = function (){
this .play = function (){
alert('cat play')
}
}
cat .prototype = new animal ();
//The prototype attribute points to an object
var c1 = new cat();

At this point, cat inherits the animal object, An instance object c1 of class cat has attributes name, age, height, and method play.
So what role does prototype play?
Prototype is like a pointer, it points to an object, and this object is called the prototype of the subclass object. When the cat object is created, since the cat constructor has the prototype attribute, the cat instance will indirectly point to the prototype object (it is said to be indirect because each object has a constructor attribute pointing to its constructor) ).
Then the question is, "When we modify the name attribute of object c1, will it modify the name attribute value of its prototype?" The answer is no.
Next detailed analysis:
1. Access the name attribute: First, when we access the attribute of c1.name for the first time, we will get the value "pipi", which is the same as we expected. But you may not know the calculation process.
The calculation process is as follows: Step 1: Check whether there is a name attribute in the c1 object. If found, return the value. If not, jump to the second step. Obviously it is not found because it is not defined in the constructor of cat. . Step 2: When not found in the first step, indirectly access the object pointed to by the prototype object. If the name attribute is found in the prototype object, return the found attribute value. If it is still not found, then recursively search for the prototype object of the prototype object (find its grandpa) until the name attribute is found or there is no prototype object. If the name attribute is not found at the end, undefined is returned.
2. Set the name attribute: When we set the name attribute of the c1 object, and call c1.name= 'new name'; this process is much simpler. First, check whether the object already has this attribute. If it exists, modify the current value. If it does not exist, add a new attribute to the object and set the current value. It is worth mentioning that the prototype property is not accessed during the value setting process.
In order to deepen our understanding, let’s look at the read-write-read process again. When reading for the first time, since its own object does not have a name attribute, the value of the name attribute of the prototype object will be returned. The second step is to write the value of name. If it is also not found that the own object has a name attribute, then create a new name attribute on the own object and then assign the value. The third step is to read the name attribute again. Since the name attribute has been created in the second step, the value set in the second step is returned. It is worth mentioning that the value of the prototype object is not changed in these three steps.
Okay, this is the detailed analysis of how JavaScript objects implement inheritance. In fact, unlike other object-oriented languages, the inheritance mechanism of JavaScript is prototype inheritance of objects rather than type inheritance.
Haha, you are welcome to read it. If there is anything wrong, you are welcome to discuss it!