Explain JS memory management mechanism and verification

javascriptThe column introduces the memory management mechanism and verification

##Recommended (Free): JavaScript (Video)

Scope

JavaScript variables are limited by scope. If it exceeds the scope, the variable cannot be used again. The advantage of this is:

It can avoid the current variable being converted into a global variable
• Effectively limits the role of the variable Area

And the variable scope will also produce different scopes according to the way of declaration:

Undeclared: global variable
• var Statement: The scope is in function
• let, const Statement: The scope is in {} Variables declared in

var

The scope of variables declared within a function will be limited to the call stack of the function. Variables within this scope cannot be obtained directly. In the following example, the variables within the

fn function cannot be viewed globally.

function fn() {
  var a = 1;
}
fn();
console.log(a); // 无法得到 fn 函数內的 a 变量

So "immediate functions" are often used to limit the scope of variables, mainly to avoid the generation of global variables.

(function() {
  var b = 1;
})();
console.log(b); // 无法得到 fn 函数內的 b 变量

let and const declared variables

The new

let and const scopes added after ES6 are the same as Different from the past, {} is used as a way to limit the scope. This allows for loops and some grammars to avoid generating redundant variables to affect the scope. The difference between

and

var is that the scope of variables defined by const is limited to {}. So the variable c in this example can get its value externally, but d cannot.

{
  var c = 1;
  const d = 1;
}
console.log(c); // 1
console.log(d); // Uncaught ReferenceError: d is not defined，无法取到变量 d

Memory management mechanism

Every time we add a variable, a location will be occupied in the memory to save its value so that it can be run later in the program Can be used multiple times.

The following code will open up a

a space in the memory to store the value of the number 1.

var a = 1

The process is as follows:

Open up a memory space to store variables
1. a, but there is no assignment yet (for reasons, please refer to: Hoisting)

Assign a value to
1. a.

#All variables will occupy memory space. In addition, the properties of objects, arrays, and function parameters will also be occupied using the same concept. When a function is called, the scope of each function will also occupy memory repeatedly. As applications become more complex, memory may be exhausted if it continues to occupy memory without properly releasing it.

The JavaScript engine has a memory recycling mechanism that will release variable memory that is no longer used. The basic concept is: the memory will be released when there are no references pointing to it.

From MDN: collectible if there are zero references pointing to it.

Verification of memory release

The following uses an example to illustrate and verify memory The release mechanism first uses a function to generate a very long string. Long strings will occupy a lot of memory space.

After calling the

randomString function, a very long string will be returned:

function randomString(length) {
  var result = '';
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var charactersLength = characters.length;
  for (var i = 0; i Case 1: Keep the variable in a referenceable state (memory will not be released) <h4></h4>Define a global variable<p>demoData<code>. This variable will continue to be referenced. </code></p><pre class="brush:php;toolbar:false">var demoData = []; // 全局变量
function getData() {
  for (let i = 0; i After executing this code, enter the Memory page in Chrome DevTools. This function can get the memory status occupied by the current page. Next click the "Take snapshot" button. <p></p><p><img src="https://img.php.cn/upload/image/189/951/684/1609320713198525.png" title="1609320713198525.png" alt="Explain JS memory management mechanism and verification"></p>You can see that after executing this code, it currently occupies 6.2MB of memory space (note: any browser environment and plug-ins will affect the occupied memory status). <p></p><p><img src="https://img.php.cn/upload/image/742/181/269/1609320718742831.png" title="1609320718742831.png" alt="Explain JS memory management mechanism and verification"></p>Case 2: Make the variable unable to be referenced again (release the memory after execution) <h4></h4>Limit the scope of the variable so that the variable can no longer be referenced externally. <p></p>This code will still execute this function and assign the value to the variable, but the value of <p>demoData<code> cannot be referenced externally again. </code></p><pre class="brush:php;toolbar:false">function getData() {
  var demoData = []; // 局部变量
  for (var i = 0; i <p>然后回到 Memory 页点击 "Take snapshot" 重新取得内存的状态，接下来会得到与前面不同的结果，这次只占用了 1.2MB 的内存（其中 5MB 被释放掉了）</p><p><img src="https://img.php.cn/upload/image/148/641/618/1609320723163241.png" title="1609320723163241.png" alt="Explain JS memory management mechanism and verification"></p><p><strong>总结</strong></p><p>通过前面的例子，我们知道了作用域以及内存之间的关系，而内存管理也是前端打工人必须要掌握的知识（除了控制内存的使用大小，还需在必要时保留而不被释放）。</p>

The above is the detailed content of Explain JS memory management mechanism and verification. For more information, please follow other related articles on the PHP Chinese website!