JavaScript 闭包机制详解及实例代码

什么是闭包

在JavaScript中，闭包(closure)是一种非常重要的概念。简单来说，闭包是指可以访问自由变量的函数。函数可以访问定义在它外部作用域内的变量。

闭包的基本形式

在一个函数内部，创建一个内部函数，内部函数可以访问外部函数的变量。这个内部函数就是闭包。

示例代码如下：

function outer() {
  var a = 10;
  function inner() {
    console.log(a);
  }
  return inner;
}

var fn = outer();
fn(); // 输出结果为: 10

在这个例子中，内部函数inner可以访问外部函数outer的变量a，这个变量a就是自由变量。

闭包的用途

闭包有很多用途，下面列举了几个常见的用途。

封装变量

使用闭包来封装一个变量，可以避免变量被外部修改。

示例代码如下：

function counter() {
  var count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

var c = counter();
c(); // 输出结果为: 1
c(); // 输出结果为: 2
c(); // 输出结果为: 3

在这个例子中，使用闭包来封装了一个变量count，防止外部修改它的值。同时，在内部函数中可以修改它的值，并在每次调用时打印出来。

防抖和节流

使用闭包可以实现防抖和节流的功能。

防抖

在一段时间内多次触发一个事件，只执行最后一次，可以使用闭包来实现防抖的功能。

示例代码如下：

function debounce(fn, delay) {
  var timer = null;
  return function() {
    var that = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(that, args);
    }, delay);
  }
}

function handleClick(e) {
  console.log(e.target.innerHTML);
}

var btn = document.getElementById('btn');
btn.addEventListener('click', debounce(handleClick, 1000));

在这个例子中，使用闭包来保存一个定时器对象timer，在事件触发时，清除之前的定时器，重新设置一个新的定时器，延迟执行handleClick函数。

节流

在一段时间内多次触发一个事件，每隔一定时间执行一次，可以使用闭包来实现节流的功能。

示例代码如下：

function throttle(fn, delay) {
  var timer = null;
  return function() {
    var that = this;
    var args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(that, args);
        timer = null;
      }, delay);
    }
  }
}

function handleScroll(e) {
  console.log(window.scrollY);
}

window.addEventListener('scroll', throttle(handleScroll, 1000));

在这个例子中，使用闭包来保存一个定时器对象timer，在第一次触发事件时，立即执行handleScroll函数，并设置一个定时器，在定时器时间到达前，不再执行handleScroll函数。定时器执行后，再次允许事件触发执行函数。