關閉

@serverSerrverlesskiy

閉包是一個函數⚙️，即使外部函數️已終止，它也可以訪問外部函數⚙️。需要使用閉包來為內部函數提供對外部函數作用域的訪問權限，但是與此同時，也需要從外部環境對內部函數的變量進行緊密訪問。

Snake

創建關閉的要求：

1.在代碼中調用的外部函數。 2.外部函數包含內部函數。 3.結果，外部函數返回內部函數。

讓我們考慮使用一個示例創建一個閉包：

实时编辑器

function learnJavaScript() {
  const getFruit = () => {
    let fruit = 'Banana',
      show = () => {
        return fruit
      }
    return show
  }
  let showFruit = getFruit()
  return showFruit()
}

function learnJavaScript() {
  const getFruit = () => {
    let fruit = 'Banana',
      show = () => {
        return fruit
      }
    return show
  }
  let showFruit = getFruit()
  return showFruit()
}

结果

在示例中，我們創建了一個外部函數 getFruit;
裡面 getFruit 創建了一個內部功能 show.
getFruit函數返回show函數作為結果。 4.在代碼中，我們進一步分配了 getFruit 對變量起作用 showFruit.
因為結果 getFruit 是一個函數，那麼 showFruit 變成不是變量，而是一個函數。 6.整體構造的結果是變量 fruit, 在函數內部 getFruit, 它關閉了。現在我們只能找出該變量的值，我們無法對其進行更改。

示例

Math

讓我們看更多示例以進行理解。

櫃檯

計數器是考慮閉包如何工作的最簡單示例。

实时编辑器

function learnJavaScript() {
  const makeCounter = () => {
    let x = 0
    return () => {
      return ++x
    }
  }
  const counter = makeCounter()
  return counter()
}

function learnJavaScript() {
  const makeCounter = () => {
    let x = 0
    return () => {
      return ++x
    }
  }
  const counter = makeCounter()
  return counter()
}

结果

改進計數器

Counter

結果，我們將沒有一個功能⚙️，而是一次具有多個功能。

实时编辑器

function learnJavaScipt() {
  let makeCounter = () => {
    let x = 0
    return {
      inc: () => {
        return ++x
      },
      dec: () => {
        return --x
      },
      val: () => {
        return x
      }
    }
  }

  let counter = makeCounter()
  counter.inc() // 1
  counter.inc() // 2
  counter.inc() // 3
  counter.inc() // 4
  counter.dec() // 3
  return counter.val()
}

function learnJavaScipt() {
  let makeCounter = () => {
    let x = 0
    return {
      inc: () => {
        return ++x
      },
      dec: () => {
        return --x
      },
      val: () => {
        return x
      }
    }
  }

  let counter = makeCounter()
  counter.inc() // 1
  counter.inc() // 2
  counter.inc() // 3
  counter.inc() // 4
  counter.dec() // 3
  return counter.val()
}

结果

循環閉合

circle

实时编辑器

function learnJavaScript() {
  let res = []
  for (let i = 0; i < 5; i++) {
    res[i] = () => {
      return i
    }
  }
  return res[2]()
}

function learnJavaScript() {
  let res = []
  for (let i = 0; i < 5; i++) {
    res[i] = () => {
      return i
    }
  }
  return res[2]()
}

结果

記住這句話

实时编辑器

function learnJavaScript() {
  let phrase = x => {
    return y => {
      return x + ' ' + y
    }
  }

  hello = phrase('Hello')
  return hello('World')
}

function learnJavaScript() {
  let phrase = x => {
    return y => {
      return x + ' ' + y
    }
  }

  hello = phrase('Hello')
  return hello('World')
}