The basic type values are: undefined, NUll, Boolean, Number and String. These types occupy a fixed size space in memory, and their values are saved in the stack space, which we access by value.
(1) Value types: numerical, boolean, null, undefined.
(2) Reference type: object, array, function.
If the value assigned is a reference type, space must be allocated for this value in heap memory. Since the size of such values is not fixed (objects have many properties and methods), they cannot be saved to stack memory. However, the memory address size is fixed, so the memory address can be saved in the stack memory.
<script type="text/javascript">var box = new Object(); //Create a reference type var box = "lee"; //The basic type value is the string box.age = 23; //It is weird to add attributes to basic type values, because only objects can add attributes. alert(box.age); //It is not a reference type, and cannot be output;</script>
In short, the heap memory stores reference values, and the stack memory stores fixed type values.
<script type="text/javascript"> var man = new Object();//man points to the spatial address of the stack memory man.name = "Jack"; var man2 = man;//man2 obtains the address of man's pointing alert(man2.name);// Both pop up Jack alert(man.name);</script>
Copy variable values
Let’s take a look at the following example:
<script type="text/javascript"> var man = new Object();//man points to the spatial address of the stack memory man.name = "Jack"; var man2 = man;//man2 gets the address of man's pointing address man2.name = "ming";//Because they all point to the same object and the same name, no matter who is modified, everyone has modified alert(man2.name);// Both pop up ming alert(man.name);</script>
From the above, we can see that in terms of variable copying, the basic type and the reference type are also different. The basic type copies the value itself, while the reference type copies the address.
Pass parameters
In ECMAScript, all the parameters of functions are passed by values.
<script type="text/javascript"> function box(num){ //Pass num by value num+=10; return num; } var num = 10; var result = box(num); alert(result); //If it is passed by reference, then the num in the function will become a global variable, and the number outside is replaced by alert(num); //In other words, 20 should be output in the end (10 is output here)</script>JavaScript is not passed by reference. If there is a reference, the variables in the function will be global variables and can also be accessed externally. But this is obviously impossible.
Execution environment and scope
The execution environment is one of the most important concepts in JavaScript. The execution environment defines variables or functions that have permission to access other data.
The global execution environment is the most peripheral execution environment. In a web browser, the global execution environment is a window object. Therefore, all functions of global variables are created as properties and methods of windows.
<script type="text/javascript"> var name = "Jack"; //Define global variable function setName(){ return "trigkit4"; } alert(window.name); //Global variable, the outermost, belongs to the window attribute alert(window.setName()); //Global function, the outermost, belongs to the window method</script>When the code in the execution environment is executed, the environment is destroyed, and the variables and functions saved in it are also destroyed. If it is a global environment, all programs must be executed or the web page will be destroyed.
Remove local variables of var
<script type="text/javascript"> var name = "Jack"; function setName(){ name = "trigkit4"; //Remove var and become a global variable} setName(); alert(name);//Pop up trigkit4</script>By passing parameters, it is also a local variable
<script type="text/javascript"> var name = "Jack"; function setName(name){ //Passing arguments is also the local variable alert(name); } setName("trigkit4");//Pop up trigkit4 alert(name);//Pop up Jack</script>The function also contains functions, and only this function can access the inner layer of functions.
<script type="text/javascript"> var name = "Jack"; function setName(){ function setYear(){ //The scope of the setYear() method is within setName() return 21; } } alert(setYear());//Unable to access, an error</script>You can access it by:
<script type="text/javascript"> var name = "Jack"; function setName(){ function setYear(){ //The scope of the setYear() method is within setName() return 21; } return setYear(); } alert(setName()); //Pop 21</script>Another scope example:
<script type="text/javascript"> var name = "Jack"; function setName(){ function setYear(){ //The scope of the setYear() method is in setName() var b = "hi"; //The scope of the variable b is in setYear() return 21; } alert(b);//The inaccessible}</script>When the code is executed in an environment, something called a scope chain will be formed. Its purpose is to ensure orderly access to variables and functions with access rights in the execution environment (referring to accessing according to the rule level). The front end of the scope chain is the variable object of the execution environment.
Scope
When a variable is not declared or declared in a function, it is a global variable, and it has a global scope. All properties of a window object have a global scope; it can be accessed anywhere in the code, and variables declared internally and modified with var are local variables, which can only be used in the function body. Although the function parameters do not use var, they are still local variables.
No block-level scope
No block-level scope
// if statement: <script type="text/javascript">if(true){ //The curly braces of the if statement have no scope function. var box = "trigkit4";}alert(box);//Popt up trigkit4</script>The same is true for loop statements.
Query of variables
In variable query, accessing local variables is faster than global variables, so there is no need to search up the scope chain.
As shown in the following example:
<script type="text/javascript"> var name = "Jack"; function setName(){ var name = "trigkit4"; return name; //Search for variables from the bottom layer up} alert(setName()); </script>Memory issues
JavaScript has an automatic garbage collection mechanism, and once the data is no longer in use, it can be set to "null" to release the reference
Recycle reference
A very simple example: a DOM object is referenced by a Javascript object, and at the same time refers to the same or other Javascript object. This DOM object may cause a memory leak. References to this DOM object will not be recycled by the garbage collector when the script is stopped. To break a circular reference, the object that refers to the DOM element or the reference to the DOM object needs to be assigned a value of null.
Closure
When introducing variables outside the closure into the closure, this object cannot be garbage collected (GC) when the closure ends.
var a = function() { var largeStr = new Array(1000000).join('x'); return function() { return largeStr; }}();DOM leak
When the original COM is removed, the sub-node reference cannot be recycled if it is not removed.
var select = document.querySelector;var treeRef = select('#tree');//In the COM tree, leafRef is a child node of treeFre var leafRef = select('#leaf'); var body = select('body');body.removeChild(treeRef);//#tree cannot be recycled because treeRef is still there //Solution: treeRef = null;//Tree cannot be recycled because leafRef is still there leafRef = null;//Now #tree can be released.Timers metering (determining) timer leak
Timers are also common places where memory leaks occur:
for (var i = 0; i < 90000; i++) { var buggyObject = { callAgain: function() { var ref = this; var val = setTimeout(function() { ref.callAgain(); }, 90000); } } buggyObject.callAgain(); //Although you want to recycle, timer is still buggyObject = null;}Debugging memory
Chrome's own memory debugging tool can easily view memory usage and memory leaks:
Click record in Timeline -> Memory: