Skip to Content
Nextra 4.0 is released 🎉
笔记JavaScript说说你对闭包的理解?闭包使用场景?

说说你对闭包的理解?闭包使用场景?

是什么

一个函数和对其周围状态(lexical environment, 词法环境)的引用捆绑在一起(或者说函数被引用包围), 这样的组合就是闭包(closure)

简单的说, 一个内部函数访问到外层函数的变量, 这就是闭包

也就是说, 闭包让你可以在一个内层函数中访问到其外层函数的作用域

在JavaScript中, 每当创建一个函数, 闭包就会在函数创建的同时被创建出来, 作为函数内部与外部连接起来的一座桥梁

下面给出一个简单的例子

function init() {
  var name = "Mozilla"; // name 是一个被 init 创建的局部变量
  function displayName() { // displayName() 是内部函数, 一个闭包
    alert(name); // 使用了父函数中声明的变量
  }
  displayName();
}
init();

displayName() 没有自己的局部变量。然而, 由于闭包的特性, 它可以访问到外部函数的变量

使用场景

任何闭包的使用场景都离不开这两点:

  • 创建私有变量
  • 延长变量的生命周期

一般函数的词法环境在函数返回后就被销毁, 但是闭包会保存对创建时所在词法环境的引用, 即便创建时所在的执行上下文被销毁, 但创建时所在词法环境依然存在, 以达到延长变量的生命周期的目的

下面举个例子:

在页面上添加一些可以调整字号的按钮

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}
 
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
 
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

柯里化函数

柯里化的目的在于避免频繁调用具有相同参数函数的同时, 又能够轻松的重用

// 假设我们有一个求长方形面积的函数
function getArea(width, height) {
  return width * height
}
// 如果我们碰到的长方形的宽老是10
var area1 = getArea(10, 20)
var area2 = getArea(10, 30)
var area3 = getArea(10, 40)
 
// 我们可以使用闭包柯里化这个计算面积的函数
function getArea(width) {
  return height => {
    return width * height
  }
}
 
var getTenWidthArea = getArea(10)
// 之后碰到宽度为10的长方形就可以这样计算面积
var area1 = getTenWidthArea(20)
 
// 而且如果遇到宽度偶尔变化也可以轻松复用
var getTwentyWidthArea = getArea(20)

使用闭包模拟私有方法

在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;
    }
  }
})();
 
var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */

上述通过使用闭包来定义公共函数, 并令其可以访问私有函数和变量, 这种方式也叫模块方式

两个计数器 Counter1 和 Counter2 是维护它们各自的独立性的, 每次调用其中一个计数器时, 通过改变这个变量的值, 会改变这个闭包的词法环境, 不会影响另一个闭包中的变量

封装变量

闭包可以用来封装变量, 使其不受外界的干扰, 同时又可以通过返回的函数来访问和操作这些变量。这在 JavaScript 中非常常见, 例如：

function createCounter() {
  let count = 0;
 
  return function() {
    return ++count;
  };
}
 
const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2

在上述例子中, 我们通过 createCounter 函数创建了一个计数器, 并返回了一个闭包函数。这个闭包函数可以访问和操作 count 变量, 而 count 变量是被封装的, 外界无法直接访问。

模块化开发

闭包在模块化开发中发挥了重要的作用。通过闭包, 我们可以创建私有变量和方法, 避免全局命名冲突和变量污染。下面是一个简单的示例：

const module = (function() {
  let privateVariable = 1;
 
  function privateMethod() {
    console.log('私有方法');
  }
 
  return {
    publicMethod: function() {
      console.log('公开方法');
    }
  };
})();
 
module.publicMethod(); // 输出: 公开方法
module.privateMethod(); // 输出: Uncaught TypeError: module.privateMethod is not a function

在这个例子中, 我们使用立即执行函数创建了一个匿名的函数作用域, 并返回了一个具有公开方法的对象。在函数作用域内定义的 privateVariable 和 privateMethod 是私有的, 外界无法直接访问。

实现缓存

闭包可以用于实现数据缓存, 特别是在频繁调用的情况下提高性能。下面是一个简单的示例：

function createCache() {
  const cache = {};
 
  return function(key, value) {
    if (typeof value !== 'undefined') { // 设置缓存
      cache[key] = value;
    } else { // 获取缓存
      return cache[key];
    }
  };
}
 
const cache = createCache();
cache('name', 'Tom'); // 设置缓存
console.log(cache('name')); // 输出: Tom

在这个例子中, 我们通过 createCache 函数创建了一个用于缓存数据的闭包函数。当使用闭包函数设置缓存时, 将数据存储在 cache 对象中。当使用闭包函数获取缓存时, 从 cache 对象中查找并返回数据。

实现迭代器

迭代器可以帮助我们遍历集合或序列, 并对其中的元素进行操作。闭包可以用于实现迭代器, 例如：

function createIterator(arr) {
  let index = 0;
 
  return function() {
    if (index < arr.length) {
      return arr[index++];
    } else {
      return undefined;
    }
  };
}
 
const iterator = createIterator([1, 2, 3]);
console.log(iterator()); // 输出: 1
console.log(iterator()); // 输出: 2
console.log(iterator()); // 输出: 3
console.log(iterator()); // 输出: undefined

在这个例子中, 我们通过 createIterator 函数创建了一个闭包函数, 用于遍历给定的数组。每次调用闭包函数时, 它会返回数组中的下一个元素, 直到遍历完全部元素。

事件处理

闭包在事件处理中非常常见, 特别是在循环或定时器等异步操作中。使用闭包可以保存循环变量或定时器的参数, 并确保在回调函数执行时以正确的值进行处理。例如：

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

在这个例子中, 我们使用立即执行函数创建了一个新的函数作用域, 每次循环都将 i 的值传递给立即执行函数的参数 index, 从而在定时器回调函数执行时正确地打印每次循环的值。

实现回调函数

闭包在处理回调函数时非常有用, 特别是在处理异步操作的结果或处理事件的响应时。闭包能够保存局部变量和状态, 并在回调函数被调用时使用。例如：

function fetchData(url, callback) {
  // 发送网络请求获取数据
  setTimeout(function() {
    const data = 'Some data';
    callback(data);
  }, 2000);
}
 
fetchData('https://example.com', function(data) {
  console.log(data);
});

在这个例子中, 我们定义了一个 fetchData 函数用于异步获取数据。在获取到数据后, 通过闭包将数据传递给回调函数并执行回调函数, 从而实现对数据的处理和使用。

实现递归

闭包在递归算法中经常被使用, 可以保存递归中的状态和结果, 并确保在每次递归调用时使用正确的值。例如：

function factorial(n) {
  if (n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}
 
console.log(factorial(5)); // 输出: 120

在这个例子中, factorial 函数使用递归的方式计算阶乘。在每次递归调用时, 通过闭包保存当前的状态和结果, 并随着递归的进行传递给下一次的递归调用。

链式调用

当使用闭包实现链式调用时, 每个函数都返回一个包含其他函数的对象, 以便可以通过点操作符连续调用多个函数。以下是一个示例：

function Calculator() {
  let result = 0;
 
  return {
    add: function(num) {
      result += num;
      return this;
    },
    subtract: function(num) {
      result -= num;
      return this;
    },
    multiply: function(num) {
      result *= num;
      return this;
    },
    divide: function(num) {
      result /= num;
      return this;
    },
    getResult: function() {
      return result;
    }
  };
}
 
const calculator = new Calculator();
const result = calculator.add(5).multiply(2).subtract(3).divide(4).getResult();
console.log(result); // 输出: 2.5

在这个例子中, 我们通过 Calculator 工厂函数创建了一个对象, 其中包含了四个方法 add、subtract、multiply 和 divide。每个方法都会对内部的 result 变量进行相应的计算, 并返回包含其他方法的对象, 以实现链式调用。最后, 通过调用 getResult 方法获取最终的计算结果。

其他

例如计数器、延迟调用、回调等闭包的应用, 其核心思想还是创建私有变量和延长变量的生命周期

注意事项

如果不是某些特定任务需要使用闭包, 在其它函数中创建函数是不明智的, 因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响

例如, 在创建新的对象或者类时, 方法通常应该关联于对象的原型, 而不是定义到对象的构造器中。

原因在于每个对象的创建, 方法都会被重新赋值

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
  this.getName = function() {
    return this.name;
  };
 
  this.getMessage = function() {
    return this.message;
  };
}

上面的代码中, 我们并没有利用到闭包的好处, 因此可以避免使用闭包。修改成如下:

function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};
Last updated on
深拷贝浅拷贝的区别?如何实现一个深拷贝?说说你对作用域链的理解?