Home

Welcome to the Javascript-methods-on-prototypes- wiki!

_{This repository is part of a larger project!}

◀️ PREVIOUS PROJECT| NEXT PROJECT ▶️

---

It is recommended to use javascript`s prototype when implementing methods or member variables within function-classes.

📕 One reason to do that would be the reducing of memory usage.

Here follows two code examples

First code snippet

function MyClass()
{
    this.attribute = true;
}

//Both have an own member variable "attribute"
var MyFirstInstance = new MyClass();
var MySecondInstance = new MyClass();

Second code snippet

function MyClass()
{}

//Here is the difference to the first code snippet
MyClass.prototype.attribute = true;

//Both have no member variable "attribute", 
//but access to the variable "prototype.attribute"
var MyFirstInstance = new MyClass();
var MySecondInstance = new MyClass();

The first code snippet should have more memory demands than the second one. The reason for that it seems, is that, that the member variable attribute in the first code snippet exists in both instances (sum is two variables in memory), while in the second code snippet both instances should only have access to the variable prototype.attribute (sum is only one variable in memory).

Content

The user interaction part should look like the content as seen below by starting "index.html" in a web browser.

• Radio 🅱️utton "Healthy Growth" is the option to be selected for storing class methods in prototype

• Radio 🅱️utton "Unhealthy Growth" is the option to be selected for storing class methods with the keyword this

• The input in area "Select Number of Growth" defines how many instances of the specific class depending on options within the area "Select Type of Growth" will be generated

• 🅱️ utton "START" generates the instances

• 🅱️ utton "REFRESH" refreshes the page (for cleaning memory)

To use the project just download the files and execute "index.html". Note that all files(folder "wiki_images" excluded) should be placed in the same folder so that the functionality of the code is guaranteed.

Memory Usage Test

1. Open up an Incognito window
2. Start this projects "index.html" within Incognito window
3. Press F12 on your keyboard to open up chromes debugging tools.
4. Left click the item memory in the debugging tools.
5. Use the option "Heap snapshot" and press the button to generate a file.
6. Generate instances and make another heap snapshot. The second file should be larger in size now.
7. For more detailed heap analyzis, please check out the sources beneath.