JS's prototype

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.