JavaScript 内存管理

在某些编程语言中，编写良好有效的程序时，内存管理是一项必不可少的任务。本文将帮助您了解 JavaScript 中内存管理的不同概念。在 C 和 C++ 等低级语言中，程序员需要以某种手动方式关心内存的使用。另一方面，Javascript 在对象创建到环境中时会自动分配内存，并且在对象销毁时也会清理内存。JavaScript 可以自行管理所有这些，但这并不意味着开发人员不需要担心 JavaScript 中的内存管理。

任何编程语言中的内存管理都涉及三个重要阶段，称为内存生命周期 -

  • 分配程序中需要的内存。

  • 利用分配的内存单元。

  • 完成后，清除内存块。

在 JavaScript 中分配内存的不同策略

通过值初始化分配

在 JavaScript 中，我们不需要关心为简单变量分配内存。我们可以直接将值赋给一些变量，它会自行分配必要的内存。

语法

var variable1 = <value>
var variable2 = <value>

示例

对于简单的按值分配，请参阅以下示例。

源代码

<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style="color : #ff0000">
   </div>
   <script>
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')

      // actual javascript code
      try {
         var number = 52;
         var st = 'my_string';
         var student = {
            name: 'Smith',
            roll: 5,
            age: 23,
         };
         var arr = [15, null, 'another_string'];
         content += "Allocated memory for number: " + JSON.stringify(number) + '<br>'
         content += "Allocated memory for string: " + JSON.stringify(st) + '<br>'
         content += "Allocated memory for student: " + JSON.stringify(student) + '<br>'
         content += "Allocated memory for array: " + JSON.stringify(arr) + '<br>'
      } catch (err) {
         error += err
      } finally {
      
         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

从上面的例子可以清楚地看出，数字和字符串是单个值，分配也很简单。但是对于对象和数组，JavaScript 也可以根据它们的值轻松地分配内存。

通过函数调用分配

就像变量值赋值一样，我们也可以通过调用一些函数来创建一些内存块。例如，当函数返回一个单独的对象时，它会自动为系统分配一个新的内存块。

语法

Memory_reference = <function call which returns any value>

示例

以下示例使用一个作用于 HTML 文档的函数。因此，此程序将在浏览器或 HTML 编辑器中运行。

源代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
</head>
<body>
   <script>
      var e = document.createElement('div');
      e.innerHTML = "<h1> Header from JavaScript </h1>"
      document.body.appendChild(e);
   </script>
</body>
</html>

在此示例中，JavaScript 代码位于 HTML 中的 <script> 标记内。请注意，在这种情况下，最初，文档在 <body> 内没有任何 <div> 块。JavaScript 通过调用 createElement() 创建一个新组件，然后创建一个新的 div 块。此块分配内存，但仅在调用函数时分配。之后，新组件作为 body 标记的子元素添加，以便在 HTML 文档中使用它。

在 JavaScript 中使用先前分配的内存

使用先前分配的内存只是读取或写入先前分配的一些变量的值。我们可以用其他一些值更新其现有值。请参阅以下示例以更好地理解 -

示例

最初为变量分配内存，然后从中读取值。写入新值并再次从中读取。

源代码

<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style="color : #ff0000">
   </div>
   <script>
      var content = ''
      var error = ''
       opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')

      // actual javascript code
      try {
         var a = 52;            // allocate memory
         content += "Reading value of variable a: " + JSON.stringify(a) + '<br>'
         a = 100
         content += "Reading value of variable a: " + JSON.stringify(a) + '<br>'
      }
      catch (err) {
         error += err
      }
      finally {

         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

在 JavaScript 中释放内存块

当我们的目的达到时，我们可以删除分配的内存块。在某些低级语言中，这是必要的步骤，否则它可能会随着时间的推移占用内存空间，并且整个系统可能会崩溃。JavaScript 也原生支持垃圾回收器，它可以清理不必要的内存块并清理内存。但有时编译器无法理解某个块是否会在以后的案例中使用。在这种情况下，垃圾回收器不会清理该内存。要手动删除分配的位置，我们可以在变量名前使用“delete”关键字。

语法

delete <variable_name>

变量必须事先分配，否则在尝试删除该变量时会引发错误。让我们看一个例子来清楚地理解这个概念。

示例

源代码

<!DOCTYPE html>
<html>
<head>
   <title>HTML Console</title>
</head>
<body>
   <h3> Output Console </h3>
   <p> Output: </p>
   <div id="output">
   </div>
   <div id="opError" style="color : #ff0000">
   </div>
   <script>
      var content = ''
      var error = ''
      var opDiv = document.querySelector('#output')
      var opErrDiv = document.querySelector('#opError')

      // actual javascript code
      try {
         a = "a simple variable";     // allocate memory
         content += "Reading value of variable a: " + JSON.stringify(a) + '<br>'
         delete a
         content += "Reading value of variable a: " + JSON.stringify(a) + '<br>'
      }
      catch (err) {
         error += err
      }
      finally {

         // display on output console
         opDiv.innerHTML = content
         opErrDiv.innerHTML = error
      }
   </script>
</body>
</html>

注意 - “delete”关键字仅在变量直接分配（不使用 var 或 let 关键字）时才有效。

结论

使用任何编程语言，程序员都应该深入了解总体概念。内存管理是开发人员应该妥善管理的问题之一，否则它将占用不必要的内存块并在环境中造成重大问题。JavaScript 提供了一个额外的垃圾回收器工具，可以自动清理未使用的内存块。但是，我们也可以通过在变量名前使用“delete”关键字来释放内存（假设：变量是在不使用 let 或 var 关键字的情况下分配的）。

更新于： 2022-08-22

1K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告