JS闭包(Closures)了解一下

该文章是直接翻译国外一篇文章，关于闭包（Closures）。
都是基于原文处理的，其余的都是直接进行翻译可能有些生硬，因此为了行文方便，就作了一些简单的本地化处理。
同时也新增了本身的理解，若有不对，请在评论区指出
若是想直接根据原文学习，能够忽略此文。

若是你以为能够，请多点赞，鼓励我写出更精彩的文章🙏。

前言

闭包对于前端开发者来讲，既十分重要，又很是难理解。若是能很好的理解它，那你将能写出不少高逼格的代码，而且成为人生赢家，赢取白富美。

这篇文章，咱们来一块儿简单的认识一下，你走向人生巅峰的敲门砖(闭包)。

Note： 闭包不是JS所特有的。它是一个计算机概念，应用的场景也不少。

函数也是变量

首先，咱们须要明确一个JS针对函数的定义或者使用方式：：first-class function

JavaScript 语言将函数看做一种值，与其它值（数值、字符串、布尔值等等）地位相同。凡是可使用值的地方，就能使用函数。好比，能够把函数赋值给变量和对象的属性，也能够看成参数传入其余函数，或者做为函数的结果返回。函数只是一个能够执行的值，此外并没有特殊之处。
因为函数与其余数据类型地位平等，因此在 JavaScript 语言中又称函数为第一等公民。
这里引用了阮一峰老师对函数的定义。

在JS中咱们能对值干点啥呢？

值能够是变量

const name = 'Yazeed';
const age = 25;
const fullPerson = {
  name: name,
  age: age
};
复制代码

值也能够是数组

const items = ['Yazeed', 25, { name: 'Yazeed', age: 25 }];
复制代码

值能够被函数返回

function getPerson() {
  return ['Yazeed', 25, { name: 'Yazeed', age: 25 }];
}
复制代码

经过刚才讲述，经过联想是否是能够想到，通常的值能干的事，其实函数也是能够的。

函数能够是变量

const sayHi = function(name) {
  return `Hi, ${name}!`;
};
复制代码

函数能够是数组

const myFunctions = [
  function sayHi(name) {
    return `Hi, ${name}!`;
  },
  function add(x, y) {
    return x + y;
  }
];

复制代码

函数也能够被其余函数返回

一个函数返回另一个函数，有一个很大气的名字：高阶函数(higher-order function)(若是是React开发者，是否是感受到很熟悉，React中有高阶组件)

高阶函数也是实现闭包的基础。

function getGreeter() {
  return function() {
    return 'Hi, 北宸!';
  };
}

复制代码

getGreeter返回了一个函数，为了实现最终的方法调用，须要调用两次。

getGreeter(); // 返回被包裹的函数
getGreeter()(); // Hi, 北宸!

复制代码

咱们也能够将返回的函数存入到一个变量中。

const greetBei = getGreeter();

greetBei(); // Hi, 北宸!
greetBei(); // Hi, 北宸!
greetBei(); // Hi, 北宸!

复制代码

初识闭包

咱们将北宸这个直接写到被包裹函数的变量剔除，经过给getGreeter利用参数来动态的传入。

// 这样咱们就能够经过变量来传入想要显示的字符串!
function getGreeter(name) {
  return function() {
    return `Hi, ${name}!`;
  };
}
复制代码

例如

const greetBei = getGreeter('北宸');
const greetNan = getGreeter('南蓁');

greetBei(); // Hi, 北宸!
greetNan(); // Hi, 南蓁!
复制代码

客官且慢，让咱们再看看代码

function getGreeter(name) {
  return function() {
    return `Hi, ${name}!`;
  };
}
复制代码

在不知不觉中使用了闭包

外层函数接收name,可是是在嵌套函数中使用了这个变量。

当一个函数经过return返回了一些变量的时候，该函数的生命周期已经完结了，也就意味着函数中局部变量会被GC等内存清理机制给回收。

可是，凡事都有例外，若是return函数的话，被返回的函数仍是继续拥有访问外层函数变量的权限。即使是外层函数已经被执行过了。

闭包的优势

正如刚开始说过，利用闭包咱们能够写出不少高逼格的代码，因此咱们来看看闭包都有啥优势。

数据私有化

对于一些共用的代码模块来讲，数据私有化是很是重要的。

若是没有数据私有化，任何使用你定义的函数/库/框架都可以随意修改内部变量，致使不可逆转的bug.

示例讲解(银行不存在数据私有)

咱们假设，下面的代码可以控制一个银行帐户。而accountBalance将会做为全局变量暴露给外面。

let accountBalance = 0;
const manageBankAccount = function() {
  return {
    deposit: function(amount) {
      accountBalance += amount;
    },
    withdraw: function(amount) {
      // ... safety logic
      accountBalance -= amount;
    }
  };
};
复制代码

既然做为一个银行帐户accountBalance会是一个比较私密的数据/属性，可是在外部某些操做人员，能够不计后果的随意修改。

accountBalance = '后生，你的余额，有点少哇！';
复制代码

若是遇到这个处理，是否是会气炸。有木有

像 Java、 C++这些基于 class的OOP语言都有 private的保留字。经过 private定义的类变量，是不可以在外界访问和赋值的。

可是很不幸的是，JS如今尚未支持private（如今TC39关于class中是能够的），可是在该语法没有出现的时候，咱们能够利用闭包实现私有属性。

银行存在私有变量

此时咱们将accountBalance放到了函数内部。

const manageBankAccount = function(initialBalance) {
  let accountBalance = initialBalance;

  return {
    getBalance: function() {
      return accountBalance;
    },
    deposit: function(amount) {
      accountBalance += amount;
    },
    withdraw: function(amount) {
      if (amount > accountBalance) {
        return 'You cannot draw that much!';
      }

      accountBalance -= amount;
    }
  };
};
复制代码

那接下来，咱们对这个帐户的操做就会很安全。

const accountManager = manageBankAccount(0);

accountManager.deposit(1000);
accountManager.withdraw(500);
accountManager.getBalance();
复制代码

Note:其实在上面的实例中，咱们没有直接访问accountBalance,而是经过各类函数来控制它。

即便accountBalance是由manageBankAccount建立的，可是由manageBankAccount返回的三个函数经过闭包都拥有对accountBalance的访问权限。

Currying(柯里化)

若是想对柯里化有更深的了解，能够移步到此处。可是不要忘记回来哈。

当一个函数一次接收不少参数，能够经过柯里化处理为多个单元函数。

const add = function(x, y) {
  return x + y;
};

add(2, 4); // 6
复制代码

咱们能够经过闭包对函数进行柯里化处理。

const add = function(x) {
  return function(y) {
    return x + y;
  };
};
复制代码

函数通过柯里化处理以后，返回了一个具备访问x/y变量的函数。

const add10 = add(10);

add10(10); // 20
add10(20); // 30
add10(30); // 40
复制代码

若是你不想将函数全部参数都预载，能够对该函数进行柯里化处理。一样的，实现柯里化也只能经过闭包。

React -Hooks-useEffect

若是你实时关注React的技术动向，在16版本发布了一个技术实现hooks。其中useEffect这个API，就是依赖闭包来实现的。

咱们这篇文章只是介绍闭包相关的文章，具体关于React的相关最新技术，如今已经有一个大体的规划，因此这里只是简单的一带而过。

Talk is cheap,show you the code

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const username = 'yazeedb';

  React.useEffect(function() {
    fetch(`https://api.github.com/users/${username}`)
      .then(res => res.json())
      .then(user => console.log(user));
  });

  return (
    <div className="App"> <h1>Open Codesandbox console for {username}'s info</h1> </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement); 复制代码

咱们修改username，就会发现，在控制台就会显示最新的数据信息。其中username是定义在匿名函数(function() {//....})以外的，可是能够在匿名函数中进行访问。

Note:这里再继续重申一点，关于React的相关文章，译者会有相应的篇幅进行讲述，这里不作展开说明。

Summary

1. 函数在JS中做为变量使用(first-class function)
2. 函数能做为返回值，被其余函数返回
3. 内部函数拥有访问外部函数的变量的权限，即便外部函数已经被执行过了。
4. 外部函数的变量也被称为state
5. 所以，闭包也被称为有状态的函数