理解 JavaScript 闭包

简介: 这是本系列的第 4 篇文章。作为 JS 初学者,第一次接触闭包的概念是因为写出了类似下面的代码:for (var i = 0; i < helpText.length; i++) { var item = helpText[i]; document.getElementById(item.id).click = function() { showHelp(item.help); }}给列表项循环添加事件处理程序。

这是本系列的第 4 篇文章。

作为 JS 初学者,第一次接触闭包的概念是因为写出了类似下面的代码:


for (var i = 0; i &lt; helpText.length; i++) {
  var item = helpText[i];
  document.getElementById(item.id).click = function() {
    showHelp(item.help);
  }
}

给列表项循环添加事件处理程序。当你点击列表项时不会有任何反应。如何在初学就理解闭包?你需要接着读下去。

§ 什么是闭包

说闭包前,你还记得词法作用域吗?


var num = 0;
function foo() {
  var num = 1;
  function bar() {
    console.log(num);
  }
  bar();
}
foo(); // 1

执行上面的代码打印出 1。

bar 函数是 foo 函数的内部函数,JS 的词法作用域允许内部函数访问外部函数的变量。那我们可不可以在外部访问内部函数的变量呢?理论上不允许。

但是我们可以通过某种方式实现,即将内部函数返回。


function increase() {
  let count = 0;
  function add () {
    count += 1;
    return count;
  }
  return add;
}

const addOne = increase();

addOne(); // 1
addOne(); // 2
addOne(); // 3

内部函数允许访问其父函数的内部变量,那么将内部函数返回到出来,它依旧引用着其父函数的内部变量。

这里就产生了闭包。

简单来说,可以把闭包理解为函数返回函数

上面的代码中,当 increase 函数执行,压入执行栈,执行完毕返回一个 add 函数的引用,所以 increase 函数内部的变量对象依旧保存在内存中,不会被销毁。

调用 addOne 函数,相当于执行内部函数 add,它可以访问其父函数的内部变量,从而修改变量 count。而调用 addOne 函数所在的环境为全局作用域,不是定义 add 函数时的函数作用域。

所以,我理解的闭包是一个函数,它在执行时与其定义时所处的词法作用域不一致,并且具有能够访问定义时词法作用域的能力。MDN 这样定义:闭包是函数和声明该函数的词法环境的组合

§ 闭包的利与弊

◆ 利

第一,闭包可以在函数外部读取函数内部的变量。


var Counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
})();

Counter.value(); // 0
Counter.increment();
Counter.increment();
Counter.value(); // 2
Counter.decrement();
Counter.value(); / 1

上面这种模式称为模块模式。我们使用立即执行函数 IIFE 将代码私有化但是提供了可访问的接口,通过公共接口来访问函数私有的函数和变量。

第二,闭包将内部变量始终保存在内存中。


function type(tag) {
  return function (data) {
    return Object.prototype.toString.call(data).toLowerCase() === '[object ' + tag + ']';
  }
}

var isNum = type('number');
var isString = type('string');

isNum(1); // true
isString('abc'); // true

利用闭包将内部变量(参数)tag 保存在内存中,来封装自己的类型判断函数。

◆ 弊

第一,既然闭包会将内部变量一直保存在内存中,如果在程序中大量使用闭包,势必造成内存的泄漏。


$(document).ready(function() {
  var button = document.getElementById('button-1');
  button.onclick = function() {
    console.log('hello');
    return false;
  };
});

在这个例子中,click 事件处理程序就是一个闭包(在这里是个匿名函数),它将引用着 button 变量;而 button 在这里本身依旧引用着这个匿名函数。从而产生循环引用,造成网页的性能问题,在 IE 中可能会内存泄漏。

解决办法就是手动解除引用。


$(document).ready(function() {
  var button = document.getElementById('button-1');
  button.onclick = function() {
    console.log('hello');
    return false;
  };
  button = null; // 添加这一行代码来手动解除引用
});

第二,如果你将函数作为对象使用,将闭包作为它的方法,应该特别注意不要随意改动函数的私有属性。

§ 闭包的经典问题

◆ 循环

现在我们来解决一下文章开头出现的问题。


function makeHelpCallback(help) {
  return function() {
    showHelp(help);
  };
}

for (var i = 0; i &lt; helpText.length; i++) {
  var item = helpText[i];
  document.getElementById(item.id).click = makeHelpCallback(item.help);
}

额外声明一个 makeHelpCallBack 的函数,将循环每次的上下文环境通过闭包保存起来。

◆ setTimeout


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

结果为 1 秒后,打印 5 个 5。

我们可以利用闭包保留词法作用域的特点,来修改代码达到目的。


for (var i = 0; i &lt; 5; i++) {
  setTimeout((function(i) {
    return function () {
      console.log(i);
    }
  }(i)), 1000);
};

结果为 1 秒后,依次打印 0 1 2 3 4。

§ 小结

闭包在 JS 中随处可见。

闭包是 JS 中的精华部分,理解它需要具备一定的作用域、执行栈的知识。理解它你将收获巨大,你会在 JS 学习的道路上走得更远,比如会在后面的文章来讨论高阶函数和柯里化的问题。

◆ 文章参考

闭包 | MDN

学习 JavaScript 闭包 | 阮一峰

Understanding JavaScript Closures: A practical Approach | Paul Upendo

闭包造成问题泄漏的解决办法 | CSDN

§ JavaScript 系列文章

理解 JavaScript 执行栈

理解 JavaScript 作用域

理解 JavaScript 数据类型与变量

欢迎关注我的公众号 cameraee

前端技术 | 个人成长

来源:https://segmentfault.com/a/1190000017404391

相关文章
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript中闭包:概念、用途与潜在问题
【4月更文挑战第22天】JavaScript中的闭包是函数及其相关词法环境的组合,允许访问外部作用域,常用于数据封装、回调函数和装饰器。然而,不恰当使用可能导致内存泄漏和性能下降。为避免问题,需及时解除引用,减少不必要的闭包,以及优化闭包使用。理解并慎用闭包是关键。
|
2月前
|
JavaScript
闭包(js的问题)
闭包(js的问题)
19 0
|
2月前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
21天前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。
【6月更文挑战第25天】JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。闭包基于作用域链和垃圾回收机制,允许函数记住其定义时的环境。例如,`createCounter`函数返回的内部函数能访问并更新`count`,每次调用`counter()`计数器递增,展示了闭包维持状态的特性。
30 5
|
28天前
|
设计模式 自然语言处理 JavaScript
JavaScript进阶-函数表达式与闭包
【6月更文挑战第18天】JavaScript函数不仅是代码块,还是值,具备函数表达式和闭包等特性。函数表达式如匿名函数,可赋值、传参,但不提升,过度使用影响可读性。闭包允许访问外部作用域,即使父函数已结束,但不当使用可能导致内存泄漏。理解并妥善处理这些问题,如命名函数表达式、及时释放引用,能提升代码质量。通过实践深化对这些关键概念的理解至关重要。
|
12天前
|
存储 缓存 JavaScript
js 【详解】闭包
js 【详解】闭包
13 0
|
13天前
|
自然语言处理 前端开发 JavaScript
前端 JS 经典:闭包与内存泄漏、垃圾回收
前端 JS 经典:闭包与内存泄漏、垃圾回收
11 0
|
28天前
|
缓存 前端开发 JavaScript
【JavaScript】JavaScript 中的闭包:从入门到精通
【JavaScript】JavaScript 中的闭包:从入门到精通
40 0
|
2月前
|
缓存 自然语言处理 JavaScript
JavaScript内存泄漏导致应用性能下降,常见于闭包使用不当
【5月更文挑战第14天】JavaScript内存泄漏导致应用性能下降,常见于闭包使用不当。闭包能记住并访问词法作用域,若函数返回后,其引用的对象未被释放,就会引发泄漏。例如,`createLeakyFunction`创建的闭包保留了对大型对象`someLargeObject`的引用,即使函数执行完毕,对象也无法被垃圾回收。避免泄漏的方法包括及时解除引用、清除事件监听器、使用WeakMap和WeakSet以及定期清理缓存。使用性能分析工具可检测和修复内存泄漏问题。
29 3
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包机制
闭包是JavaScript中一个重要且常被误解的概念。本文将深入探讨闭包的本质、工作原理以及在实际开发中的应用。通过详细解析闭包的定义、作用域链、内存管理等方面,读者将对闭包有更清晰的理解,并能够运用闭包解决实际开发中的问题。