Bagaimana Anda menjelaskan penutupan JavaScript kepada seseorang dengan pengetahuan tentang konsep-konsep yang dikandungnya (misalnya fungsi, variabel, dan sejenisnya), tetapi tidak memahami penutupan sendiri?

Saya telah melihat contoh Skema yang diberikan di Wikipedia, tetapi sayangnya itu tidak membantu.

Penutupan adalah pasangan dari:

1. Suatu fungsi, dan
2. Referensi ke lingkup luar fungsi itu (lingkungan leksikal)

Lingkungan leksikal adalah bagian dari setiap konteks eksekusi (stack frame), dan merupakan peta antara pengidentifikasi (mis. Nama variabel lokal) dan nilai.

Setiap fungsi dalam JavaScript mempertahankan referensi ke lingkungan leksikal luarnya. Referensi ini digunakan untuk mengkonfigurasi konteks eksekusi yang dibuat ketika suatu fungsi dipanggil. Referensi ini memungkinkan kode di dalam fungsi untuk "melihat" variabel yang dideklarasikan di luar fungsi, terlepas dari kapan dan di mana fungsi dipanggil.

Jika suatu fungsi dipanggil oleh fungsi, yang pada gilirannya disebut oleh fungsi lain, maka rantai referensi ke lingkungan leksikal luar dibuat. Rantai ini disebut rantai lingkup.

Dalam kode berikut, innermembentuk penutupan dengan lingkungan leksikal dari konteks eksekusi yang dibuat saat foodipanggil, ditutup oleh variabel secret:

function foo() {
  const secret = Math.trunc(Math.random()*100)
  return function inner() {
    console.log(`The secret number is ${secret}.`)
  }
}
const f = foo() // `secret` is not directly accessible from outside `foo`
f() // The only way to retrieve `secret`, is to invoke `f`

Dengan kata lain: dalam JavaScript, fungsi membawa referensi ke "kotak negara" pribadi, yang hanya dapat diakses oleh mereka (dan fungsi lain yang dinyatakan dalam lingkungan leksikal yang sama). Kotak negara ini tidak terlihat oleh penelepon fungsi, memberikan mekanisme yang sangat baik untuk menyembunyikan data dan enkapsulasi.

Dan ingat: fungsi-fungsi dalam JavaScript dapat ditularkan seperti variabel (fungsi kelas satu), yang berarti pasangan fungsi dan keadaan ini dapat diteruskan ke program Anda: mirip dengan cara Anda memberikan instance kelas di C ++.

Jika JavaScript tidak memiliki penutupan, maka lebih banyak negara harus dilewati antara fungsi secara eksplisit , membuat daftar parameter lebih lama dan kode ribut.

Jadi, jika Anda ingin fungsi selalu memiliki akses ke bagian pribadi negara, Anda bisa menggunakan penutupan.

... dan sering kita lakukan ingin negara bergaul dengan fungsi. Misalnya, dalam Java atau C ++, ketika Anda menambahkan variabel instance pribadi dan metode ke kelas, Anda mengasosiasikan status dengan fungsionalitas.

Dalam C dan sebagian besar bahasa umum lainnya, setelah fungsi kembali, semua variabel lokal tidak lagi dapat diakses karena stack-frame dihancurkan. Dalam JavaScript, jika Anda mendeklarasikan suatu fungsi di dalam fungsi lain, maka variabel lokal dari fungsi luar tetap dapat diakses setelah kembali darinya. Dengan cara ini, dalam kode di atas, secrettetap tersedia untuk objek fungsi inner, setelah kembali dari foo.

Penggunaan Penutupan

Penutupan berguna setiap kali Anda membutuhkan keadaan pribadi yang terkait dengan suatu fungsi. Ini adalah skenario yang sangat umum - dan ingat: JavaScript tidak memiliki sintaksis kelas hingga 2015, dan itu masih tidak memiliki sintaksis bidang pribadi. Penutupan memenuhi kebutuhan ini.

Variabel Instance Pribadi

Dalam kode berikut, fungsi toStringmenutup rincian mobil.

function Car(manufacturer, model, year, color) {
  return {
    toString() {
      return `${manufacturer} ${model} (${year}, ${color})`
    }
  }
}
const car = new Car('Aston Martin','V8 Vantage','2012','Quantum Silver')
console.log(car.toString())

Pemrograman Fungsional

Dalam kode berikut, fungsi innerditutup atas keduanya fndan args.

function curry(fn) {
  const args = []
  return function inner(arg) {
    if(args.length === fn.length) return fn(...args)
    args.push(arg)
    return inner
  }
}

function add(a, b) {
  return a + b
}

const curriedAdd = curry(add)
console.log(curriedAdd(2)(3)()) // 5

Pemrograman Berorientasi Acara

Dalam kode berikut, fungsi onClickmenutup variabel BACKGROUND_COLOR.

const $ = document.querySelector.bind(document)
const BACKGROUND_COLOR = 'rgba(200,200,242,1)'

function onClick() {
  $('body').style.background = BACKGROUND_COLOR
}

$('button').addEventListener('click', onClick)

<button>Set background color</button>

Modularisasi

Dalam contoh berikut, semua detail implementasi disembunyikan di dalam ekspresi fungsi yang segera dieksekusi. Fungsi tickdan toStringmenutup negara swasta dan fungsi yang mereka butuhkan untuk menyelesaikan pekerjaan mereka. Penutupan memungkinkan kami melakukan modularisasi dan merangkum kode kami.

let namespace = {};

(function foo(n) {
  let numbers = []
  function format(n) {
    return Math.trunc(n)
  }
  function tick() {
    numbers.push(Math.random() * 100)
  }
  function toString() {
    return numbers.map(format)
  }
  n.counter = {
    tick,
    toString
  }
}(namespace))

const counter = namespace.counter
counter.tick()
counter.tick()
console.log(counter.toString())

Contohnya

Contoh 1

Contoh ini menunjukkan bahwa variabel lokal tidak disalin dalam penutupan: penutupan mempertahankan referensi ke variabel asli sendiri . Seolah-olah tumpukan-bingkai tetap hidup dalam memori bahkan setelah fungsi luar keluar.

function foo() {
  let x = 42
  let inner  = function() { console.log(x) }
  x = x+1
  return inner
}
var f = foo()
f() // logs 43

Contoh 2

Dalam kode berikut, tiga metode log, incrementdan updatesemuanya menutup lingkungan leksikal yang sama.

Dan setiap kali createObjectdipanggil, konteks eksekusi baru (stack frame) dibuat dan variabel yang sama sekali baru x, dan serangkaian fungsi baru ( logdll.) Dibuat, yang menutup variabel baru ini.

function createObject() {
  let x = 42;
  return {
    log() { console.log(x) },
    increment() { x++ },
    update(value) { x = value }
  }
}

const o = createObject()
o.increment()
o.log() // 43
o.update(5)
o.log() // 5
const p = createObject()
p.log() // 42

Contoh 3

Jika Anda menggunakan variabel yang dideklarasikan menggunakan var, berhati-hatilah Anda memahami variabel mana yang Anda tutupi. Variabel yang dideklarasikan menggunakan vardiangkat. Ini jauh dari masalah dalam JavaScript modern karena pengenalan letdan const.

Dalam kode berikut, setiap kali di sekitar loop, fungsi baru innerdibuat, yang menutup i. Tetapi karena var idiangkat di luar loop, semua fungsi dalam ini menutup variabel yang sama, yang berarti bahwa nilai akhir i(3) dicetak, tiga kali.

function foo() {
  var result = []
  for (var i = 0; i < 3; i++) {
    result.push(function inner() { console.log(i) } )
  }
  return result
}

const result = foo()
// The following will print `3`, three times...
for (var i = 0; i < 3; i++) {
  result[i]() 
}

Poin terakhir:

• Setiap kali suatu fungsi dideklarasikan dalam JavaScript, penutupan dibuat.
• Mengembalikan functiondari dalam fungsi lain adalah contoh klasik dari penutupan, karena keadaan di dalam fungsi luar secara implisit tersedia untuk fungsi dalam yang dikembalikan, bahkan setelah fungsi luar menyelesaikan eksekusi.
• Setiap kali Anda menggunakan eval()di dalam suatu fungsi, penutupan digunakan. Teks yang Anda evaldapat referensi variabel lokal dari fungsi, dan dalam mode non-ketat Anda bahkan dapat membuat variabel lokal baru dengan menggunakan eval('var foo = …').
• Ketika Anda menggunakan new Function(…)( Function constructor ) di dalam suatu fungsi, ia tidak menutup lingkungan leksikalnya: ia menutup konteks global sebagai gantinya. Fungsi baru tidak dapat merujuk variabel lokal dari fungsi luar.
• Penutupan dalam JavaScript adalah seperti menjaga referensi ( BUKAN salinan) ke ruang lingkup pada titik deklarasi fungsi, yang pada gilirannya menyimpan referensi ke lingkup luarnya, dan seterusnya, semua jalan ke objek global di bagian atas rantai ruang lingkup.
• Penutupan dibuat ketika suatu fungsi dideklarasikan; closure ini digunakan untuk mengkonfigurasi konteks eksekusi ketika fungsi dipanggil.
• Satu set variabel lokal baru dibuat setiap kali suatu fungsi dipanggil.

Tautan

• Atribut pribadi dan metode pribadi Douglas Crockford yang disimulasikan untuk suatu objek, menggunakan penutupan.
• Penjelasan yang bagus tentang bagaimana penutupan dapat menyebabkan kebocoran memori di IE jika Anda tidak hati-hati.

Setiap fungsi dalam JavaScript memelihara tautan ke lingkungan leksikal luarnya. Lingkungan leksikal adalah peta dari semua nama (mis. Variabel, parameter) dalam lingkup, dengan nilainya.

Jadi, setiap kali Anda melihat functionkata kunci, kode di dalam fungsi itu memiliki akses ke variabel yang dinyatakan di luar fungsi.

function foo(x) {
  var tmp = 3;

  function bar(y) {
    console.log(x + y + (++tmp)); // will log 16
  }

  bar(10);
}

foo(2);

Ini akan masuk 16karena fungsi barmenutup parameter xdan variabel tmp, yang keduanya ada di lingkungan leksikal dari fungsi luar foo.

Fungsi bar, bersama dengan hubungannya dengan lingkungan fungsi leksikal fooadalah penutupan.

Fungsi tidak harus kembali untuk membuat penutupan. Hanya berdasarkan deklarasi, setiap fungsi menutup lingkungan leksikal yang melingkupinya, membentuk penutupan.

function foo(x) {
  var tmp = 3;

  return function (y) {
    console.log(x + y + (++tmp)); // will also log 16
  }
}

var bar = foo(2);
bar(10); // 16
bar(10); // 17

Fungsi di atas juga akan mencatat 16, karena kode di dalamnya barmasih dapat merujuk ke argumen xdan variabel tmp, meskipun mereka tidak lagi secara langsung dalam cakupan.

Namun, karena tmpmasih berkeliaran di dalam barpenutupan, itu tersedia untuk ditambahkan. Itu akan bertambah setiap kali Anda menelepon bar.

Contoh paling sederhana dari penutupan adalah ini:

var a = 10;

function test() {
  console.log(a); // will output 10
  console.log(b); // will output 6
}
var b = 6;
test();

Ketika fungsi JavaScript dipanggil, konteks eksekusi baru ecdibuat. Bersama dengan argumen fungsi dan objek target, konteks eksekusi ini juga menerima tautan ke lingkungan leksikal dari konteks eksekusi pemanggilan, artinya variabel yang dideklarasikan di lingkungan leksikal luar (dalam contoh di atas, keduanya adan b) tersedia dari ec.

Setiap fungsi menciptakan penutupan karena setiap fungsi memiliki tautan ke lingkungan leksikal luarnya.

Perhatikan bahwa variabel itu sendiri terlihat dari dalam penutupan, bukan salinan.

KATA PENGANTAR: jawaban ini ditulis ketika pertanyaannya adalah:

Seperti yang dikatakan Albert, "Jika Anda tidak dapat menjelaskannya kepada anak berusia enam tahun, Anda benar-benar tidak memahaminya sendiri." Saya mencoba menjelaskan penutupan JS kepada seorang teman berusia 27 tahun dan benar-benar gagal.

Adakah yang bisa menganggap bahwa saya berusia 6 tahun dan anehnya tertarik dengan subjek itu?

Saya cukup yakin saya adalah satu-satunya orang yang mencoba untuk mengambil pertanyaan awal secara harfiah. Sejak itu, pertanyaannya bermutasi beberapa kali, jadi jawaban saya sekarang mungkin tampak sangat konyol & tidak pada tempatnya. Semoga ide umum cerita tetap menyenangkan bagi sebagian orang.

Saya penggemar analogi dan metafora ketika menjelaskan konsep-konsep yang sulit, jadi izinkan saya mencoba cerita saya.

Pada suatu ketika:

Ada seorang putri ...

function princess() {

Dia hidup di dunia yang indah penuh petualangan. Dia bertemu Pangeran Tampan, berkuda mengelilingi dunianya dengan naga unicorn, bertempur, bertemu binatang yang bisa bicara, dan banyak hal fantastik lainnya.

    var adventures = [];

    function princeCharming() { /* ... */ }

    var unicorn = { /* ... */ },
        dragons = [ /* ... */ ],
        squirrel = "Hello!";

    /* ... */

Tetapi dia harus selalu kembali ke dunia tugasnya yang membosankan dan orang dewasa.

    return {

Dan dia sering memberi tahu mereka tentang petualangan terbarunya yang menakjubkan sebagai seorang putri.

        story: function() {
            return adventures[adventures.length - 1];
        }
    };
}

Tapi yang akan mereka lihat hanyalah seorang gadis kecil ...

var littleGirl = princess();

... bercerita tentang sihir dan fantasi.

littleGirl.story();

Dan meskipun orang dewasa tahu tentang putri asli, mereka tidak akan pernah percaya pada unicorn atau naga karena mereka tidak pernah bisa melihat mereka. Orang dewasa mengatakan bahwa mereka hanya ada di dalam imajinasi gadis kecil itu.

Tetapi kita tahu kebenaran yang sebenarnya; bahwa gadis kecil dengan putri di dalam ...

... benar-benar seorang putri dengan seorang gadis kecil di dalamnya.

Mengambil pertanyaan dengan serius, kita harus mencari tahu apa yang khas 6 tahun mampu secara kognitif, meskipun harus diakui, orang yang tertarik pada JavaScript tidak begitu khas.

Tentang Perkembangan Anak: 5 hingga 7 Tahun dikatakan:

Anak Anda akan dapat mengikuti arahan dua langkah. Misalnya, jika Anda berkata kepada anak Anda, "Pergi ke dapur dan ambilkan aku kantong sampah" mereka akan dapat mengingat arah itu.

Kita dapat menggunakan contoh ini untuk menjelaskan penutupan, sebagai berikut:

Dapur adalah penutup yang memiliki variabel lokal, disebut trashBags. Ada fungsi di dalam dapur yang disebut getTrashBagyang mendapatkan satu kantong sampah dan mengembalikannya.

Kami dapat mengkodekan ini dalam JavaScript seperti ini:

function makeKitchen() {
  var trashBags = ['A', 'B', 'C']; // only 3 at first

  return {
    getTrashBag: function() {
      return trashBags.pop();
    }
  };
}

var kitchen = makeKitchen();

console.log(kitchen.getTrashBag()); // returns trash bag C
console.log(kitchen.getTrashBag()); // returns trash bag B
console.log(kitchen.getTrashBag()); // returns trash bag A

Poin lebih lanjut yang menjelaskan mengapa penutupan menarik:

• Setiap kali makeKitchen()dipanggil, penutupan baru dibuat dengan tersendiri trashBags.
• The trashBagsvariabel lokal ke dalam setiap dapur dan tidak dapat diakses di luar, tapi fungsi batin pada getTrashBagproperti tidak memiliki akses ke sana.
• Setiap panggilan fungsi membuat penutupan, tetapi tidak akan perlu untuk menjaga penutupan di sekitar kecuali fungsi bagian dalam, yang memiliki akses ke bagian dalam penutupan, dapat dipanggil dari luar penutupan. Mengembalikan objek dengan getTrashBagfungsi melakukan itu di sini.

The Straw Man

Saya perlu tahu berapa kali sebuah tombol diklik dan melakukan sesuatu pada setiap klik ketiga ...

Solusi yang Cukup Jelas

// Declare counter outside event handler's scope
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  // Increment outside counter
  counter++;

  if (counter === 3) {
    // Do something every third time
    console.log("Third time's the charm!");

    // Reset counter
    counter = 0;
  }
});

<button id="button">Click Me!</button>

Sekarang ini akan berhasil, tetapi ia merambah ke lingkup luar dengan menambahkan variabel, yang tujuan utamanya adalah untuk melacak jumlah. Dalam beberapa situasi, ini lebih disukai karena aplikasi luar Anda mungkin memerlukan akses ke informasi ini. Namun dalam kasus ini, kami hanya mengubah perilaku klik setiap ketiga, jadi lebih baik menyertakan fungsi ini di dalam pengendali event .

Pertimbangkan opsi ini

var element = document.getElementById('button');

element.addEventListener("click", (function() {
  // init the count to 0
  var count = 0;

  return function(e) { // <- This function becomes the click handler
    count++; //    and will retain access to the above `count`

    if (count === 3) {
      // Do something every third time
      console.log("Third time's the charm!");

      //Reset counter
      count = 0;
    }
  };
})());

<button id="button">Click Me!</button>

Perhatikan beberapa hal di sini.

Dalam contoh di atas, saya menggunakan perilaku penutupan JavaScript. Perilaku ini memungkinkan setiap fungsi memiliki akses ke ruang lingkup di mana ia dibuat, tanpa batas. Untuk menerapkannya secara praktis, saya segera menjalankan fungsi yang mengembalikan fungsi lain, dan karena fungsi yang saya kembalikan memiliki akses ke variabel jumlah internal (karena perilaku penutupan yang dijelaskan di atas) ini menghasilkan ruang lingkup pribadi untuk penggunaan oleh hasil fungsi ... Tidak begitu sederhana? Mari kita encerkan ...

Penutupan satu garis sederhana

//          _______________________Immediately invoked______________________
//         |                                                                |
//         |        Scope retained for use      ___Returned as the____      |
//         |       only by returned function   |    value of func     |     |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

Semua variabel di luar fungsi yang dikembalikan tersedia untuk fungsi yang dikembalikan, tetapi mereka tidak secara langsung tersedia untuk objek fungsi yang dikembalikan ...

func();  // Alerts "val"
func.a;  // Undefined

Mendapatkan? Jadi, dalam contoh utama kami, variabel jumlah terdapat di dalam penutupan dan selalu tersedia untuk pengendali acara, sehingga mempertahankan statusnya dari klik ke klik.

Juga, keadaan variabel pribadi ini sepenuhnya dapat diakses, baik untuk pembacaan dan penugasan ke variabel cakupan pribadi.

Ini dia; Anda sekarang sepenuhnya merangkum perilaku ini.

Posting Blog Lengkap (termasuk pertimbangan jQuery)

Penutupan sulit dijelaskan karena mereka digunakan untuk membuat beberapa perilaku berfungsi yang diharapkan semua orang secara intuitif untuk bekerja. Saya menemukan cara terbaik untuk menjelaskannya (dan cara saya mempelajari apa yang mereka lakukan) adalah membayangkan situasi tanpa mereka:

    var bind = function(x) {
        return function(y) { return x + y; };
    }
    
    var plus5 = bind(5);
    console.log(plus5(3));

Apa yang akan terjadi di sini jika JavaScript tidak mengetahui penutupan? Cukup ganti panggilan di baris terakhir dengan badan metodenya (yang pada dasarnya adalah fungsi yang dipanggil) dan Anda dapat:

console.log(x + 3);

Sekarang, di mana definisi x? Kami tidak mendefinisikannya dalam ruang lingkup saat ini. Satu-satunya solusi adalah dengan membiarkan plus5 membawa ruang lingkup (atau lebih tepatnya, ruang lingkup induknya) sekitar. Dengan cara ini, xdidefinisikan dengan baik dan terikat dengan nilai 5.

TLDR

Penutupan adalah hubungan antara fungsi dan lingkungan leksikal luarnya (mis. Seperti yang ditulis), sehingga pengidentifikasi (variabel, parameter, deklarasi fungsi dll.) Yang didefinisikan dalam lingkungan tersebut dapat dilihat dari dalam fungsi, terlepas dari kapan atau dari di mana fungsi dipanggil.

Detail

Dalam terminologi spesifikasi ECMAScript, penutupan dapat dikatakan diimplementasikan oleh [[Environment]]referensi dari setiap fungsi-objek, yang menunjuk ke lingkungan leksikal di mana fungsi didefinisikan.

Ketika suatu fungsi dipanggil melalui [[Call]]metode internal , [[Environment]]referensi pada objek-fungsi disalin ke referensi lingkungan luar dari catatan lingkungan dari konteks eksekusi yang baru dibuat (stack frame).

Dalam contoh berikut, fungsi fmenutup lingkungan leksikal dari konteks eksekusi global:

function f() {}

Dalam contoh berikut, fungsi hmenutup lingkungan leksikal fungsi g, yang, pada gilirannya, menutup lingkungan leksikal konteks eksekusi global.

function g() {
    function h() {}
}

Jika fungsi dalam dikembalikan oleh luar, maka lingkungan leksikal luar akan bertahan setelah fungsi luar kembali. Ini karena lingkungan leksikal luar perlu tersedia jika fungsi dalam pada akhirnya dipanggil.

Dalam contoh berikut, fungsi jmenutup lingkungan leksikal fungsi i, yang berarti bahwa variabel xterlihat dari fungsi dalam j, lama setelah fungsi imenyelesaikan eksekusi:

function i() {
    var x = 'mochacchino'
    return function j() {
        console.log('Printing the value of x, from within function j: ', x)
    }
} 

const k = i()
setTimeout(k, 500) // invoke k (which is j) after 500ms

Sebagai penutup, variabel-variabel di lingkungan leksikal luar itu sendiri tersedia, bukan salinan.

function l() {
  var y = 'vanilla';

  return {
    setY: function(value) {
      y = value;
    },
    logY: function(value) {
      console.log('The value of y is: ', y);
    }
  }
}

const o = l()
o.logY() // The value of y is: vanilla
o.setY('chocolate')
o.logY() // The value of y is: chocolate

Rantai lingkungan leksikal, dihubungkan antara konteks eksekusi melalui referensi lingkungan luar, membentuk rantai lingkup dan mendefinisikan pengidentifikasi yang terlihat dari fungsi yang diberikan.

Harap perhatikan bahwa dalam upaya meningkatkan kejelasan dan akurasi, jawaban ini telah banyak berubah dari aslinya.

OK, kipas penutup berusia 6 tahun. Apakah Anda ingin mendengar contoh penutupan paling sederhana?

Mari kita bayangkan situasi selanjutnya: seorang pengemudi duduk di dalam mobil. Mobil itu ada di dalam pesawat. Pesawat ada di bandara. Kemampuan pengemudi untuk mengakses barang-barang di luar mobilnya, tetapi di dalam pesawat, bahkan jika pesawat itu meninggalkan bandara, adalah penutup. Itu dia. Saat Anda berusia 27 tahun, lihat penjelasan yang lebih terperinci atau pada contoh di bawah ini.

Inilah cara saya dapat mengubah cerita pesawat saya menjadi kode.

var plane = function(defaultAirport) {

  var lastAirportLeft = defaultAirport;

  var car = {
    driver: {
      startAccessPlaneInfo: function() {
        setInterval(function() {
          console.log("Last airport was " + lastAirportLeft);
        }, 2000);
      }
    }
  };
  car.driver.startAccessPlaneInfo();

  return {
    leaveTheAirport: function(airPortName) {
      lastAirportLeft = airPortName;
    }
  }
}("Boryspil International Airport");

plane.leaveTheAirport("John F. Kennedy");

Ini adalah upaya untuk menghilangkan beberapa (mungkin) kesalahpahaman tentang penutupan yang muncul di beberapa jawaban lain.

• Penutupan tidak hanya dibuat ketika Anda mengembalikan fungsi batin. Bahkan, fungsi melampirkan tidak perlu kembali sama sekali agar penutupannya dibuat. Sebagai gantinya, Anda dapat menetapkan fungsi bagian dalam Anda ke variabel di lingkup luar, atau meneruskannya sebagai argumen ke fungsi lain di mana ia bisa dipanggil segera atau kapan saja nanti. Oleh karena itu, penutupan fungsi penutup mungkin dibuat segera setelah fungsi penutup dipanggil karena setiap fungsi bagian dalam memiliki akses ke penutupan itu setiap kali fungsi bagian dalam dipanggil, sebelum atau setelah fungsi penutup kembali.
• Penutupan tidak mereferensikan salinan nilai -nilai variabel lama dalam cakupannya. Variabel itu sendiri adalah bagian dari penutupan, dan nilai yang terlihat saat mengakses salah satu variabel tersebut adalah nilai terbaru pada saat diakses. Inilah mengapa fungsi dalam yang dibuat di dalam loop bisa rumit, karena masing-masing memiliki akses ke variabel luar yang sama daripada mengambil salinan variabel pada saat fungsi dibuat atau dipanggil.
• "Variabel" dalam penutupan menyertakan fungsi apa pun yang dinyatakan dalam fungsi. Mereka juga menyertakan argumen fungsi. Penutupan juga memiliki akses ke variabel penutupannya yang mengandung, sampai ke lingkup global.
• Penutupan menggunakan memori, tetapi tidak menyebabkan kebocoran memori karena JavaScript dengan sendirinya membersihkan struktur sirkulernya sendiri yang tidak dirujuk. Kebocoran memori Internet Explorer yang melibatkan penutupan dibuat ketika gagal untuk memutuskan nilai-nilai atribut DOM yang merujuk penutupan, dengan demikian mempertahankan referensi ke struktur yang mungkin melingkar.

Saya menulis posting blog sementara kembali menjelaskan penutupan. Inilah yang saya katakan tentang penutupan dalam hal mengapa Anda menginginkannya.

Penutupan adalah cara untuk membiarkan suatu fungsi memiliki variabel pribadi yang persisten - yaitu, variabel yang hanya diketahui oleh satu fungsi, di mana ia dapat melacak info dari waktu sebelumnya yang dijalankan.

Dalam pengertian itu, mereka membiarkan fungsi bertindak sedikit seperti objek dengan atribut pribadi.

Pos lengkap:

Jadi apa penutupan ini?

Penutupan sederhana:

Contoh sederhana berikut mencakup semua poin utama penutupan JavaScript. ^*  

Berikut adalah pabrik yang menghasilkan kalkulator yang dapat menambah dan mengalikan:

function make_calculator() {
  var n = 0; // this calculator stores a single number n
  return {
    add: function(a) {
      n += a;
      return n;
    },
    multiply: function(a) {
      n *= a;
      return n;
    }
  };
}

first_calculator = make_calculator();
second_calculator = make_calculator();

first_calculator.add(3); // returns 3
second_calculator.add(400); // returns 400

first_calculator.multiply(11); // returns 33
second_calculator.multiply(10); // returns 4000

Poin utama: Setiap panggilan untuk make_calculatormembuat variabel lokal baru n, yang terus dapat digunakan oleh kalkulator itu adddan multiplyfungsinya lama setelah make_calculatorkembali.

Jika Anda terbiasa dengan bingkai tumpukan, kalkulator ini tampak aneh: Bagaimana mereka dapat tetap mengakses nsetelah make_calculatorpengembalian? Jawabannya adalah membayangkan bahwa JavaScript tidak menggunakan "stack frames", tetapi sebaliknya menggunakan "heap frames", yang dapat bertahan setelah pemanggilan fungsi yang membuatnya kembali.

Fungsi dalam suka adddan multiply, yang mengakses variabel yang dinyatakan dalam fungsi luar ^** , disebut closure .

Cukup banyak untuk penutupan.

^{* Sebagai contoh, ini mencakup semua poin dalam artikel "Penutup untuk Dummies" yang diberikan dalam jawaban lain , kecuali contoh 6, yang hanya menunjukkan bahwa variabel dapat digunakan sebelum dideklarasikan, fakta yang bagus untuk diketahui tetapi sama sekali tidak terkait dengan penutupan. Ini juga mencakup semua poin dalam jawaban yang diterima , kecuali untuk poin (1) yang berfungsi menyalin argumen mereka ke dalam variabel lokal (argumen fungsi yang disebutkan), dan (2) bahwa menyalin angka membuat angka baru, tetapi menyalin referensi objek memberi Anda referensi lain ke objek yang sama. Ini juga baik untuk diketahui tetapi sekali lagi sama sekali tidak terkait dengan penutupan. Ini juga sangat mirip dengan contoh dalam jawaban ini tetapi sedikit lebih pendek dan kurang abstrak. Itu tidak mencakup titikjawaban ini atau komentar ini , yaitu JavaScript yang membuatnya sulit untuk menyambungkan arusnilai variabel loop ke fungsi dalam Anda: Langkah "memasukkan" hanya dapat dilakukan dengan fungsi pembantu yang membungkus fungsi batin Anda dan dipanggil pada setiap iterasi loop. (Sebenarnya, fungsi bagian dalam mengakses salinan fungsi helper dari variabel, alih-alih menyambungkan sesuatu.) Sekali lagi, sangat berguna saat membuat penutupan, tetapi bukan bagian dari apa penutupan itu atau bagaimana kerjanya. Ada kebingungan tambahan karena penutupan bekerja secara berbeda dalam bahasa fungsional seperti ML, di mana variabel terikat dengan nilai daripada ruang penyimpanan, memberikan aliran konstan orang-orang yang memahami penutupan dengan cara (yaitu cara "menghubungkan") yaitu hanya salah untuk JavaScript, di mana variabel selalu terikat ke ruang penyimpanan, dan tidak pernah ke nilai.}

^{** Setiap fungsi luar, jika beberapa bersarang, atau bahkan dalam konteks global, karena jawaban ini menunjukkan dengan jelas.}

Bagaimana saya menjelaskannya kepada anak berusia enam tahun:

Anda tahu bagaimana orang dewasa dapat memiliki rumah, dan mereka menyebutnya rumah? Ketika seorang ibu memiliki anak, anak itu tidak benar-benar memiliki apa pun, bukan? Tetapi orang tuanya memiliki rumah, jadi setiap kali seseorang bertanya kepada anak "Di mana rumahmu?", Dia dapat menjawab "rumah itu!", Dan menunjuk ke rumah orang tuanya. "Penutupan" adalah kemampuan anak untuk selalu (bahkan jika di luar negeri) dapat mengatakan bahwa ia memiliki rumah, meskipun sebenarnya orang tua yang memiliki rumah itu.

Bisakah Anda menjelaskan penutupan kepada anak berusia 5 tahun? *

Saya masih berpikir penjelasan Google bekerja dengan sangat baik dan singkat:

/*
*    When a function is defined in another function and it
*    has access to the outer function's context even after
*    the outer function returns.
*
* An important concept to learn in JavaScript.
*/

function outerFunction(someNum) {
    var someString = 'Hey!';
    var content = document.getElementById('content');
    function innerFunction() {
        content.innerHTML = someNum + ': ' + someString;
        content = null; // Internet Explorer memory leak for DOM reference
    }
    innerFunction();
}

outerFunction(1);​

_{* Pertanyaan # AC}

Saya cenderung belajar lebih baik dengan perbandingan BAIK / BURUK. Saya suka melihat kode yang bekerja diikuti oleh kode yang tidak bekerja yang mungkin ditemui seseorang. Saya mengumpulkan jsFiddle yang melakukan perbandingan dan mencoba meredakan perbedaan menjadi penjelasan paling sederhana yang dapat saya berikan .

Penutupan dilakukan dengan benar:

console.log('CLOSURES DONE RIGHT');

var arr = [];

function createClosure(n) {
    return function () {
        return 'n = ' + n;
    }
}

for (var index = 0; index < 10; index++) {
    arr[index] = createClosure(index);
}

for (var index in arr) {
    console.log(arr[index]());
}

• Dalam kode di atas createClosure(n)dipanggil dalam setiap iterasi dari loop. Perhatikan bahwa saya menamai variabel nuntuk menyorot bahwa itu adalah variabel baru yang dibuat dalam lingkup fungsi baru dan bukan variabel yang sama seperti indexyang terikat pada lingkup luar.

• Ini menciptakan ruang lingkup baru dan nterikat pada ruang lingkup itu; ini berarti kami memiliki 10 cakupan terpisah, satu untuk setiap iterasi.

• createClosure(n) mengembalikan fungsi yang mengembalikan n dalam lingkup itu.

• Dalam setiap ruang lingkup nterikat dengan nilai apa pun yang dimilikinya saat createClosure(n)dipanggil sehingga fungsi bersarang yang dikembalikan akan selalu mengembalikan nilai nyang dimilikinya saat createClosure(n)dipanggil.

Penutupan yang dilakukan salah:

console.log('CLOSURES DONE WRONG');

function createClosureArray() {
    var badArr = [];

    for (var index = 0; index < 10; index++) {
        badArr[index] = function () {
            return 'n = ' + index;
        };
    }
    return badArr;
}

var badArr = createClosureArray();

for (var index in badArr) {
    console.log(badArr[index]());
}

• Dalam kode di atas, loop telah dipindahkan dalam createClosureArray()fungsi dan fungsi sekarang hanya mengembalikan array yang sudah selesai, yang sekilas tampak lebih intuitif.

• Apa yang mungkin tidak jelas adalah bahwa karena createClosureArray()hanya dipanggil sekali hanya satu ruang lingkup yang dibuat untuk fungsi ini, bukan satu untuk setiap iterasi dari loop.

• Dalam fungsi ini variabel bernama indexdidefinisikan. Loop berjalan dan menambahkan fungsi ke array yang kembali index. Catatan yang indexdidefinisikan dalam createClosureArrayfungsi yang hanya dipanggil sekali saja.

• Karena hanya ada satu ruang lingkup dalam createClosureArray()fungsi, indexhanya terikat pada nilai dalam ruang lingkup itu. Dengan kata lain, setiap kali loop mengubah nilai index, itu mengubahnya untuk semua yang mereferensikannya dalam lingkup itu.

• Semua fungsi yang ditambahkan ke array mengembalikan indexvariabel SAMA dari lingkup induk di mana ia didefinisikan bukan 10 yang berbeda dari 10 cakupan yang berbeda seperti contoh pertama. Hasil akhirnya adalah bahwa semua 10 fungsi mengembalikan variabel yang sama dari cakupan yang sama.

• Setelah loop selesai dan indexdilakukan modifikasi nilai akhir adalah 10, oleh karena itu setiap fungsi yang ditambahkan ke array mengembalikan nilai indexvariabel tunggal yang sekarang diatur ke 10.

Hasil

PENUTUPAN DILAKUKAN KANAN
n = 0
n = 1
n = 2
n = 3
n = 4
n = 5
n = 6
n = 7
n = 8
n = 9

PENUTUPAN SESUAI SALAH
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10 n = 10

Wikipedia pada penutupan :

Dalam ilmu komputer, penutupan adalah fungsi bersama-sama dengan lingkungan referensi untuk nama-nama nonlokal (variabel bebas) dari fungsi itu.

Secara teknis, dalam JavaScript , setiap fungsi adalah penutupan . Itu selalu memiliki akses ke variabel yang didefinisikan dalam lingkup sekitarnya.

Karena konstruksi yang mendefinisikan ruang lingkup dalam JavaScript adalah fungsi , bukan blok kode seperti dalam banyak bahasa lain, apa yang biasanya kita maksud dengan penutupan dalam JavaScript adalah fungsi yang bekerja dengan variabel non-lokal yang didefinisikan dalam fungsi sekitarnya yang sudah dijalankan .

Penutupan sering digunakan untuk membuat fungsi dengan beberapa data pribadi yang tersembunyi (tetapi tidak selalu demikian).

var db = (function() {
    // Create a hidden object, which will hold the data
    // it's inaccessible from the outside.
    var data = {};

    // Make a function, which will provide some access to the data.
    return function(key, val) {
        if (val === undefined) { return data[key] } // Get
        else { return data[key] = val } // Set
    }
    // We are calling the anonymous surrounding function,
    // returning the above inner function, which is a closure.
})();

db('x')    // -> undefined
db('x', 1) // Set x to 1
db('x')    // -> 1
// It's impossible to access the data object itself.
// We are able to get or set individual it.

ems

Contoh di atas menggunakan fungsi anonim, yang dieksekusi sekali. Tetapi tidak harus demikian. Itu bisa dinamai (misalnya mkdb) dan dieksekusi nanti, menghasilkan fungsi basis data setiap kali dipanggil. Setiap fungsi yang dihasilkan akan memiliki objek basis data tersembunyi sendiri. Contoh penggunaan lain dari penutupan adalah ketika kita tidak mengembalikan fungsi, tetapi objek yang berisi beberapa fungsi untuk tujuan yang berbeda, masing-masing fungsi tersebut memiliki akses ke data yang sama.

Saya menyusun tutorial JavaScript interaktif untuk menjelaskan cara kerja penutupan. Apa itu Penutupan?

Inilah salah satu contohnya:

var create = function (x) {
    var f = function () {
        return x; // We can refer to x here!
    };
    return f;
};
// 'create' takes one argument, creates a function

var g = create(42);
// g is a function that takes no arguments now

var y = g();
// y is 42 here

Anak-anak akan selalu mengingat rahasia yang telah mereka bagi dengan orang tua mereka, bahkan setelah orang tua mereka pergi. Inilah fungsi penutupan untuk fungsi.

Rahasia untuk fungsi JavaScript adalah variabel pribadi

var parent = function() {
 var name = "Mary"; // secret
}

Setiap kali Anda menyebutnya, "nama" variabel lokal dibuat dan diberi nama "Mary". Dan setiap kali fungsi keluar, variabelnya hilang dan namanya dilupakan.

Seperti yang Anda tebak, karena variabel dibuat kembali setiap kali fungsi dipanggil, dan tidak ada orang lain yang akan mengetahuinya, pasti ada tempat rahasia tempat mereka disimpan. Itu bisa disebut Kamar Rahasia atau tumpukan atau ruang lingkup lokal tetapi tidak terlalu penting. Kita tahu mereka ada di sana, di suatu tempat, tersembunyi di dalam ingatan.

Tetapi, dalam JavaScript ada hal yang sangat istimewa ini, fungsi-fungsi yang dibuat di dalam fungsi-fungsi lain, juga dapat mengetahui variabel lokal orang tua mereka dan menjaganya selama mereka masih hidup.

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    // I can also see that "name" is "Mary"
  }
}

Jadi, selama kita berada di fungsi orangtua, ia dapat membuat satu atau lebih fungsi anak yang berbagi variabel rahasia dari tempat rahasia.

Tetapi yang menyedihkan adalah, jika anak itu juga merupakan variabel pribadi dari fungsi orang tuanya, ia juga akan mati ketika orang tua berakhir, dan rahasia akan mati bersama mereka.

Jadi untuk hidup, anak harus pergi sebelum terlambat

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    return "My name is " + childName  +", child of " + name; 
  }
  return child; // child leaves the parent ->
}
var child = parent(); // < - and here it is outside 

Dan sekarang, meskipun Mary "tidak lagi berlari", ingatannya tidak hilang dan anaknya akan selalu mengingat namanya dan rahasia lain yang mereka bagi selama mereka bersama.

Jadi, jika Anda memanggil anak "Alice", dia akan merespons

child("Alice") => "My name is Alice, child of Mary"

Hanya itu yang bisa diceritakan.

Saya tidak mengerti mengapa jawabannya sangat rumit di sini.

Berikut ini adalah penutupan:

var a = 42;

function b() { return a; }

Iya. Anda mungkin menggunakannya beberapa kali sehari.

Tidak ada alasan untuk percaya bahwa penutupan adalah peretasan desain yang rumit untuk mengatasi masalah tertentu. Tidak, penutupan hanya tentang menggunakan variabel yang berasal dari cakupan yang lebih tinggi dari perspektif di mana fungsi itu dinyatakan (tidak dijalankan) .

Sekarang apa yang memungkinkan Anda lakukan bisa menjadi lebih spektakuler, lihat jawaban lain.

Contoh untuk titik pertama oleh dlaliberte:

Penutupan tidak hanya dibuat ketika Anda mengembalikan fungsi batin. Bahkan, fungsi melampirkan tidak perlu kembali sama sekali. Sebagai gantinya, Anda dapat menetapkan fungsi bagian dalam ke variabel di lingkup luar, atau meneruskannya sebagai argumen ke fungsi lain tempat variabel itu dapat segera digunakan. Oleh karena itu, penutupan fungsi penutup mungkin sudah ada pada saat fungsi penutup dipanggil karena fungsi dalam apa pun memiliki akses ke sana segera setelah dipanggil.

var i;
function foo(x) {
    var tmp = 3;
    i = function (y) {
        console.log(x + y + (++tmp));
    }
}
foo(2);
i(3);

Penutupan adalah tempat fungsi dalam memiliki akses ke variabel di fungsi luarnya. Itu mungkin penjelasan satu baris paling sederhana yang bisa Anda dapatkan untuk penutupan.

Saya tahu sudah ada banyak solusi, tetapi saya kira skrip kecil dan sederhana ini dapat berguna untuk menunjukkan konsep:

// makeSequencer will return a "sequencer" function
var makeSequencer = function() {
    var _count = 0; // not accessible outside this function
    var sequencer = function () {
        return _count++;
    }
    return sequencer;
}

var fnext = makeSequencer();
var v0 = fnext();     // v0 = 0;
var v1 = fnext();     // v1 = 1;
var vz = fnext._count // vz = undefined

Anda sedang tidur dan Anda mengundang Dan. Anda memberi tahu Dan untuk membawa satu XBox controller.

Dan mengundang Paul. Dan meminta Paul untuk membawa satu controller. Berapa banyak pengendali yang dibawa ke pesta?

function sleepOver(howManyControllersToBring) {

    var numberOfDansControllers = howManyControllersToBring;

    return function danInvitedPaul(numberOfPaulsControllers) {
        var totalControllers = numberOfDansControllers + numberOfPaulsControllers;
        return totalControllers;
    }
}

var howManyControllersToBring = 1;

var inviteDan = sleepOver(howManyControllersToBring);

// The only reason Paul was invited is because Dan was invited. 
// So we set Paul's invitation = Dan's invitation.

var danInvitedPaul = inviteDan(howManyControllersToBring);

alert("There were " + danInvitedPaul + " controllers brought to the party.");

Penulis Closures telah menjelaskan penutupan dengan cukup baik, menjelaskan alasan mengapa kami membutuhkannya dan juga menjelaskan LexicalEnvironment yang diperlukan untuk memahami penutupan.
Berikut ringkasannya:

Bagaimana jika suatu variabel diakses, tetapi itu bukan lokal? Seperti di sini:

Dalam hal ini, interpreter menemukan variabel di LexicalEnvironmentobjek luar .

Proses ini terdiri dari dua langkah:

1. Pertama, ketika fungsi f dibuat, itu tidak dibuat di ruang kosong. Ada objek LexicalEnvironment saat ini. Dalam kasus di atas, itu jendela (a tidak ditentukan pada saat pembuatan fungsi).

Ketika suatu fungsi dibuat, ia akan mendapatkan properti tersembunyi, bernama [[Cakupan]], yang mereferensikan LexicalEnvironment saat ini.

Jika variabel dibaca, tetapi tidak dapat ditemukan di mana pun, kesalahan dihasilkan.

Fungsi bersarang

Fungsi dapat bersarang di dalam satu sama lain, membentuk rantai Lingkungan Lexical yang juga dapat disebut rantai lingkup.

Jadi, fungsi g memiliki akses ke g, a dan f.

Penutupan

Fungsi bersarang dapat terus hidup setelah fungsi luar selesai:

Menandai Lingkungan Lexical:

Seperti yang kita lihat, this.sayadalah properti di objek pengguna, jadi itu terus hidup setelah Pengguna selesai.

Dan jika Anda ingat, ketika this.saydibuat, itu (karena setiap fungsi) mendapatkan referensi internal this.say.[[Scope]]ke LexicalEnvironment saat ini. Jadi, Lingkungan Lexical dari eksekusi Pengguna saat ini tetap dalam memori. Semua variabel Pengguna juga adalah propertinya, sehingga mereka juga dijaga dengan hati-hati, tidak dibuang seperti biasanya.

Intinya adalah untuk memastikan bahwa jika fungsi dalam ingin mengakses variabel luar di masa depan, ia dapat melakukannya.

Untuk meringkas:

1. Fungsi bagian dalam menyimpan referensi ke Lingkungan Luar Lexical.
2. Fungsi dalam dapat mengakses variabel dari itu kapan saja bahkan jika fungsi luar selesai.
3. Peramban menyimpan LexicalEnvironment dan semua propertinya (variabel) dalam memori sampai ada fungsi internal yang merujuknya.

Ini disebut penutupan.

Fungsi JavaScript dapat mengakses:

1. Argumen
2. Lokal (yaitu, variabel lokal dan fungsi lokal mereka)
3. Lingkungan, yang meliputi:
   • global, termasuk DOM
   • apa pun di fungsi luar

Jika suatu fungsi mengakses lingkungannya, maka fungsinya adalah penutupan.

Perhatikan bahwa fungsi luar tidak diperlukan, meskipun mereka menawarkan manfaat yang tidak saya bahas di sini. Dengan mengakses data di lingkungannya, penutupan membuat data tetap hidup. Dalam subkap fungsi luar / dalam, fungsi luar dapat membuat data lokal dan akhirnya keluar, namun, jika ada fungsi dalam yang bertahan setelah fungsi luar keluar, maka fungsi dalam menyimpan data lokal fungsi luar hidup.

Contoh penutupan yang menggunakan lingkungan global:

Bayangkan bahwa peristiwa tombol Stack Overflow Vote-Up dan Vote-Down diimplementasikan sebagai penutupan, voteUp_click dan voteDown_click, yang memiliki akses ke variabel eksternal adalah VotedUp dan isVotedDown, yang didefinisikan secara global. (Demi kesederhanaan, saya mengacu pada tombol Vote Pertanyaan StackOverflow, bukan array tombol Jawab Vote.)

Ketika pengguna mengklik tombol VoteUp, fungsi voteUp_click memeriksa apakah isVotedDown == benar untuk menentukan apakah akan memilih atau hanya membatalkan suara turun. Function voteUp_click adalah penutup karena mengakses lingkungannya.

var isVotedUp = false;
var isVotedDown = false;

function voteUp_click() {
  if (isVotedUp)
    return;
  else if (isVotedDown)
    SetDownVote(false);
  else
    SetUpVote(true);
}

function voteDown_click() {
  if (isVotedDown)
    return;
  else if (isVotedUp)
    SetUpVote(false);
  else
    SetDownVote(true);
}

function SetUpVote(status) {
  isVotedUp = status;
  // Do some CSS stuff to Vote-Up button
}

function SetDownVote(status) {
  isVotedDown = status;
  // Do some CSS stuff to Vote-Down button
}

Keempat fungsi ini adalah penutupan karena mereka semua mengakses lingkungan mereka.

Sebagai ayah dari seorang anak berusia 6 tahun, yang saat ini mengajar anak-anak kecil (dan seorang pemula yang relatif berkode tanpa pendidikan formal sehingga koreksi akan diperlukan), saya pikir pelajaran akan tetap terbaik melalui permainan langsung. Jika anak 6 tahun siap untuk memahami apa penutupan itu, maka mereka cukup tua untuk pergi sendiri. Saya sarankan menempelkan kode ke jsfiddle.net, menjelaskan sedikit, dan meninggalkan mereka sendiri untuk membuat lagu yang unik. Teks penjelasan di bawah ini mungkin lebih cocok untuk anak berusia 10 tahun.

function sing(person) {

    var firstPart = "There was " + person + " who swallowed ";

    var fly = function() {
        var creature = "a fly";
        var result = "Perhaps she'll die";
        alert(firstPart + creature + "\n" + result);
    };

    var spider = function() {
        var creature = "a spider";
        var result = "that wiggled and jiggled and tickled inside her";
        alert(firstPart + creature + "\n" + result);
    };

    var bird = function() {
        var creature = "a bird";
        var result = "How absurd!";
        alert(firstPart + creature + "\n" + result);
    };

    var cat = function() {
        var creature = "a cat";
        var result = "Imagine That!";
        alert(firstPart + creature + "\n" + result);
    };

    fly();
    spider();
    bird();
    cat();
}

var person="an old lady";

sing(person);

INSTRUKSI

DATA: Data adalah kumpulan fakta. Ini bisa berupa angka, kata, ukuran, pengamatan atau bahkan hanya deskripsi benda. Anda tidak bisa menyentuhnya, menciumnya, atau merasakannya. Anda dapat menuliskannya, berbicara dan mendengarnya. Anda bisa menggunakannya untuk membuat aroma dan rasa sentuh menggunakan komputer. Ini dapat dimanfaatkan oleh komputer menggunakan kode.

KODE: Semua tulisan di atas disebut kode . Itu ditulis dalam JavaScript.

JAVASCRIPT: JavaScript adalah bahasa. Seperti Bahasa Inggris atau Bahasa Prancis atau Bahasa Mandarin adalah bahasa. Ada banyak bahasa yang dimengerti oleh komputer dan prosesor elektronik lainnya. Agar JavaScript dipahami oleh komputer, ia membutuhkan juru bahasa. Bayangkan jika seorang guru yang hanya berbicara bahasa Rusia datang untuk mengajar kelas Anda di sekolah. Ketika guru mengatakan "все садятся", kelas tidak akan mengerti. Tapi untungnya Anda memiliki murid Rusia di kelas Anda yang memberi tahu semua orang bahwa ini berarti "semua orang duduk" - jadi Anda semua melakukannya. Kelasnya seperti komputer dan murid Rusia adalah penerjemahnya. Untuk JavaScript, juru bahasa yang paling umum disebut browser.

BROWSER: Ketika Anda terhubung ke Internet di komputer, tablet atau telepon untuk mengunjungi situs web, Anda menggunakan browser. Contoh yang mungkin Anda ketahui adalah Internet Explorer, Chrome, Firefox, dan Safari. Browser dapat memahami JavaScript dan memberi tahu komputer apa yang perlu dilakukan. Instruksi JavaScript disebut fungsi.

FUNGSI: Fungsi dalam JavaScript seperti pabrik. Mungkin pabrik kecil dengan hanya satu mesin di dalamnya. Atau mungkin mengandung banyak pabrik kecil lainnya, masing-masing dengan banyak mesin melakukan pekerjaan yang berbeda. Di pabrik pakaian kehidupan nyata Anda mungkin memiliki rim kain dan kumparan benang masuk dan T-shirt dan celana jeans keluar. Pabrik JavaScript kami hanya memproses data, tidak dapat menjahit, mengebor lubang, atau melelehkan logam. Di pabrik JavaScript kami data masuk dan data keluar.

Semua data ini kedengarannya agak membosankan, tetapi sangat keren; kita mungkin memiliki fungsi yang memberi tahu robot apa yang harus dibuat untuk makan malam. Katakanlah saya mengundang Anda dan teman Anda ke rumah saya. Anda suka kaki ayam terbaik, saya suka sosis, teman Anda selalu menginginkan apa yang Anda inginkan dan teman saya tidak makan daging.

Saya tidak punya waktu untuk berbelanja, jadi fungsi perlu tahu apa yang kita miliki di lemari es untuk membuat keputusan. Setiap bahan memiliki waktu memasak yang berbeda dan kami ingin semuanya disajikan panas oleh robot secara bersamaan. Kita perlu menyediakan fungsi dengan data tentang apa yang kita sukai, fungsinya bisa 'berbicara' ke lemari es, dan fungsi itu bisa mengendalikan robot.

Suatu fungsi biasanya memiliki nama, tanda kurung dan kurung kurawal. Seperti ini:

function cookMeal() {  /*  STUFF INSIDE THE FUNCTION  */  }

Perhatikan itu /*...*/dan //hentikan kode yang sedang dibaca oleh browser.

NAME: Anda dapat memanggil fungsi apa saja kata yang Anda inginkan. Contoh "cookMeal" adalah tipikal dalam menggabungkan dua kata bersama dan memberikan yang kedua huruf kapital di awal - tetapi ini tidak perlu. Itu tidak dapat memiliki ruang di dalamnya, dan itu tidak bisa menjadi nomor sendiri.

PARENTES: "Kurung" atau ()kotak surat di pintu fungsi pabrik JavaScript atau kotak pos di jalan untuk mengirim paket informasi ke pabrik. Terkadang kotak pos mungkin ditandai misalnya cookMeal(you, me, yourFriend, myFriend, fridge, dinnerTime) , dalam hal ini Anda tahu data apa yang harus Anda berikan.

BRACES: "Kawat gigi" yang terlihat seperti ini {}adalah jendela berwarna dari pabrik kami. Dari dalam pabrik Anda bisa melihat keluar, tetapi dari luar Anda tidak bisa melihatnya.

CONTOH KODE PANJANG DI ATAS

Kode kita dimulai dengan fungsi kata , jadi kita tahu itu salah! Kemudian nama fungsi tersebut dinyanyikan - itulah deskripsi saya sendiri tentang fungsi tersebut. Kemudian tanda kurung () . Tanda kurung selalu ada untuk suatu fungsi. Kadang-kadang mereka kosong, dan kadang-kadang mereka memiliki sesuatu dalam satu ini memiliki sebuah kata dalam.: (person). Setelah ini ada penjepit seperti ini {. Ini menandai awal dari fungsi sing () . Ini memiliki pasangan yang menandai akhir dari bernyanyi () seperti ini}

function sing(person) {  /* STUFF INSIDE THE FUNCTION */  }

Jadi fungsi ini mungkin ada hubungannya dengan bernyanyi, dan mungkin perlu beberapa data tentang seseorang. Di dalamnya ada instruksi untuk melakukan sesuatu dengan data itu.

Sekarang, setelah fungsi bernyanyi () , di dekat akhir kode adalah garis

var person="an old lady";

VARIABEL: Huruf var berarti "variabel". Variabel seperti amplop. Di luar amplop ini ditandai "orang". Di bagian dalamnya berisi selembar kertas dengan informasi yang dibutuhkan fungsi kita, beberapa huruf dan spasi bergabung bersama seperti seutas tali (disebut string) yang membuat frasa membaca "seorang wanita tua". Amplop kami dapat berisi hal-hal lain seperti angka (disebut bilangan bulat), instruksi (disebut fungsi), daftar (disebut array ). Karena variabel ini ditulis di luar semua kurung kurawal {}, dan karena Anda dapat melihat melalui jendela yang berwarna saat Anda berada di dalam kurung kurawal, variabel ini dapat dilihat dari mana saja dalam kode. Kami menyebutnya 'variabel global'.

VARIABEL GLOBAL: seseorang adalah variabel global, yang berarti bahwa jika Anda mengubah nilainya dari "seorang wanita tua" menjadi "seorang pria muda", orang itu akan tetap menjadi seorang pria muda sampai Anda memutuskan untuk mengubahnya lagi dan bahwa fungsi lain di kode dapat melihat bahwa itu adalah seorang pria muda. Tekan F12tombol atau lihat pengaturan Opsi untuk membuka konsol pengembang browser dan ketik "orang" untuk melihat apa nilai ini. Ketik person="a young man"untuk mengubahnya dan kemudian ketik "orang" lagi untuk melihat bahwa itu telah berubah.

Setelah ini, kita memiliki garis

sing(person);

Baris ini memanggil fungsi, seolah-olah memanggil anjing

"Ayo bernyanyi , Ayo, cari orang !"

Ketika browser telah memuat kode JavaScript dan mencapai garis ini, itu akan memulai fungsinya. Saya meletakkan baris di bagian akhir untuk memastikan bahwa browser memiliki semua informasi yang diperlukan untuk menjalankannya.

Fungsi mendefinisikan tindakan - fungsi utama adalah tentang bernyanyi. Ini berisi variabel yang disebut firstPart yang berlaku untuk bernyanyi tentang orang yang berlaku untuk masing-masing ayat dari lagu: "Ada" + orang + "yang menelan". Jika Anda mengetik firstPart ke konsol, Anda tidak akan mendapatkan jawaban karena variabel dikunci dalam suatu fungsi - browser tidak dapat melihat di dalam jendela berwarna kawat gigi.

PENUTUP: Penutupan adalah fungsi yang lebih kecil yang ada di dalam fungsi sing besar () . Pabrik kecil di dalam pabrik besar. Mereka masing-masing memiliki kawat gigi sendiri yang berarti bahwa variabel di dalamnya tidak dapat dilihat dari luar. Itu sebabnya nama variabel ( makhluk dan hasil ) dapat diulang dalam penutupan tetapi dengan nilai yang berbeda. Jika Anda mengetik nama-nama variabel ini di jendela konsol, Anda tidak akan mendapatkan nilainya karena disembunyikan oleh dua lapisan jendela berwarna.

Penutupan semua tahu apa variabel fungsi sing () dipanggil firstPart , karena mereka bisa melihat keluar dari jendela berwarna mereka.

Setelah penutupan datang garis

fly();
spider();
bird();
cat();

Fungsi sing () akan memanggil masing-masing fungsi ini sesuai urutan yang diberikan. Maka pekerjaan fungsi sing () akan dilakukan.

Oke, berbicara dengan anak berusia 6 tahun, saya mungkin akan menggunakan asosiasi berikut.

Bayangkan - Anda bermain dengan saudara-saudari kecil Anda di seluruh rumah, dan Anda berkeliling dengan mainan Anda dan membawa beberapa dari mereka ke kamar kakak Anda. Setelah beberapa saat, kakakmu kembali dari sekolah dan pergi ke kamarnya, dan dia mengunci di dalamnya, jadi sekarang kamu tidak bisa mengakses mainan yang tertinggal di sana lagi secara langsung. Tapi Anda bisa mengetuk pintu dan meminta mainan itu kepada kakak Anda. Ini disebut penutupan mainan ; saudaramu yang menebusnya untukmu, dan dia sekarang berada di luar jangkauan .

Bandingkan dengan situasi ketika pintu dikunci oleh angin dan tidak ada orang di dalam (pelaksanaan fungsi umum), dan kemudian beberapa kebakaran lokal terjadi dan membakar ruangan (pengumpul sampah: D), dan kemudian sebuah ruangan baru dibangun dan sekarang Anda dapat meninggalkan mainan lain di sana (contoh fungsi baru), tetapi tidak pernah mendapatkan mainan yang sama yang tersisa di contoh ruang pertama.

Untuk anak yang sudah lanjut, saya akan menempatkan sesuatu seperti yang berikut ini. Ini tidak sempurna, tetapi membuat Anda merasa tentang apa itu:

function playingInBrothersRoom (withToys) {
  // We closure toys which we played in the brother's room. When he come back and lock the door
  // your brother is supposed to be into the outer [[scope]] object now. Thanks god you could communicate with him.
  var closureToys = withToys || [],
      returnToy, countIt, toy; // Just another closure helpers, for brother's inner use.

  var brotherGivesToyBack = function (toy) {
    // New request. There is not yet closureToys on brother's hand yet. Give him a time.
    returnToy = null;
    if (toy && closureToys.length > 0) { // If we ask for a specific toy, the brother is going to search for it.

      for ( countIt = closureToys.length; countIt; countIt--) {
        if (closureToys[countIt - 1] == toy) {
          returnToy = 'Take your ' + closureToys.splice(countIt - 1, 1) + ', little boy!';
          break;
        }
      }
      returnToy = returnToy || 'Hey, I could not find any ' + toy + ' here. Look for it in another room.';
    }
    else if (closureToys.length > 0) { // Otherwise, just give back everything he has in the room.
      returnToy = 'Behold! ' + closureToys.join(', ') + '.';
      closureToys = [];
    }
    else {
      returnToy = 'Hey, lil shrimp, I gave you everything!';
    }
    console.log(returnToy);
  }
  return brotherGivesToyBack;
}
// You are playing in the house, including the brother's room.
var toys = ['teddybear', 'car', 'jumpingrope'],
    askBrotherForClosuredToy = playingInBrothersRoom(toys);

// The door is locked, and the brother came from the school. You could not cheat and take it out directly.
console.log(askBrotherForClosuredToy.closureToys); // Undefined

// But you could ask your brother politely, to give it back.
askBrotherForClosuredToy('teddybear'); // Hooray, here it is, teddybear
askBrotherForClosuredToy('ball'); // The brother would not be able to find it.
askBrotherForClosuredToy(); // The brother gives you all the rest
askBrotherForClosuredToy(); // Nothing left in there

Seperti yang Anda lihat, mainan yang tersisa di kamar masih dapat diakses melalui saudara dan tidak masalah jika ruangan itu terkunci. Ini adalah jsbin untuk bermain-main dengannya.

Jawaban untuk anak berusia enam tahun (dengan asumsi dia tahu apa fungsi itu dan apa variabelnya, dan apa datanya):

Fungsi dapat mengembalikan data. Satu jenis data yang dapat Anda kembalikan dari suatu fungsi adalah fungsi lainnya. Ketika fungsi baru itu dikembalikan, semua variabel dan argumen yang digunakan dalam fungsi yang membuatnya tidak hilang. Sebaliknya, fungsi induk itu "ditutup." Dengan kata lain, tidak ada yang bisa melihat ke dalamnya dan melihat variabel yang digunakan kecuali untuk fungsi yang dikembalikan. Fungsi baru itu memiliki kemampuan khusus untuk melihat kembali ke dalam fungsi yang membuatnya dan melihat data di dalamnya.

function the_closure() {
  var x = 4;
  return function () {
    return x; // Here, we look back inside the_closure for the value of x
  }
}

var myFn = the_closure();
myFn(); //=> 4

Cara lain yang sangat sederhana untuk menjelaskannya adalah dalam hal ruang lingkup:

Setiap kali Anda membuat ruang lingkup yang lebih kecil di dalam ruang lingkup yang lebih besar, ruang lingkup yang lebih kecil akan selalu dapat melihat apa yang ada di ruang lingkup yang lebih besar.

Fungsi dalam JavaScript bukan hanya referensi ke sekumpulan instruksi (seperti dalam bahasa C), tetapi juga mencakup struktur data tersembunyi yang terdiri dari referensi untuk semua variabel nonlokal yang digunakannya (variabel yang ditangkap). Fungsi dua bagian seperti itu disebut penutupan. Setiap fungsi dalam JavaScript dapat dianggap sebagai penutupan.

Penutupan adalah fungsi dengan status. Ini agak mirip dengan "ini" dalam arti bahwa "ini" juga menyediakan status untuk fungsi tetapi fungsi dan "ini" adalah objek yang terpisah ("ini" hanyalah parameter mewah, dan satu-satunya cara untuk mengikatnya secara permanen ke fungsi adalah untuk membuat penutupan). Sementara "ini" dan fungsi selalu hidup secara terpisah, suatu fungsi tidak dapat dipisahkan dari penutupannya dan bahasa tidak menyediakan sarana untuk mengakses variabel yang ditangkap.

Karena semua variabel eksternal yang dirujuk oleh fungsi bersarang leksikal sebenarnya adalah variabel lokal dalam rantai fungsi leksikal yang melingkupinya (variabel global dapat diasumsikan sebagai variabel lokal dari beberapa fungsi root), dan setiap eksekusi tunggal dari suatu fungsi menciptakan instance baru dari variabel lokalnya, ini mengikuti bahwa setiap eksekusi fungsi yang mengembalikan (atau mentransfernya, seperti mendaftarkannya sebagai panggilan balik) fungsi bersarang menciptakan penutupan baru (dengan serangkaian variabel nonlokal yang direferensikan dan berpotensi unik yang mewakili pelaksanaannya konteks).

Juga, harus dipahami bahwa variabel lokal dalam JavaScript dibuat bukan pada frame stack, tetapi pada heap dan dihancurkan hanya ketika tidak ada yang mereferensikannya. Ketika suatu fungsi kembali, referensi ke variabel lokalnya dikurangi, tetapi mereka bisa tetap non-nol jika selama eksekusi saat ini mereka menjadi bagian dari penutupan dan masih direferensikan oleh fungsi bersarang secara leksikal (yang dapat terjadi hanya jika referensi ke fungsi bersarang ini dikembalikan atau sebaliknya ditransfer ke beberapa kode eksternal).

Sebuah contoh:

function foo (initValue) {
   //This variable is not destroyed when the foo function exits.
   //It is 'captured' by the two nested functions returned below.
   var value = initValue;

   //Note that the two returned functions are created right now.
   //If the foo function is called again, it will return
   //new functions referencing a different 'value' variable.
   return {
       getValue: function () { return value; },
       setValue: function (newValue) { value = newValue; }
   }
}

function bar () {
    //foo sets its local variable 'value' to 5 and returns an object with
    //two functions still referencing that local variable
    var obj = foo(5);

    //Extracting functions just to show that no 'this' is involved here
    var getValue = obj.getValue;
    var setValue = obj.setValue;

    alert(getValue()); //Displays 5
    setValue(10);
    alert(getValue()); //Displays 10

    //At this point getValue and setValue functions are destroyed
    //(in reality they are destroyed at the next iteration of the garbage collector).
    //The local variable 'value' in the foo is no longer referenced by
    //anything and is destroyed too.
}

bar();

Mungkin sedikit melebihi segalanya kecuali yang paling dewasa sebelum berumur enam tahun, tetapi beberapa contoh yang membantu membuat konsep penutupan dalam JavaScript klik untuk saya.

Penutupan adalah fungsi yang memiliki akses ke ruang lingkup fungsi lain (variabel dan fungsinya). Cara termudah untuk membuat penutupan adalah dengan fungsi dalam suatu fungsi; alasannya adalah bahwa dalam JavaScript suatu fungsi selalu memiliki akses ke ruang lingkup fungsi yang mengandungnya.

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        alert(outerVar);
    }
    
    innerFunction();
}

outerFunction();

PERINGATAN: monyet

Dalam contoh di atas, fungsi luar disebut yang pada gilirannya memanggil fungsi internal. Perhatikan bagaimana outerVar tersedia untuk fungsi dalam, dibuktikan dengan itu dengan benar memperingatkan nilai outerVar.

Sekarang pertimbangkan hal berikut:

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        return outerVar;
    }
    
    return innerFunction;
}

var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction());

PERINGATAN: monyet

referenceToInnerFunction diatur ke outerFunction (), yang hanya mengembalikan referensi ke innerFunction. Ketika referenceToInnerFunction dipanggil, ia mengembalikan outerVar. Sekali lagi, seperti di atas, ini menunjukkan bahwa fungsi dalam memiliki akses ke outerVar, variabel fungsi luar. Selain itu, menarik untuk dicatat bahwa ia mempertahankan akses ini bahkan setelah fungsi luar selesai dijalankan.

Dan di sinilah segalanya menjadi sangat menarik. Jika kami menyingkirkan outerFunction, katakan setel ke null, Anda mungkin berpikir bahwa referenceToInnerFunction akan kehilangan aksesnya ke nilai outerVar. Tapi ini bukan masalahnya.

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        return outerVar;
    }
    
    return innerFunction;
}

var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction());

outerFunction = null;
alert(referenceToInnerFunction());

ALERT: monyet ALERT: monyet

Tapi bagaimana bisa begitu? Bagaimana referenceToInnerFunction masih dapat mengetahui nilai outerVar sekarang bahwa outerFunction telah disetel ke nol?

Alasan bahwa referenceToInnerFunction masih dapat mengakses nilai outerVar adalah karena ketika penutupan pertama kali dibuat dengan menempatkan innerFunction di dalam outerFunction, innerFunction menambahkan referensi ke ruang lingkup outerFunction (variabel dan fungsinya) ke rantai cakupannya. Apa artinya ini adalah innerFunction memiliki pointer atau referensi ke semua variabel outerFunction, termasuk outerVar. Jadi, bahkan ketika outerFunction telah selesai dieksekusi, atau bahkan jika itu dihapus atau diatur ke nol, variabel-variabel dalam ruang lingkupnya, seperti outerVar, tetap ada di memori karena referensi yang luar biasa kepada mereka di bagian fungsi dalam yang telah dikembalikan ke referenceToInnerFunction. Untuk benar-benar melepaskan outerVar dan variabel luar OuterFunction dari memori Anda harus menyingkirkan referensi luar biasa ini kepada mereka,

//////////

Dua hal lain tentang penutupan harus diperhatikan. Pertama, penutupan akan selalu memiliki akses ke nilai terakhir dari fungsi yang mengandungnya.

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        alert(outerVar);
    }
    
    outerVar = "gorilla";

    innerFunction();
}

outerFunction();

PERINGATAN: gorila

Kedua, ketika sebuah penutupan dibuat, ia mempertahankan referensi ke semua variabel dan fungsi fungsi yang melampirkannya; tidak bisa memilih. Dan dengan demikian, penutupan harus digunakan dengan hemat, atau setidaknya dengan hati-hati, karena mereka bisa intensif memori; banyak variabel dapat disimpan dalam memori lama setelah fungsi yang mengandung selesai dieksekusi.

Saya cukup mengarahkan mereka ke halaman Mozilla Closures . Ini adalah penjelasan terbaik, paling ringkas dan sederhana tentang dasar-dasar penutupan dan penggunaan praktis yang saya temukan. Sangat disarankan bagi siapa pun yang belajar JavaScript.

Dan ya, saya bahkan merekomendasikannya kepada anak berusia 6 tahun - jika anak berusia 6 tahun itu belajar tentang penutupan, maka logis mereka siap untuk memahami penjelasan singkat dan sederhana yang disediakan dalam artikel.