5个常见的JavaScript内存错误-猿码集

1.引用类型赋值错误

在 JavaScript 中，内存分为两种：栈内存和堆内存。基本类型数据（number、string、boolean、null、undefined）存放在栈内存中，而引用类型数据（Object、Array、Function、Date 等）则存放在堆内存中。

当我们将一个引用类型赋值给另一个变量时，实际上是将该值的内存地址赋值给了新变量，而不是新建一个完全相同的对象。例如：


let a = [1, 2, 3];
let b = a;

此时 b 中存放的并不是 [1, 2,3] 这个数组本身，而是该数组在堆内存中的地址。因此，当我们操作 b 中的元素时，实际上是在操作 a 中相同位置的元素。

这种赋值方式可能会引发一些问题，例如：

1.1 修改 b 影响 a

因为 b 存放的是数组 a 在堆内存中的地址，所以当更改 b 中元素的时候，相应位置的元素也会被更改。


b.push(4);
console.log(a); // [1, 2, 3, 4]
console.log(b); // [1, 2, 3, 4]

上述代码中，将 4 添加到了 b 中，但由于 b 和 a 共享同一个数组，在 a 中也被添加了。

1.2 修改 a 影响 b

与上述情况相反，因为 b 中存放的是 a 在堆内存中的地址，所以当更改 a 中元素的时候，b 中相应位置的元素也会被更改。


a.unshift(0);
console.log(a); // [0, 1, 2, 3]
console.log(b); // [0, 1, 2, 3]

上述代码中，在 a 数组第一个位置添加了元素 0，结果 b 也受到了影响。

1.3 深拷贝解决问题

为了避免上述情况的发生，可以使用深拷贝，将一个完整的对象赋值给新变量。这样，修改新变量的值不会影响原对象，两者完全独立。常用的深拷贝方法有 JSON.parse(JSON.stringify()) 、递归等方法。


let a = [1, 2, 3];
let b = JSON.parse(JSON.stringify(a));
b.push(4);
console.log(a); // [1, 2, 3]
console.log(b); // [1, 2, 3, 4]

上述代码中，使用 JSON.stringify() 将 a 转换为字符串，在使用 JSON.parse() 转换回来，这样就得到了一个新的数组 b，a 和 b 互不干扰。

2.未释放内存导致的内存泄漏错误

当变量在不再有用时，应该及时释放所占用的内存。如果没有释放，程序将一直占用该部分内存，最终可能导致内存泄漏错误。最常见的场景是在循环中创建对象，但忘记在循环结束时销毁它们。例如：


function createObj() {
  let obj = new Object();
  // do something
  return obj;
}
for (let i = 0; i < 1000000; i++) {
  createObj();
}

上述代码中，在循环中调用了 createObj() 方法来创建对象，但没有考虑销毁它们，导致内存占用过高。

解决方法是在不需要使用这些对象时，显式地销毁它们。


function createObj() {
  let obj = new Object();
  // do something
  return obj;
}
for (let i = 0; i < 1000000; i++) {
  let obj = createObj();
  obj = null; // 销毁该对象
}

上述代码中，在每次循环中，先将 obj 变量分配给新的对象，然后在它不再需要时将其设置为 null，这样 JavaScript 引擎就可以在下一次垃圾回收时将其销毁。

3.循环中使用函数直接量导致的内存占用过高

在循环中使用函数直接量也可能导致内存占用过高的问题。例如：


let arr = [1, 2, 3, 4, 5];
let res = [];
for (let i = 0; i < arr.length; i++) {
  res.push(function() {
    return arr[i] * 2;
  })
}

在上述代码中，我们使用函数直接量创建了一个返回当前数组元素的两倍的函数，然后将其放入到另一个数组中。但由于每次循环时都创建了一个新函数，导致内存占用过高。

解决方法是在循环外部定义函数，然后在循环内部进行调用。


let arr = [1, 2, 3, 4, 5];
let res = [];
function double(x) {
  return x * 2;
}
for (let i = 0; i < arr.length; i++) {
  res.push(double(arr[i]))
}

4.处理大量数据时未使用分页或虚拟列表导致内存占用过高

当处理大量数据时，将所有数据全部渲染到页面上或者放到数组中，会导致内存占用过高。这时可以采用分页或虚拟列表的方式来优化。

4.1 分页

分页是将数据按照固定数量分成多个页面，只显示当前页面的数据。这样可以减少一次性渲染大量数据导致的内存占用过高。常用的分页组件有 React 的 react-paginate 和 Vue 的 vue-pagination。

4.2 虚拟列表

虚拟列表是只在页面上渲染当前可见范围内的数据，滚动到新的区域时，再动态渲染新的数据。这里的关键是计算当前可见区域的数据范围，并按需渲染。常用的虚拟列表组件有 React 的 react-virtualized 和 Vue 的 vue-virtual-scroller。

5.闭包导致的内存泄漏错误

在 JavaScript 中，闭包是指有权访问其他函数作用域中变量的函数。例如：


function outer() {
  let a = 1;
  return function inner() {
    console.log(a);
  }
}
let b = outer();
b(); // 1

在上述代码中，inner 函数可以访问 outer 函数中的变量 a，即使 outer 函数已经执行完毕，a 的值仍然保存在内存中。如果闭包存在过多或被长时间占用，会导致内存占用过高，从而导致内存泄漏错误。

解决方法是在闭包使用完毕后及时清空。


function outer() {
  let a = 1;
  
  function inner() {
    console.log(a);
  }
  
  return function() {
    inner();
    // 清空闭包
    inner = null;
    a = null;
  }
}
let b = outer();
b(); // 1
// 调用后清空闭包
b = null;

在上述代码中，我们在 inner() 函数执行后就将其置为 null，在闭包执行后将 b 也清空。这样，内存占用就会得到及时释放。

总结

总之，内存管理是 JavaScript 开发中需要注意的重要问题。我们需要了解 JavaScript 内存分配的机制，以及常见的内存占用过高和泄漏问题，制定正确的优化策略。

5个常见的JavaScript内存错误