闭包

Mrsong
86 阅读4分钟

闭包

对比包的理解

闭包：是指在一个函数内部定义的函数,并且该函数可以访问外部函数的变量和参数、

在javascript中由于函数是一个对象、因此可以将函数作为返回值，从而形成闭包

function create(b){
    let a = 100;
    // 将函数作为返回值
    return function(){
        // 内部函数可以访问外部函数的变量和参数
        console.log(a + b)
    }
}

概念

闭包是指有权访问另一个函数作用域中变量的函数、

**优点：**数据私有化、避免命名冲突

**缺点：**使用不恰当会导致内存泄漏、在不需要的时候把变量置为null； 当函数执行完毕后、该函数内部定义的变量和函数仍然存在内存中，不会自动回收、因此可以被其内部函数继续访问和使用；

闭包的原理：是在内存中创建一个包含函数和变量的环境、当函数返回后、该环境仍然存在内存中、所以才可以被其他函数访问和使用；

使用场景：

  1. 保存变量状态和私有化变量的函数
  2. 用于事件处理和回调函数
  3. 用于封装类和模块
  4. 用于实现柯里化和函数式编程
  5. 用于解决循环中异步问题；
  6. 用于实现缓存和记忆化等功能；

vue和react中

vue

  1. 在vue组件定义中，会用到一个data函数返回一个对象、这个函数就是闭包、

  2. 在组件实例化中、每个实例都会是一个独立的数据对象

  3. 由于vue是响应式框架、会自动处理试图更新、这个过程也是闭包；比如在vue中会为每个组件创建一个watch监听数据变化、watac就是一个闭包；

React

React 中，由于函数组件没有自己的实例，所以在使用 useState 和 useEffect 等 Hook 时，也会用到闭包的概念来保存组件内部的状态。

在 React 中，也有类似的机制，即 useEffect Hook，它会在组件渲染时执行一个副作用函数，并将这个函数存储在组件实例中，以便在下次渲染时比较前后两个副作用函数是否相同，从而决定是否执行它们。这个过程中也会用到闭包的概念。

注意：

闭包会占用内存并且造成内存泄漏，因此在使用闭包时需要注意内存管理和性能优化；

扩展

闭包一定会造成内存泄漏吗

不是所有的闭包都会造成内存泄漏、只有在不正确使用闭包的情况下才发生内存泄漏； **造成内存泄漏的情况：**函数在执行完成以后会被回收/销毁、但是闭包中、内部函数在外部函数执行结束后仍然存在，那么他会一直持有外部函数的变量，导致这些变量无法被垃圾回收从而内存泄漏；

// 内存泄漏
function outer() {
  var count = 0;
  return function inner() {
    count++;
    console.log(count);
  }
}

var f = outer();
f(); // 1f(); // 2

在这个例子中，outer() 函数返回一个内部函数 inner()，而 inner() 持有了 outer() 函数的变量 count。如果 inner() 函数一直存在，count 变量就无法被释放，从而导致内存泄漏。

使用哪些方式可以防止闭包引起的内存泄漏

以下是一些可以防止闭包引起内存泄漏的方式：

  1. 避免创建不必要的闭包：如果闭包中包含的变量在函数执行完后不再需要使用，可以避免创建闭包，从而避免内存泄漏的问题。
  2. 及时释放闭包：在使用闭包时，需要在不需要时及时释放闭包，可以使用变量赋值为 null 或者手动解除对闭包的引用等方式来释放闭包。
  3. 使用模块模式：在模块模式中，可以使用立即执行函数（IIFE）来创建一个私有作用域，从而避免闭包中的变量被外部访问，避免了内存泄漏的问题。
  4. 避免循环引用：如果闭包中引用了 DOM 元素或其他对象，需要确保在不需要时及时释放这些对象，避免循环引用造成内存泄漏的问题。

总之，防止闭包引起内存泄漏需要结合具体的情况进行综合考虑和处理，同时也需要注意代码的可读性和可维护性。

avatar
文章
阅读
粉丝