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. 所以，閉包也被稱爲有狀態的函數