简单了解JavaScript闭包

了解JavaScript闭包

JavaScript是一种高级编程语言，常用于Web前端开发，它不支持静态作用域，常用的变量作用域为函数作用域和全局作用域。一个函数内部定义的变量只能被该函数内部的代码访问，对外部代码不可见，这种变量作用域的方法也称为“闭包”。

1. 闭包概述

JavaScript闭包是指函数可以在声明它的词法作用域之外的地方被调用，即使词法作用域已经销毁，函数仍然拥有访问词法作用域中变量的能力。

闭包的一个主要特点是可以将内部函数返回到外部使用，并将其作用域保留，使得这些变量可以继续访问。

function outerFunction() {
  var outerVariable = "I am an outer variable.";
  
  return function innerFunction() {
    console.log(outerVariable);
  }
}
var newFunction = outerFunction();
newFunction(); // "I am an outer variable."

上面的例子中，outerFunction内部定义了变量outerVariable，并返回了一个新的函数innerFunction，该函数可以访问outerVariable。当调用newFunction()时，输出"我是一个外部变量。"

2. JavaScript闭包的应用

JavaScript闭包的应用十分广泛，下面列举一些常见的用法。

2.1. 模块化

JavaScript没有原生支持模块，但可以使用闭包来实现。

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()); // 0
counter.increment();
counter.increment();
console.log(counter.value()); // 2
counter.decrement();
console.log(counter.value()); // 1

上面的例子中，定义了一个计数器模块，通过闭包使得privateCounter变量仅在counter模块的作用域内可访问。

2.2. setTimeout和setInterval

使用闭包可以保存setTimeout和setInterval中的变量，从而使其在函数运行结束后仍然保留。

function setGreeting() {
  var message = "Hello, world!";
  
  setTimeout(function() {
    console.log(message);
  }, 1000);
}
setGreeting(); // "Hello, world!"

上面的例子中，定义了一个setGreeting函数，在1秒后输出"Hello, world!"。使用闭包使得函数结束之后其变量message仍然可以访问。

2.3. 防抖和节流

防抖和节流是前端开发中常用的工具，通过闭包可以实现其中的功能。

防抖是指一个函数需要在一定时间内被多次调用，但只有最后一次调用才能真正地触发函数。

function debounce(func, timeout) {
  var timer;
  
  return function() {
    var context = this;
    var args = arguments;
    
    clearTimeout(timer);
    timer = setTimeout(function() {
      func.apply(context, args);
    }, timeout);
  };
}
function myFunction() {
  console.log("Function debounced.");
}
var debounceFunction = debounce(myFunction, 1000);
debounceFunction();
setTimeout(debounceFunction, 500);

上面的例子中，定义了一个debounce函数，将myFunction函数传入，并设置等待时间为1秒。在执行debounceFunction()后，1秒内只有最后一次调用能会触发函数，因此会在1.5秒后输出"Function debounced."。

节流是指一个函数每隔一定时间被调用一次，不管该函数被调用多少次，也只在规定的时间内触发一次。

function throttle(func, timeout) {
  var last;
  
  return function() {
    var context = this;
    var args = arguments;
    var now = +new Date();
    
    if (last && now < last + timeout) {
      clearTimeout(timer);
      timer = setTimeout(function() {
        last = now;
        func.apply(context, args);
      }, timeout - (now - last));
    } else {
      last = now;
      func.apply(context, args);
    }
  };
}
function myFunction() {
  console.log("Function throttled.");
}
var throttleFunction = throttle(myFunction, 1000);
throttleFunction();
setTimeout(throttleFunction, 500);

上面的例子中，定义了一个throttle函数，将myFunction函数传入，并设置等待时间为1秒。在执行throttleFunction()后，1秒内只能触发一次函数，因此会分别在0.5秒和2秒时输出"Function throttled."。

总结

JavaScript闭包是一种功能强大的技术，可以将函数与其所在的词法作用域联系起来，使之能够在其他地方访问。闭包的应用也十分广泛，常见的包括模块化、setTimeout和setInterval、防抖和节流等。