2021-03-24

闭包在实际场景中怎么用?有哪些常见的坑?

闭包的定义

一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。

有以下的使用场景

1. debounce函数防抖

比如要缩放窗口 触发onresize 事件 需要在这时候做一件事情,但是我们希望拖动的时候只触发一次,比如:

window.onresize = function(){
    console.log('onresize') //只想触发一次
}
  • 一般方法
window.onresize = function(){
  debounce(fn,1000)
}
var fn = function(){
  console.log('fn')
}
var time = ''
function debounce(fn,timeLong){
  if(time){
    clearTimeout(time)
    time = ''
  }
  time = setTimeout(function(){
    fn()
  },timeLong)
}
  • 使用闭包
window.onresize = debounce(fn,500)

function debounce(fn){
  var timer = null
  return function(){
    if(timer){
      //timer第一次执行后会保存在内存里 永远都是执行器 直到最后被触发
      clearTimeout(timer)
      timer = null
    }
    timer = setTimeout(function(){
      fn()
    },1000)
  }
}
var fn = function(){
  console.log('fn')
}

2. 模仿块级作用域

比如我们可以使用闭包能使下面的代码按照我们预期的进行执行(每隔1s打印 0,1,2,3,4)。

for(var i = 0; i < 5; i++) {
  (function(j){
    setTimeout(() => {
      console.log(j);
    }, j * 1000);
  })(i)
}

我们应该尽量避免往全局作用域中添加变量和函数。通过闭包模拟的块级作用域

3. 数据响应式Observer中使用闭包(省略闭包之外的相关逻辑)

function defineReactive(obj, key, value) {
  return Object.defineProperty(obj, key, {
    get() {
      return value;
    },
    set(newVal) {
      value = newVal;
    }
  })
}

value 还函数中的一个形参,属于私有变量,但是为什么在外部使用的时候给value赋值,还是能达到修改变量的目的呢。

这样就形成了一个闭包的结构了。根据闭包的特性,内层函数可以引用外层函数的变量,并且当内层保持引用关系时外层函数的这个变量,不会被垃圾回收机制回收。那么,我们在设置值的时候,把newVal保存在value变量当中,然后get的时候再通过value去获取,这样,我们再访问 obj.name时,无论是设置值还是获取值,实际上都是对value这个形参进行操作的。

4. 结果缓存

Vue源码中经常能看到下面这个cached函数(接收一个函数,返回一个函数)。

/**
* Create a cached version of a pure function.
*/
function cached (fn) {
  var cache = Object.create(null);
  return (function cachedFn (str) {
    var hit = cache[str];
    return hit || (cache[str] = fn(str))
  })
}

这个函数可以读取缓存,如果缓存中没有就存一下放到缓存中再读。闭包正是可以做到这一点,因为它不会释放外部的引用,从而函数内部的值可以得以保留。

常见的坑

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

WRITTEN BY

lidong

鄂ICP备20003892号Copyright © 2017-2023 leedong.cn

ABOUT ME

Hello,这里是「我的心情永不立冬」
一个想到什么就做什么的个人站点,所有内容纯主观、有偏见