Bagaimana cara kerja pemblokir javascript?

Bagaimana Anda menjelaskan penutupan JavaScript untuk seseorang yang memiliki pengetahuan tentang konsep-konsep yang menyusunnya (misalnya, fungsi, variabel, dll.), Tetapi tidak memahami penutupan itu sendiri?

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

7654
21 сент. diatur ke e-satis pada 21 September. 2008-09-21 17:12 '08 pukul 17:12 2008-09-21 17:12
@ 89 jawaban
  • 1
  • 2
  • 3

Menutup javascript untuk pemula

Dikirim oleh Morris pada Selasa, 2006-02-21 10:19. Komunitas telah diedit sejak.

Penutupan bukanlah sihir

Halaman ini menjelaskan tentang penutupan sehingga programmer dapat memahaminya - menggunakan kode JavaScript yang berfungsi. Ini bukan untuk guru atau programmer fungsional.

Penutupan itu tidak sulit untuk dipahami begitu konsep dasar dijahit. Namun, mereka tidak dapat dipahami dengan membaca penjelasan teoretis atau akademis!

Artikel ini ditujukan untuk programmer dengan beberapa pengalaman pemrograman dasar dan dapat membaca fungsi JavaScript berikut:

6329
21 сент. jawabannya diberikan oleh Joel Anair 21 September . 2008-09-21 17:18 '08 pada 17:18 2008-09-21 17:18

Setiap kali Anda melihat kata kunci fungsi di fungsi lain, fungsi internal memiliki akses ke variabel di fungsi eksternal.

 function foo(x) { var tmp = 3; return function (y) { console.log(x + y + (++tmp)); // will also log 16 } } var bar = foo(2); // bar is now a closure. bar(10); 

Fungsi di atas juga akan menulis 16, karena bar masih dapat merujuk ke x dan tmp , bahkan jika itu tidak lagi di dalam wilayah tersebut.

Namun, karena tmp masih menggantung di sekitar penutupan bar bagian dalam, tmp juga meningkat. Ini akan meningkat setiap kali Anda memanggil bar .

Contoh paling sederhana dari penutupan adalah sebagai berikut:

border=0

 function foo(x) { var tmp = 3; return function (y) { console.log(x + y + tmp); x.memb = x.memb ? x.memb + 1 : 1; console.log(x.memb); } } var age = new Number(2); var bar = foo(age); // bar is now a closure referencing age. bar(10); 

Seperti yang diharapkan, setiap panggilan ke bar(10) akan bertambah x.memb . Anda tidak dapat mengharapkan x hanya merujuk ke objek yang sama dengan variabel age ! Setelah beberapa panggilan ke bar age.memb akan ada 2! Tautan ini berfungsi sebagai dasar kebocoran memori dengan objek HTML.

3825
21 сент. balasan diberikan kepada Ali pada 21 September. 2008-09-21 18:16 '08 pada 6:16 sore 2008-09-21 18:16

KATA PENGANTAR: jawaban ini ditulis ketika pertanyaannya adalah:

Seperti Albert tua, ia berkata, "Jika Anda tidak dapat menjelaskan hal ini kepada seorang anak berusia enam tahun, Anda sendiri tidak memahami ini." Yah, saya mencoba menjelaskan penutupan JS ke teman 27 tahun dan gagal total.

Adakah yang bisa berpikir bahwa saya berusia 6 tahun, dan anehnya tertarik dengan masalah ini?

Saya cukup yakin bahwa saya adalah salah satu dari orang-orang yang mencoba mengambil pertanyaan awal secara harfiah. Sejak itu, pertanyaan ini telah bermutasi beberapa kali, jadi jawaban saya sekarang tampak sangat bodoh dan tidak pantas. Saya harap ide umum dari cerita ini tetap menarik.


Saya penggemar analogi dan metafora dalam menjelaskan konsep yang kompleks, jadi izinkan saya mencoba sejarah saya.

Sekali waktu:

Ada seorang putri ...

 function princess() { 

Dia hidup di dunia yang indah penuh petua>

  var adventures = []; function princeCharming() {  } var unicorn = {  }, dragons = [  ], squirrel = "Hello!";  

Tapi dia selalu harus kembali ke dunianya yang penuh kesulitan dan orang dewasa.

  return { 

Dan dia sering memberi tahu mereka tentang petua>

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

Tapi yang mereka lihat hanyalah seorang gadis kecil ...

 var littleGirl = princess(); 

... bercerita tentang sihir dan fantasi.

 littleGirl.story(); 

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

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

... sebenarnya seorang putri dengan seorang gadis kecil di dalam.

2273
24 июня '11 в 21:49 2011-06-24 21:49 jawabannya diberikan oleh Jacob Swartwood pada 24 Juni '11 di 21:49 2011-06-24 21:49

Menjawab pertanyaan ini dengan serius, kita perlu mengetahui bahwa orang yang berusia 6 tahun memiliki kemampuan kognitif, walaupun harus diakui, mereka yang tertarik dengan JavaScript tidak terlalu tipikal.

Tentang perkembangan masa kanak-kanak: dari 5 hingga 7 tahun dikatakan:

Anak Anda akan dapat mengikuti arahan dua >

Kita dapat menggunakan contoh ini untuk menjelaskan penutupan sebagai berikut:

Dapur adalah kedekatan di mana ada variabel lokal yang disebut trashBags . Di dalam dapur ada fungsi getTrashBag yang menerima satu kantong sampah dan mengembalikannya.

Kami dapat menyandikan ini dalam javascript sebagai berikut:

696
02 сент. jawabannya diberikan dlaliberte 02 sept . 2011-09-02 18:23 '11 pada 18:23 2011-09-02 18:23

Manusia jerami

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

Solusi yang cukup jelas

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

Ini sekarang akan berfungsi, tetapi menginvasi area eksternal, menambahkan variabel yang tujuan utamanya adalah untuk melacak akun. В некоторых ситуациях это было бы предпочтительнее, так как вашему внешнему приложению может потребоваться доступ к этой информации. Но в этом случае мы меняем только каждый третий клик, поэтому рекомендуется включать эту функциональность внутри обработчика событий .

Рассмотрим этот вариант

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