JS闭包巧用

最新推荐文章于 2024-09-06 15:23:29 发布

webRambler

最新推荐文章于 2024-09-06 15:23:29 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：闭包 JS函数柯里化函数节流函数防抖

本文链接：https://blog.youkuaiyun.com/weixin_40920953/article/details/88263682

前端专栏收录该内容

102 篇文章

订阅专栏

本文深入探讨了JavaScript中的高阶编程技巧，包括如何利用闭包实现函数只执行一次，理解并应用函数柯里化，掌握函数节流和防抖的技术细节，以及它们在实际场景中的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面

什么是闭包？闭包有什么作用？这是我遇到闭包时的第一反应。

闭包在JavaScript高级程序设计（第3版）中是这样描述：闭包是指有权访问另一个函数作用域中的变量的函数。

那么闭包的作用也就很明显了：

1. 可以在函数的外部访问到函数内部的局部变量。
2. 让这些变量始终保存在内存中，不会随着函数的结束而自动销毁。

1.让函数只执行一次

    function once(fn) {
      let flag = false;
      return function() {
        if (!flag) {
          flag = true;
          fn.apply(this, arguments);
        }
      }
    }

    function log() {
      console.log(12306);
    }

    let c = once(log)
    c()
    c()
    c()

上述代码只输出一次12306，利用闭包达到了让函数只执行一次的效果。

2. 函数柯里化

  function curry(fn, ...args) {
    return function () {
      let _args = [...arguments]
      if (args !== undefined) {
        _args = [...args, ..._args]
      }
      if (_args.length < fn.length) {
        curry(fn, _args)
      } else {
        fn.apply(null, _args)
      }
    }
  }

3. 函数节流

  function throttle(fn, ctx = null, duration = 2000) {
    let startTime = 0, first = true
    return function () {
      if (first) {
        first = false
        return
      }
      let endTime = Date.now()
      if (endTime - startTime >= duration) {
        fn.apply(ctx, arguments)
        startTime = endTime
      }
    }
  }

  function fn(e) {
    console.log(e.type, 777)
  }

  let cd = throttle(fn)
  window.onscroll = cd

4. 函数防抖

  function debounce(fn, ctx = null, delay = 2000) {
    let timer = null
    return function () {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn.apply(ctx, arguments)
      }, delay)
    }
  }

  function fn(e) {
    console.log(e.type, 3333)
  }

  let cc = debounce(fn)

  window.onresize = cc