Currently, JavaScript implementation inheritance is not implemented through the "extend" keyword, but through the constructor function and prototype attributes. First we create an animal class
js code
var animal = function (){ //This is the constructor function
this .name = 'pipi';
this .age = 10;
this .height = 0;
}
//Create an animal instance
var a1 = new animal ();
The difference between constructor and other ordinary functions is that 1. There is this keyword in the constructor, 2. Calling the constructor is the new keyword used. After calling the constructor animal through the new operator, the system will return an object, which is equivalent to
var a1 = { name:'pipi' ,age:10,height:0 }
//or
var a1 = new Object();
='pipi';
= 10;
= 0;
The same way to generate js objects.
At this point, we know how to define a class in js. Next, we show how to write a cat
var cat = function (){
this .play = function (){
alert('cat play')
}
}
cat .prototype = new animal ();
//prototype attribute points to an object
var c1 = new cat();
At this point, cat inherits the animal object, and an instance object of class cat class c1 has the attribute name, age, height, and method play.
So what role does prototype play?
prototype is like a pointer pointing to an object, which is called the prototype of a subclass object. When cat object is created, since cat constructor has a prototype attribute, cat instances will indirectly point to the prototype object (indirectly, each object has a constructor attribute pointing to its constructor).
Then the question is, "When we modify the name attribute of object c1, will we modify the name attribute value of its prototype?" The answer is no.
Next, detailed analysis:
1. Access the name attribute: First, when we first access the attribute, 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 it is found, the value will be returned. If it is not found, it will jump to the second step. Obviously, it is not found, because there is no definition in the constructor of cat. Step 2: When the first step is not searched, indirectly access the object pointed to by the prototype object. If the name attribute is found in the prototype object, the found attribute value will be returned. If it still doesn't find it, then recursively search for the prototype object's prototype object (go to find its grandfather) until the name attribute is found or there is no prototype object. If the name attribute is not found in the end, it will return undefined.
2. Set the name attribute: When we set the name attribute of the c1 object, and call = ' new name'; this process is much simpler. First check whether the object already has this property. If it already exists, modify the current value. If it does not exist, add a new property to the object and set the current value. It is worth mentioning that the prototype attribute is not accessed during the setting value process.
In order to deepen our understanding, let's look at the read-write-read process. When you read for the first time, since your 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, and do not find that the object itself has a name attribute, so create a new name attribute on the object itself and assign a value. In the third step, read the name attribute again. Since the name attribute has been newly created in the second step, the value set in the second step will be returned. It is worth mentioning that the value of the prototype object is not changed in these three steps.
Okay, here we have analyzed in detail that if Javascript objects are inherited, it is actually different from other object-oriented languages. The inheritance mechanism of JavaScript is the prototype inheritance of the object rather than type inheritance.
Haha, welcome to finish reading. If there is anything wrong, everyone is welcome to discuss!
js code
Copy the codeThe code is as follows:
var animal = function (){ //This is the constructor function
this .name = 'pipi';
this .age = 10;
this .height = 0;
}
//Create an animal instance
var a1 = new animal ();
The difference between constructor and other ordinary functions is that 1. There is this keyword in the constructor, 2. Calling the constructor is the new keyword used. After calling the constructor animal through the new operator, the system will return an object, which is equivalent to
Copy the codeThe code is as follows:
var a1 = { name:'pipi' ,age:10,height:0 }
//or
var a1 = new Object();
='pipi';
= 10;
= 0;
The same way to generate js objects.
At this point, we know how to define a class in js. Next, we show how to write a cat
Copy the codeThe code is as follows:
var cat = function (){
this .play = function (){
alert('cat play')
}
}
cat .prototype = new animal ();
//prototype attribute points to an object
var c1 = new cat();
At this point, cat inherits the animal object, and an instance object of class cat class c1 has the attribute name, age, height, and method play.
So what role does prototype play?
prototype is like a pointer pointing to an object, which is called the prototype of a subclass object. When cat object is created, since cat constructor has a prototype attribute, cat instances will indirectly point to the prototype object (indirectly, each object has a constructor attribute pointing to its constructor).
Then the question is, "When we modify the name attribute of object c1, will we modify the name attribute value of its prototype?" The answer is no.
Next, detailed analysis:
1. Access the name attribute: First, when we first access the attribute, 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 it is found, the value will be returned. If it is not found, it will jump to the second step. Obviously, it is not found, because there is no definition in the constructor of cat. Step 2: When the first step is not searched, indirectly access the object pointed to by the prototype object. If the name attribute is found in the prototype object, the found attribute value will be returned. If it still doesn't find it, then recursively search for the prototype object's prototype object (go to find its grandfather) until the name attribute is found or there is no prototype object. If the name attribute is not found in the end, it will return undefined.
2. Set the name attribute: When we set the name attribute of the c1 object, and call = ' new name'; this process is much simpler. First check whether the object already has this property. If it already exists, modify the current value. If it does not exist, add a new property to the object and set the current value. It is worth mentioning that the prototype attribute is not accessed during the setting value process.
In order to deepen our understanding, let's look at the read-write-read process. When you read for the first time, since your 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, and do not find that the object itself has a name attribute, so create a new name attribute on the object itself and assign a value. In the third step, read the name attribute again. Since the name attribute has been newly created in the second step, the value set in the second step will be returned. It is worth mentioning that the value of the prototype object is not changed in these three steps.
Okay, here we have analyzed in detail that if Javascript objects are inherited, it is actually different from other object-oriented languages. The inheritance mechanism of JavaScript is the prototype inheritance of the object rather than type inheritance.
Haha, welcome to finish reading. If there is anything wrong, everyone is welcome to discuss!