The prototype attribute in JS

Source: Internet
Author: User

Each object in JavaScript has the prototype property, and the prototype property of the object in JavaScript is interpreted as a reference to the object type prototype.

This property is useful: Declare a common variable or function for a particular class.

You do not need to explicitly declare a prototype property because it exists in every constructor.

For example:

Function Cat ()

{

}

alert (Cat.prototype); The output is "Object"

As you can see, prototype is an object, so what's the use of this object?

For example, there is a people class:

function people (Id,name)

{

This.id = ID;

THIS.name = name;

}

People.prototype.address = "Earth";

We create two people objects

var people1 = new People (1, "small three");

var people2 = new People (2, "small Four");

Then the properties of People1 and People2 are

People1:people {ID: 1, name: " small Three", Address: "Earth"} People2:people {ID: 2, name: " small Four", Address: "Earth"} you see all the people in addition to their own unique property ID and name, there is a common attribute address, and we do not even specifically declare these attributes for each people. This is because when an object is created,This constructor assigns its property prototype to the internal property __proto__ of the new object. This __proto__ is used by this object to find its properties.

You can also add a common function to all objects by prototype. Here's a good thing: you don't need to create and initialize this function every time you construct an object.

For example:

function people (ID, name,sex)
{
This.id=id;
This.name=name;

This.sex = sex;

}
People.prototype.getsex=function getsexfunction ()
{
return this.sex;
}

People.prototype.setsex=function setsexfunction (Sexvalue)
{
This.sex = Sexvalue;
}

We can create objects as usual:

var people1=new people (1, "Joan", "male");
var people2=new people (2, "Kim", "female");
var people3=new people (3, "Sam", "shemale");

and verify it:

Alert (People1.getsex ()); Output "Male"
Alert (People2.getsex ()); Output "female"
Alert (People3.getsex ()); Output "Shemale"

We can also use prototype in this way:

A.prototype = new B ();

Understanding prototype should not confuse it with inheritance. A's prototype is an example of B, and it's understandable that a will clone the methods and properties in B all over again. A can use the methods and properties of B. The emphasis here is on cloning, not inheritance. This can happen: the prototype of A is an instance of B, and the prototype of B is also an instance of a.

Let's look at an example of an experiment.

function A ()
{
this.show= function ()
{
Alert ("A::show");
}
}

function B ()
{
}

B.prototype = new A ();
var B1 = new B ();
B1. Show (); Show A::show

Then there is a question, what if B contains a method with the same name as a method?

Example:

function A ()
{
this.show= function ()
{
Alert ("A::show");
}
}

function B ()
{

this.show= function ()
{
Alert ("B::show");
}
}

B.prototype = new A ();
var B1 = new B ();
B1. Show (); Show B::show

Experimental results show that the function will go to the function of the main body to find, if found to run, can not find the prototype to find the function. Or it can be understood that prototype does not clone a function with the same name.

Reference article:

http://blog.csdn.net/tianyitianyi1/article/details/6929916

Http://blog.sina.com.cn/s/blog_7045cb9e0100rtoh.html

Http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html

The prototype attribute in JS

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.