【03问：闭包的理解与应用】

Eric⠀

已于 2024-06-27 20:36:28 修改

阅读量639

点赞数 16

分类专栏：前端面试三千问文章标签： javascript 开发语言 ecmascript 前端 vue.js js

于 2024-06-26 23:41:29 首次发布

本文链接：https://blog.csdn.net/m0_73884922/article/details/140000963

版权

前端面试三千问专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

闭包是 JavaScript 中一个非常强大的概念，它不仅在日常开发中十分常见，而且是许多高级编程技巧和设计模式的基础。本文将深入探讨闭包的定义、原理、常见应用场景以及一些实际例子，帮助你更好地理解和运用闭包。

一、什么是闭包

闭包是指函数在创建时，保存了其在词法作用域中的变量的引用。换句话说，闭包允许函数在其外部函数的作用域之外访问该作用域内的变量。

简单的闭包示例如下：

function outerFunction() {
    let outerVariable = 'I am outside!';

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // 输出: I am outside!

在这个例子中，innerFunction 是一个闭包，因为它可以访问 outerFunction 中的 outerVariable，即使 outerFunction 已经执行完毕并从调用栈中移除了。

简单来说就是一个函数内部返回另一个函数，且内部函数操作（访问、赋值）着外部函数的变量，形成这个条件就是闭包。

二、闭包的原理

要理解闭包的工作原理，需要了解 JavaScript 的执行上下文和作用域链。当一个函数被创建时，它会保存一个对其词法作用域的引用，这个引用称为闭包。在函数执行过程中，作用域链决定了变量的查找顺序。当函数访问一个变量时，JavaScript 引擎会首先在当前作用域中查找该变量，如果找不到，则沿着作用域链向上查找，直到找到该变量或到达全局作用域。

三、闭包的应用场景

1.数据封装和隐藏

闭包可以用于创建私有变量和方法，从而实现数据的封装和隐藏。

function createCounter() {
    let count = 0;

    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 输出: 1
console.log(counter.decrement()); // 输出: 0
console.log(counter.getCount());  // 输出: 0

在这个例子中，count 变量被封装在 createCounter 函数内部，通过返回的对象方法可以访问和修改 count，但外部代码无法直接访问 count。

2.函数工厂

闭包可以用于创建具有特定环境的函数。

function createGreeting(greeting) {
    return function(name) {
        console.log(`${greeting}, ${name}!`);
    };
}

const sayHello = createGreeting('Hello');
const sayHi = createGreeting('Hi');

sayHello('Alice'); // 输出: Hello, Alice!
sayHi('Bob');      // 输出: Hi, Bob!

在这个例子中，createGreeting 返回的每个函数都保留了 greeting 参数的值，从而形成了不同的闭包。

3.防抖和节流

闭包常用于防抖（debounce）和节流（throttle）函数中，以避免某些函数被频繁调用。

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}


btn.onclick = debounce(() => {
  console.log('点了');
}, 1000)

function throttle(fn,delay){
  var starttime=0;
  return function f() {
      var nowtime=Date.now();
      if (nowtime-starttime>delay){
          fn.call(document);
          // fn.call(this);


          // fn();
          starttime=nowtime;
      }
  }
}
document.onmousemove=throttle(function () {
      console.log(Math.random());
  console.log(this);
},1000);