Apakah sebenarnya Penutupan? (DEFINISI JS SIMPLE)

Saya masih ingat temu duga kerja pertama saya apabila penemuduga meminta saya mentakrifkan Penutupan. Ia adalah mimpi ngeri kerana saya tidak tahu istilah teknikalnya. Tetapi jauh di dalam hati, saya merasakan bahawa saya memahami maksudnya, walaupun saya tidak dapat menjelaskannya.

Selepas temu duga tamat (spoiler: Saya tidak terpilih), saya bergegas ke Google untuk membaca tentang penutupan. Istilah pertama yang saya temui ialah Skop Leksikal = _Apa?

Jangan risau, Skop Leksikal hanyalah istilah mewah untuk sesuatu yang mudah!

Jadi mari kita selami dan fahami langkah demi langkah.

Skop Leksikal dijelaskan

Fikirkan rumah anda. Bayangkan anda berada di dalam bilik tidur anda dan ingin menghidupkan lampu bilik tidur. Anda hanya boleh menghidupkan lampu yang ada di dalam bilik yang anda berada sekarang. Ini ialah Skop Leksikal: anda hanya boleh mengakses dan mengubah suai perkara (seperti lampu) yang berada dalam konteks semasa anda.

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  const turnOffBedroomLamp = () => {
    bedroomLamp = 'off'
  }
}

Fungsi turnOnBedroomLamp dan turnOffBedroomLamp wujud dalam konteks bilik tidur, jadi ia boleh mengakses dan mengubah suai pembolehubah bedroomLamp.

Sekarang, bayangkan anda berada di dapur dan cuba matikan lampu bilik tidur. Ini tidak akan berfungsi kerana anda berada dalam konteks yang berbeza dan dapur tidak mempunyai akses kepada pembolehubah bedroomLamp:

const kitchen = () => {
  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on' // You can't do this!!
  }
}

Sangat mudah, bukan?

Apakah Perkaitan Antara Skop Leksikal dan Penutupan?

Sekarang mari kita meneruskannya. Bayangkan rumah anda mempunyai alat kawalan jauh yang membolehkan anda menghidupkan lampu bilik tidur, tidak kira di mana bilik anda berada. Alat kawalan jauh ini "mengingat" lampu bilik tidur yang dikawalnya, walaupun anda berada di dapur.

"Memori" ini ialah Penutupan!

Berikut ialah contoh dalam kod:

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  return turnOnBedroomLamp // Returning the function
}

const remoteControl = bedroom() // Creating the closure
remoteControl() // Using the closure to turn on the bedroom lamp

Dalam contoh ini:

Fungsi bilik tidur mencipta lampu bilik tidur boleh ubah tempatan dan fungsi turnOnBedroomLamp.

turnOnBedroomLamp mengingati konteks di mana ia dicipta (fungsi bilik tidur).

Apabila kami memanggil remoteControl (fungsi yang dikembalikan), ia masih mempunyai akses kepada pembolehubah bedroomLamp, walaupun kami kini berada di luar fungsi bilik tidur.

Nampak? Ia adalah idea yang sangat mudah, hanya Javascript mengingati sesuatu supaya anda boleh gunakan di tempat yang berbeza dengan cara yang berbeza.

Sekarang berfikir dalam konteks sebenar kod, mari lihat cara kita boleh menggunakan penutupan pada zaman kita. Kod di bawah mencipta fungsi untuk menambah diskaun dalam nilai produk.

const createDiscount = (discount) => {
  return (price) => price - price * discount
}

const tenPercentOff = createDiscount(0.1) // 10% off
const twentyPercentOff = createDiscount(0.2) // 20% off

// Using discount functions
console.log(tenPercentOff(100)) // returns 90
console.log(twentyPercentOff(200)) // returns 160

Sekarang anda sedar tentang penutupan dan bersedia apabila beberapa temuduga bertanyakan definisi kepada anda. Untuk lebih banyak kandungan, semak bahagian rujukan.

Rujukan

Penutupan - Dok Web MDN

Penutupan dalam JavaScript - GeeksForGeeks

Atas ialah kandungan terperinci Apakah sebenarnya Penutupan? (DEFINISI JS SIMPLE). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!