Js中的闭包 - Ocean Han

877 字

4 分钟

Js中的闭包

2022-08-05

前端

JS

什么是闭包#

闭包的概念
函数和对其词法环境lexical environment的引用捆绑在一起构成闭包
也就是说，闭包可以让内部函数访问外部函数的作用域。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

最简单的例子#

1
function compare(propertyName) {
2
      function(obj1,obj2){
3
            let value1 = obj1[propertyName]
4
            let value2 = obj2[propertyName]
5

6
            return (value1 - value2 < 0)
7
        }
8
}

NOTE
在这个例子中，内部的匿名函数中的变量value1和value2,引用了外部函数的propertyName变量

闭包的特点#

特点

函数嵌套函数

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

参数和变量不会被垃圾回收机制回收

闭包的一些应用#

1. 使用闭包模拟私有方法#

NOTE
使用闭包来定义公共函数，并令其可以访问私有函数和变量，这种方式也叫模块方式
两个计数器counter1和counter2是相互独立的
其它例如计数器、延迟调用、回调等闭包的应用，其核心思想还是创建私有变量和延长变量的生命周期

1
const Counter = function () {
2
  let privateCounter = 0
3
  function changeBy(val) {
4
    privateCounter += val
5
  }
6
  return {
7
    increment: function () {
8
      changeBy(1)
9
    },
10
    decrement: function () {
11
      changeBy(-1)
12
    },
13
    value: function () {
14
      return privateCounter
15
    }
16
  }
17
}
18

19
const counter1 = new Counter()
20
const counter2 = new Counter()
21
counter1.increment()
22
counter1.increment()
23
console.log(counter1.value());  //  2
24
console.log(counter2.value());  //  0
25
// ...

2. 函数柯里化#

NOTE
柯里化的目的在于避免频繁调用具有相同参数函数的同时，又能够轻松的重用

1
function getArea(width, height) {
2
  return width * height
3
}
4

5
const area1 = getArea(10, 20)
6
const area2 = getArea(10, 30)
7
const area3 = getArea(10, 40)
8

9
// 如果我们碰到的长方形的宽老是10,我们可以使用闭包柯里化这个函数
10
function getArea(width) {
11
  return (height) => {
12
    return width * height
13
  }
14
}
15

16
const getTenWidthArea = getArea(10)
17
// 之后碰到宽度为10的长方形就可以这样计算面积
18
const area = getTenWidthArea(20)
19
// 而且如果遇到宽度偶尔变化也可以轻松复用
20
const getTwentyWidthArea = getArea(20)

3. 定时器和闭包#

1
for(var i = 0;i<5;i++){
2
    setTimeout(()=> {
3
        console.log(i)
4
    },100)
5
}
6
// 结果是输出 5 次 5

WARNING
先来看一个例子,这个例子大家应该都知道为什么
var只有函数作用域,而{}相当于形成了一个块作用域，所以5次循环用的是同一个i,再加上for循环内部的seTimeout还是一个异步任务，所以在执行seTimeout的回调之前，i就先自增到了5
解决:

最简单的解决办法可以将var改为ES6中的let

引入闭包来保存变量(立即执行函数)

1
for(var i = 0;i<5;i++){
2
    (function(i) {
3
        setTimeout(() => {
4
            console.log(i)
5
        },100)
6
    })(i)
7
}
8
// 0 1 2 3 4

如果想每隔100毫秒依次输出，而不是同时:

1
for (var k = 0; k < 5; k++) {
2
  (function(k) {
3
    setTimeout(() => {
4
      console.log(k)
5
    }, 100 * k)
6
  })(k)
7
}

闭包的使用场景#

NOTE

创建私有变量

延长变量的生命周期

闭包的总结#

优点

可以访问到函数内部的局部变量

可以避免全局变量的污染

这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。

缺点
会增大内存使用量，滥用闭包会影响性能，导致内存泄漏等问题。
在退出函数之前，将不使用的局部变量全部删除，可以使变量赋值为null,这样就会被回收.#

Js中的闭包

https://blog.oceanh.top/posts/frontend/闭包/

作者

Ocean Han

发布于

2022-08-05

许可协议

CC BY-NC-SA 4.0

最后修改时间

2026-03-19 13:03:26