During the object-oriented learning process of JS, I have been confused about constructor and prototype, read some blogs and books, feel I understand them, and now record as follows:
As we all know, there is a function in JS.It is commonly called a function.For example, the following code
js code:
1 function Person(name) 2 { 3 alert(name); 4 } 5 Person('js');//js
In the code above, Person really behaves like a normal function, so let's look at the code below
1 function Person(name) 2 { 3 this.name=name; 4 this.showMe=function() 5 { 6 alert(this.name); 7 } 8 }; 9 var one=new Person('<a href="http://Lib.csdn.net/base/javascript "class='replace_word'title=" JavaScript repository "target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript</a>'); 10 one.showMe();//JavaScript
Many people see the long-standing new operator and call Person a "class", but there is no keyword class, so it's a bit reluctant to call it a "class".Then come back and call Person the constructor of the class.These concepts seem to be all right, probably because everyone has learnt the traditional object-oriented languages (c++, c#, Java, etc.) and a mindset.In order for JavaScript to be object-oriented as well, you need to find the shadow of traditional object-oriented languages in javascript.However, according to javascript, the Person defined by a function is an Object (object), and it is also a very special object. There is an important difference between the object defined by a function and the object generated by a new operator.The difference is that the object defined by the function has a prototype attribute, which is not present for objects generated with new.
The prototype attribute points to a prototype object again. Note that the prototype attribute and the prototype object are two different things. Note the difference.There is also a constructor attribute in the prototype object, which also points to a constructor object, which is exactly the function function itself.
A little dizzy, look at the picture below:
Don't believe you can see the following code:
1 function Person(name) 2 { 3 this.name=name; 4 this.showMe=function() 5 { 6 alert(this.name); 7 } 8 }; 9 10 var one=new Person('js'); 11 12 alert(one.prototype)//undefined 13 alert(typeof Person.prototype);//object 14 alert(Person.prototype.constructor);//function Person(name) {...};
The code above proves that one does not have a prototype attribute.
Let's move on to the code:
1 function Person(name) 2 { 3 this.name=name; 4 this.showMe=function() 5 { 6 alert(this.name); 7 } 8 }; 9 10 Person.prototype.from=function() 11 { 12 alert('I come from prototype.'); 13 } 14 15 var one=new Person('js'); 16 17 one.showMe();//js,Nothing strange about the result 18 one.from();//I come from prototype.，Is the result a little strange?
To interpret this result, you'll need to look closely at the new operator.var one=new Person('js'); this statement executes as follows:
1 var one={};
2 Person.call(one,'js');
According to Insight into javascript, the process of creating objects in the new form can actually be divided into three steps:
The first step is to create a new object (called A).
The second step is to set the prototype object built into the object (A) to the one referenced by the constructor (that is, Person)prototype property;
The third step is to call the constructor (Person) as the this parameter to complete initialization such as member setup.
In the second step, a new noun appears, which is a built-in prototype object. Note that this new noun is not the same as a prototype object. To distinguish between calling it inobj,inobj points to the prototype object of the function Person.Any property or function that appears in person's prototype object can be used directly in one object, which is inherited from the prototype in javascript.
Dizzy again, picture above!
This allows one objects to directly access any properties and methods in Person's prototype object through the built-in prototype object inobj.This explains why one can access the form function in the code above.Because the prototype object has a constructor property, one can also access the constructor property directly.
Code:
1 function Person(name) 2 { 3 this.name=name; 4 this.showMe=function() 5 { 6 alert(this.name); 7 } 8 }; 9 10 Person.prototype.from=function() 11 { 12 alert('I come from prototype.'); 13 } 14 15 var one=new Person('js'); 16 17 one.showMe();//js,Nothing strange about the result 18 one.from();//I come from prototype.，Is the result a little strange? 19 alert(one.constructor);//function Person(name) {...} 20 alert(Person.prototype.constructor);//function Person(name) {...}
Next, see how inheritance works.
1 function Person(name) 2 { 3 this.name=name; 4 this.showMe=function() 5 { 6 alert(this.name); 7 } 8 }; 9 10 Person.prototype.from=function() 11 { 12 alert('I come from prototype.'); 13 } 14 15 function SubPerson() 16 { 17 } 18 SubPerson.prototype=new Person(); 19 20 var subOne=new SubPerson(); 21 subOne.from();//I come from prototype. 22 alert(subOne.constructor);//function Person(name) {...}; 23 alert(SubPerson.prototype.constructor);//function Person(name) {...};
Inheritance is implemented simply by setting the prototype of the subclass to an object of the parent class.Notice what's said here is the object!
What is the principle of inheritance through the prototype attribute?Or look at the graphical description and write code to verify it.
Note: The red box is where the subclass is linked to the parent class.This should be the legendary prototype chain.There is code below to verify.
js code:
1 function Person(name) 2 { 3 this.name=name; 4 this.showMe=function() 5 { 6 alert(this.name); 7 } 8 }; 9 10 Person.prototype.from=function() 11 { 12 alert('I come from prototype.'); 13 } 14 var father=new Person('js');//Use for the following demonstration showMe The method adopted js parameter,In practice, parameterless is often used 15 alert(father.constructor);//View Constructors,The result is:function Person(name) {...}; 16 function SubPer() 17 { 18 } 19 SubPer.prototype=father;//Notice here 20 SubPer.prototype.constructor=SubPer; 21 22 var son=new SubPer(); 23 son.showMe();//js 24 son.from();//I come from prototype. 25 alert(father.constructor);//function SubPer(){...} 26 alert(son.constructor);//function SubPer(){...} 27 alert(SubPer.prototype.constructor);//function SubPer(){...}
Based on the prototype chain shown above and the results of the code, I think I should understand why prototype is used to implement this
Inheritance in JS.
From: http://blog.csdn.net/niuyongjie/article/details/4810835