Preliminary understanding: We have to look at a few examples before talking about prototype and constructor.
| 1234 |
functionname(obj){ alert(obj)//"uw3c"}name("uw3c") |
This is an ordinary self-invocation of the example, everyone can understand, then look at the next example:
| 12345 |
functionname(obj){ alert(obj)//"uw3c"}var test = newname("uw3c")test(); |
The new is a "constructor", the difference between a method and a function that is directly declared is that the function constructed with the new operator is an object, and we look at the following example:
| 12345 |
functionuw3c(){}var test = new uw3c();alert(typeof uw3c);//functionalert(typeoftest);//object |
UW3C is a function, and test is an object, what's different besides the type?
| 123456 |
< Code class= "JS keyword" >function name () { alert (json.stringify (name.prototype)) //{} , is an empty object } name (); var test = new name (); alert (json.stringify (test.prototype)) //undefined, this object does not exist |
As you can see, the directly declared function has the prototype attribute, and the function of the new constructor does not exist prototype this attribute. What is a prototype:function defined object has a prototype property, prototype property points to a prototype object, note that the prototype property and the prototype object are two different things, pay attention to the difference. There is another constructor property in the prototype object, and this constructor property also points to a constructor object, which is exactly the function itself. Isn't it very round? This is represented by pseudo-code:
| 12345 |
varfunction{ prototype:prototype{ constructor:constructor == function }} |
Still don't understand? Look at the picture:
The role of prototype: What does this prototype do? Look at the following example:
| 12345 |
functionuw3c(){}uw3c.prototype.name = "a";var test = newuw3c();alert(test.name)//"a"; |
Strange, obviously not set the Name property for test, but why does it have a value? This is the prototype, the name object in the prototype property in UW3C, which is inherited to the property of the object test after UW3C is the new constructor. Then look at:
| 1234567 |
varname = "js";function uw3c(name){ alert(this.name);//"css"}uw3c.prototype.name = "css";var test = newuw3c();test(); |
Why is the value of alert not "JS"? The process is generally as follows:
| 12 |
vartest={};uw3c.call(test); |
The first step is to create a new object (test).
The second step sets the built-in prototype object of the object (test) to the prototype object referenced by the constructor (that is, the UW3C) prototype property.
The third step is to use the object (test) as the This parameter to call the constructor (that is, uw3c), to complete the initialization of the member settings.
In the second step there is a term that is built-in prototype object, note that this term and prototype object is not one thing, in order to distinguish I call it inobj,inobj point to the function uw3c prototype object. Any property or function that appears in the UW3C prototype object can be used directly in the test object, which is the prototype inheritance in JS. Prototype is inheritance or cloning: Look at the above, some people may think that the construction of a function is copied the original function of the prototype property, here you notice that inheritance is not copied, see the code below:
| 123456 |
functionuw3c(){}uw3c.prototype.name = "b";var test = newuw3c();alert(JSON.stringify(test));//{}alert(test.name);//"b" |
If the clone should be able to print out a property of test name, but it does not, but can print out the test.name, so is the test inherits the Uw3c.prototype property. Prototype's advantages: Speaking so much, we will certainly ask, what is the use of prototype, what advantages does it have? Look at the following code:
| 1234567 |
function uw3c(name){ alert("姓名:" + name + ",年龄:" + this.age + ",性别:" + this.sex);}uw3c.prototype.age = 15;uw3c.prototype.sex = "man";var test1 = new uw3c("css");//姓名:css,年龄:15,性别:manvar test2 = new uw3c("js");//姓名:js,年龄:15,性别:man |
After reading this example, we should understand that the use of prototype can be both public and private.
JS's prototype