-
Notifications
You must be signed in to change notification settings - Fork 0
Home
This repository is part of a larger 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.
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).
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.
- Open up an Incognito window
- Start this projects "index.html" within Incognito window
- Press F12 on your keyboard to open up chromes debugging tools.
- Left click the item memory in the debugging tools.
- Use the option "Heap snapshot" and press the button
to generate a file.
- Generate instances and make another heap snapshot. The second file should be larger in size now.
- For more detailed heap analyzis, please check out the sources beneath.
This knowledge was gained:
- Effective JavaScript "68 Specific Ways to Harness the Power of JavaScript" by David Herman
Sources:
-
The Breakpoint Ep. 8: Memory Profiling with Chrome DevTools by Google Developers
-
How to Use Incognito Windows in Chrome by Daniel P. Howley, LAPTOP Senior Writer
-
Two ways of clearing an array in JavaScript by Dr. Axel Rauschmayer