js 闭包

一个冲刺高级工程师的菜鸟

已于 2024-04-12 18:07:00 修改

阅读量1.2k

点赞数 30

分类专栏： javascript 文章标签： javascript 前端开发语言

于 2024-04-12 18:04:57 首次发布

本文链接：https://blog.csdn.net/wyzsehun/article/details/136350595

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言

在这次以前，一直很肤浅的认识作用域，及let var const，导致在闭包掌握一塌糊涂

请看下面的例子，理解下面的例子，可帮助深度理解作用域let var等关系

function f1(){
    var n = 999
    nAdd = function(){
        n++
    }
    function f1(){
        console.log(n)
    }
    return f1
}

var resl = f1()
res1() // 999
nAdd() 
res1()// 1000

概念性的题

可以参照下面来解答
是什么
在哪里用
为什么这么用
怎么用

闭包(closure)

闭包是一个函数以及其捆绑的周边环境状态（词法环境）的引用的组合
- 闭包让开发者可以从内部函数访问外部函数的作用域
- js中闭包会随着函数的创建而被创建
- 允许将函数与其操作的某些数据环境关联起来
换种理解
- 能够访问另一个函数作用域中的变量的一个函数，定义在一个函数内部的函数

例子辅助理解

每个闭包都有自己的词法环境
- ```
function makeAdder(x) {
    return function(y) {
        return x + y
    }
}

var add5 = makeAdder(5)
var add10 = makeAdder(10)

console.log(add5(10)) //15
console.log(add10(10)) //20
```
- makeAdder是一个函数工厂，它创建了两个新函数add5、add10，这两个都是闭包，
  - 他们共享函数定义，但是保存了不同的词法环境
    - add5的环境， x是5；add10的环境下，x是10
模拟私有变量（私有方法有利于限制对代码的访问；还提供了管理全局命名空间的强大能力，避免非核心方法弄乱代码的公共接口部分）
- ```
var Counter = (function(){
    var privateCounter = 0
    function changeBy(val) {
        privateCounter += val    
    }
    return {
        increment: function(){
            changeBy(1)
        },
        decrement: function(){
            changeBy(-1)
        },
        value: function(){
            return privateCounter
        }
    }
})()

console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */
```
- 解析
  - 只创建了一个词法环境，为三个函数共享Counter.increment，Counter.decrement 和 Counter.value
  - 该共享环境创建在一个立即执行函数的匿名函数体内，这个环境包括两个私有项，这两项都无法在匿名函数外部直接调用，必须通过匿名函数返回的三个公共函数访问
  - 这三个公共函数（Counter.increment，Counter.decrement 和 Counter.value）是共享一个函数的闭包

一个创建多个闭包（数据隐藏和封装）

var makeCounter = function () {
  var privateCounter = 0
  function changeBy(val) {
    privateCounter += val
  }
  return {
    increment: function () {
      changeBy(1)
    },
    decrement: function () {
      changeBy(-1)
    },
    value: function () {
      return privateCounter
    }
  }
}

var counter1 = makeCounter()
var counter2 = makeCounter()

console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();

console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */

解析
- 每个闭包都是引用自己词法作用域内的变量privateCounter
- 每次调用其中一个计数器时，通过改变这个变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量

常见错误

循环中创建闭包

 for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
     }, i*1000 );
}
//5
//5
//5
//5
//5
//5
//上述例子共享了一个词法作用域
//方案一：
for (var i=1; i<=5; i++) {
    consl(i)
}
function consl(i){
    return setTimeout( function timer() {
        console.log( i );
     }, i*1000 )
}
//方案二
for (var i=1; i<=5; i++) {
    (function(i){
        setTimeout( function timer() {
            console.log( i );
         }, i*1000 )
    })(i)
}
//方案三 let
for (let i=1; i<=5; i++) {
    (function(i){
        setTimeout( function timer() {
            console.log( i );
         }, i*1000 )
    })(i)
}

优点

避免全局变量的污染

创建私有变量

保护数据
实现函数记忆化

延长变量的声明周期

缺点

占内存导致网页性能变差，IE中容易内存泄漏

内存泄漏

什么是内存泄漏
变量销毁

形成的条件

函数嵌套函数

函数内部可以引用外部函数的参数和变量

闭包不会被垃圾回收机制回收

使用场景

核心
- 创建私有变量
- 延长变量的声明周期
  - 闭包在创建时所在的执行上下文被销毁后依然存在词法作用域
使用
- 柯里化函数
  - 避免频繁调用具有相同该参数函数的同时，又能轻松复用
- 利用闭包模拟私有方法
- 其他
  - 计时器、延迟调用、回调等闭包应用
  - 防抖节流
注意事项
- 闭包在处理速度和内存消耗方面对脚本性能有负面影响