JavaScript object-oriented-prototype Memory Model

Source: Internet
Author: User
In JavaScript, each function has a prototype attribute, which is an object, it enables all object instances of a specific type to share its attributes and methods. In JavaScript, each function has a prototype attribute, which is an object, it enables all object instances of a specific type to share its attributes and methods.

A prototype is a very special object in JavaScript. After a function is created, a prototype object is generated. After a specific object is created through the constructor of this function, in this specific object, an attribute points to the prototype.

The following code demonstrates how to create a JavaScript Object through a prototype. By using prototype-based creation, you can set attributes and methods as the properties and methods of the object Person. They cannot be called through the window, so they meet the object encapsulation requirements.

function Person(){}; Person.prototype.name = "Leon";Person.prototype.age = 22;Person.prototype.say = fucntion(){  alert(this.name + "," + this.age);} var p1 = new Person();p1.say();

Analysis of the prototype Memory Model

During the process of creating a class using the prototype method, the prototype has four different states in the memory. We still create the Person class example above to analyze the prototype memory model. The Code is as follows:

// First state function Person () {}; // Second State Person. prototype. name = "Leon"; Person. prototype. age = 22; Person. prototype. say = fucntion () {alert (this. name + "," + this. age) ;}// the third State. After an object is created, a _ proto _ property is directed to the prototype. // if this property is not found inside the object during use, in the prototype, find var p1 = new Person (); p1.say (); // The fourth state: var p2 = new Person (); p2.name = "Ada "; p2.say ();

First, we create a Person function through function Person () {};. The prototype Memory Model of the Person function is shown in:

// Function Person (){};

In the memory, a space will be allocated to the Person function. There is a prototype attribute in the space, a prototype object will be created for the function, and a constructor attribute will be included in the prototype object. The relationship between the Person Function and Its prototype object is shown in. We call this memory model the first State of the prototype.

Then we set the attributes and methods for the Person function through the prototype. This is the second State of the prototype memory model.

// The second state is Person. prototype. name = "Leon"; Person. prototype. age = 22; Person. prototype. say = fucntion () {alert (this. name + "," + this. age );}

After the above Code is added, the prototype memory model structure is shown in:

In this case, the methods and attributes added through the prototype are stored in the memory space of the prototype.

Next, after the Person class is created, you can use the new keyword to create the Person object, which is the third state of the prototype memory model.

// The third State is var p1 = new Person (); p1.say ();

Shows the third state of the prototype Memory Model:

When the object p2 is created, it is also allocated space in the memory. In the p2 object space, A _ proto _ internal attribute points to the Person prototype.

When we use p2.name = "Ada"; to assign a value to the name attribute of object p2, JavaScript will set its own name attribute in p2's memory space, set the value to "Ada ".

Then we call the say () method. In this method, we need to obtain the name attribute of p2. It will first find out whether the p2 object has the name attribute in its own memory space. If yes, it will not be searched in the Person prototype. Obviously, there is a name attribute in the space of the p2 object, so the name printed by calling the say () method is "Ada" rather than "Leon ".

Note that the values in the prototype will not be replaced, but will only be overwritten by attributes of the same name in the object's own space during attribute search.

The above are four states of the prototype memory model. Understanding these four states is the key to understanding the prototype.

The above is the content of the JavaScript object-oriented-prototype memory model. For more information, see PHP Chinese Network (www.php1.cn )!

Related Article

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.