前言
在这次以前,一直很肤浅的认识作用域,及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中容易内存泄漏
内存泄漏
- 什么是内存泄漏
- 变量销毁
形成的条件
函数嵌套函数
函数内部可以引用外部函数的参数和变量
闭包不会被垃圾回收机制回收
使用场景
- 核心
- 创建私有变量
- 延长变量的声明周期
- 闭包在创建时所在的执行上下文被销毁后依然存在词法作用域
- 使用
- 柯里化函数
- 避免频繁调用具有相同该参数函数的同时,又能轻松复用
- 利用闭包模拟私有方法
- 其他
- 计时器、延迟调用、回调等闭包应用
- 防抖节流
- 柯里化函数
- 注意事项
- 闭包在处理速度和内存消耗方面对脚本性能有负面影响
参考链接
兄台:JS闭包了解一下-腾讯云开发者社区-腾讯云 (tencent.com)
【JavaScript】一文了解JS的闭包_js闭包-CSDN博客
闭包:什么是闭包、闭包的作用、闭包的解决-CSDN博客 秒懂