[JavaScript] class 3-detailed explanation of the principle of the Javascript class Inheritance Mechanism

Detailed explanation of the principle of the Javascript class Inheritance Mechanism

Currently, JavaScript implementation inheritance is not implemented through the "extend" keyword, but through the constructor function and prototype attributes. First, create an animal class.

JS Code

1. VaR animal = function () {// This is the constructor function.
   
2. This. Name = 'pipi ';
3. This. Age = 10;
4. This. Height = 0;
5. }
6. // Create an animal instance
7. VaR a1 = new animal ();

The difference between constructor and other common functions is that 1. constructor has the this keyword, 2. Calling constructor is the New Keyword used. After the new operator calls the constructor animal, the system returns an object, which is equivalent
This is equivalent to generating JS objects.

Now we know how to define a class in JS. Next we will show how to write a cat

JS Code

1. VaR a1 = {Name: 'pipi', age: 10, height: 0}
3. // Or
4. VaR a1 = new object ();
5. A1.name = 'pipi ';
6. A1.age = 10;
7. A1.height = 0;
   

 

JS Code

1. VaR cat = function (){
2. This. Play = function (){
3. Alert ('cat play ')
4. }
5. }
6. Cat. Prototype = new animal ();
7. // The prototype property points to an object
   
8. VaR C1 = new CAT ();
   

Here, cat inherits the animal object. An Instance Object C1 in cat class has the attributes name, age, height, and method play.
So what role does prototype play?
Prototype is like a pointer pointing to an object. This object is called a prototype of a subclass object. When a cat object is created, because the cat constructor has the prototype attribute, then the cat instance points to the prototype object indirectly (because each object has a constructor attribute pointing to its constructor ).
Then the question arises: "Will we modify the prototype name attribute value when modifying the name attribute of the object C1 ?", The answer is no.
Next we will explain in detail:
1. Access name attribute: first, when we first access the c1.name attribute, we will get the value "Pipi", which is the same as we expected. However, you may not know the computing process.
The calculation process is as follows: Step 1: Check whether the name attribute exists in the C1 object. If it is found, the return value is returned. If it is not found, it is skipped to step 2, which is obviously not found, because Cat constructor is not defined. Step 2: when the first step is not found, indirectly access the object pointed to by the prototype object. If the name attribute is found in the prototype object, the property value is returned. If no prototype object is found, Recursively search for the prototype object (the grandfather of the prototype object) until the name attribute is found or the prototype object is not found. If the name attribute is still 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 property. if it already exists, modify the current value. If it does not exist, add a property for the object and set the current value. It is worth mentioning that the prototype attribute is not accessed during the set value process.

For better understanding, let's look at a read-write-read process. During the first read, the value of the name attribute of the prototype object will be returned because its object does not have the name attribute. Step 2: Write the name value and do not find that the object itself has the name attribute. Create a new name attribute on the object and assign a value to it. Step 3: Read the name attribute again. Because the name attribute has been created in step 2, the value set in step 2 is returned. It is worth mentioning that the value of the prototype object is not changed in these three steps.

Now, we have analyzed in detail how JavaScript objects are inherited. What is actually different from other object-oriented languages is that the Inheritance Mechanism of JavaScript is object prototype inheritance rather than type inheritance.

Turn: http://jimichan.javaeye.com/blog/119815