閉鎖

@serverSerrverlesskiy

クロージャは、外部関数が終了した後でも外部関数⚙️にアクセスできる関数⚙️です。内部関数が外部関数のスコープにアクセスできるようにするためにクロージャが必要です️が、同時に外部環境から内部関数の変数へのアクセスを閉じます⚙️。

Snake

クロージャーを作成するための要件：

コードで呼び出される外部関数。
外部関数には内部関数があります。
その結果、outer関数はinner関数を返します。

例を使用してクロージャーを作成することを検討してください。

Live Editor

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()
}

Result

この例では、外部関数getFruitを作成しました。
getFruit内に、内部関数showを作成しました。
その結果、getFruit関数はshow関数を返します。
次にコードで、getFruit関数の結果をshowFruit変数に割り当てました。
なぜなら getFruitの結果は関数であり、showFruitは変数ではなくになります。
全体の構築の結果、getFruit関数内にある変数fruitが閉じられました。これで、この変数の値しかわかりません、変更することはできません。

例

Math

理解するために、より多くの例を検討してください。

カウンター

カウンター、クロージャーの仕事を考えることができる最も簡単な例。

Live Editor

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()
}

Result

改善されたカウンター

Counter

結果として、1つの機能⚙️ではなく、一度に複数の機能があります。

Live Editor

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()
}

Result

ループで閉じる

circle

Live Editor

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]()
}

Result

フレーズを覚えています

Live Editor

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')
}