如何在 JavaScript 中使用闭包——初学者指南

闭包是一个难以理解的 JavaScript 概念，因为很难看出它们是如何实际使用的。

与函数、变量和对象等其他概念不同，您并不总是认真而直接地使用闭包。你不会说：哦！在这里，我将使用闭包作为解决方案。

但与此同时，你可能已经使用过这个概念一百次了。了解闭包更多的是确定何时使用闭包，而不是学习一个新概念。

JavaScript 中的闭包是什么？

当函数读取或修改在其上下文之外定义的变量的值时，您有一个闭包。

const value = 1
function doSomething() {
    let data = [1,2,3,4,5,6,7,8,9,10,11]
    return data.filter(item => item % value === 0)
}

这里函数doSomething使用变量value。但是函数item => item % value === 0也可以这样写：

function(item){
    return item % value === 0
}

value您使用在函数本身之外定义的变量的值。

 

函数可以脱离上下文访问值

与前面的示例一样，函数可以访问和使用在其“主体”或上下文之外定义的值，例如：

let count = 1
function counter() {
    console.log(count)
}
counter() // print 1
count = 2
counter() // print 2

这允许我们count从模块中的任何位置修改变量的值。然后当调用计数器函数时，它就会知道如何使用当前值。

我们为什么要使用函数？

但是为什么我们在程序中使用函数呢？当然，在不使用我们定义的函数的情况下编写程序是可能的——虽然很困难，但也是可能的。那么我们为什么要创建合适的函数呢？

想象一段代码做了一些很棒的事情，无论如何，它由 X 行组成。

/* My wonderful piece of code */

现在假设你必须在程序的各个部分使用这段美妙的代码，你会怎么做？

“自然”的选择是将这段代码放在一起，形成一个可复用的集合，而这个可复用的集合就是我们所说的函数。函数是在程序中重用和共享代码的最佳方式。

现在，您可以尽可能多次地使用您的函数。而且，忽略一些特殊情况，调用你的函数 N 次与编写那段精彩的代码N 次是一样的。这是一个简单的替换。

 

但是闭包在哪里？

使用反例，让我们将其视为一段精彩的代码。

let count = 1
function counter() {
    console.log(count)
}
counter() // print 1

现在，我们想在很多部分重用它，所以我们将它“包装”在一个函数中。

function wonderfulFunction() {
    let count = 1
    function counter() {
        console.log(count)
    }
    counter() // print 1
}

现在我们有什么？一个函数：counter它使用在它之外声明的值count。还有一个值：count在wonderfulFunction函数范围内声明但在函数内部使用counter。

也就是说，我们有一个函数使用在其上下文之外声明的值：闭包。

很简单，不是吗？现在，当函数wonderfulFunction执行时会发生什么？执行父函数后，变量count和函数会发生什么？counter

在其主体中声明的变量和函数“消失”（垃圾收集器）。

现在，让我们稍微修改一下示例：

function wonderfulFunction() {
    let count = 1
    function counter() {
        count++
        console.log(count)
    }
   setInterval(counter, 2000)
}
wonderfulFunction()

现在里面声明的变量和函数会发生什么wonderfulFunction？

在这个例子中，我们告诉浏览器counter每 2 秒运行一次。因此，JavaScript 引擎必须保留对函数的引用以及对它使用的变量的引用。即使在父函数wonderfulFunction完成其执行周期后，该函数counter和值计数仍将“存活”。

由于 JavaScript 支持函数的嵌套，因此出现这种具有闭包的“效果”。或者换句话说，函数是语言中的first class citizens，您可以像使用任何其他对象一样使用它们：嵌套、作为参数传递、作为返回值等等。

我可以用 JavaScript 中的闭包做什么？

立即调用函数表达式 (IIFE)

这是一种在 ES5 时代被大量用于实现“模块”设计模式的技术（在本机支持之前）。这个想法是将您的模块“包装”在一个立即执行的函数中。

(function(arg1, arg2){
...
...
})(arg1, arg2)

这使您可以在函数中使用只能由模块本身使用的私有变量——也就是说，它可以模拟访问修饰符。

const module = (function(){
	function privateMethod () {
	}
	const privateValue = "something"
	return {
	  get: privateValue,
	  set: function(v) { privateValue = v }
	}
})()

var x = module()
x.get() // "something"
x.set("Another value")
x.get() // "Another Value"
x.privateValue //Error

 

函数工厂

由于闭包而实现的另一种设计模式是“函数工厂”。这是函数创建函数或对象的时候，例如，允许您创建用户对象的函数。

const createUser = ({ userName, avatar }) => ({
      id: createID(),
      userName,
      avatar,
      changeUserName (userName) {
        this.userName = userName;
        return this;
      },
      changeAvatar (url) {
        // execute some logic to retrieve avatar image
        const newAvatar = fetchAvatarFromUrl(url)
        this.avatar = newAvatar
        return this
      }
    });
    
        console.log(createUser({ userName: 'Bender', avatar: 'bender.png' }));
    
    {
      "id":"17hakg9a7jas",
      "avatar": "bender.png",
      "userName": "Bender",
      "changeUsername": [Function changeUsername]
      "changeAvatar": [Function changeAvatar]
    
    }
    */c

使用这种模式，您可以从函数式编程中实现一个称为currying的想法。

Currying

Currying是一种设计模式（也是某些语言的特征），其中一个函数会立即被求值并返回第二个函数。此模式允许您执行专业化和组合。

您使用闭包创建这些“curried”函数，定义并返回闭包的内部函数。

function multiply(a) {

    return function (b) {
        return function (c)  {
            return a * b * c
        }
    }
}
let mc1 = multiply(1);
let mc2 = mc1(2);
let res = mc2(3);
console.log(res);

let res2 = multiply(1)(2)(3);
console.log(res2);

这些类型的函数采用单个值或参数，并返回另一个也接收参数的函数。这是论点的部分应用。也可以使用 ES6 重写此示例。

let multiply = (a) => (b) => (c) => {

    return a * b * c;
}

let mc1 = multiply(1);
let mc2 = mc1(2);
let res = mc2(3);
console.log(res);

let res2 = multiply(1)(2)(3);
console.log(res2);

我们可以在哪里应用柯里化？在组合中，假设您有一个创建 HTML 元素的函数。

unction createElement(element){
    const el = document.createElement(element)
    return function(content) {
        return el.textNode = content
    }
}

const bold = crearElement('b')
const italic = createElement('i')
const content = 'My content'
const myElement  = bold(italic(content)) // <b><i>My content</i></b>

 

事件监听器

另一个可以使用和应用闭包的地方是使用 React 的事件处理程序。

假设您正在使用第三方库来呈现数据集合中的项目。该库公开了一个名为的组件，该组件RenderItem只有一个可用的 prop onClick。该道具不接收任何参数，也不返回值。

现在，在您的特定应用程序中，您要求当用户单击项目时，应用程序会显示带有项目标题的警报。但是onClick你有空的事件不接受参数——那你能做什么？关闭救援：

// Closure
// with es5
function onItemClick(title) {
    return function() {
      alert("Clicked " + title)
    }
}
// with es6
const onItemClick = title => () => alert(`Clcked ${title}`)

return (
  <Container>
{items.map(item => {
return (
   <RenderItem onClick={onItemClick(item.title)}>
    <Title>{item.title}</Title>
  </RenderItem>
)
})}
</Container>
)

在这个简化的示例中，我们创建了一个函数，该函数接收您要显示的标题并返回另一个满足 RenderItem 作为道具接收的函数定义的函数。

结论

您甚至可以在不知道您正在使用闭包的情况下开发应用程序。但是，当您创建解决方案时，了解它们的存在以及它们的实际工作方式会开启新的可能性。

闭包是刚开始时很难理解的概念之一。但是一旦你知道你正在使用它们并理解它们，它就可以让你增加你的工具并推进你的职业生涯。