Berkongsi maklumat berguna: Benarkan anda mempelajari penutupan javascript dalam kemahiran minutes_javascript

Penutupan adalah konsep penting dalam JavaScript Bagi pemula, penutupan adalah konsep yang sangat abstrak, terutamanya definisi yang diberikan oleh spesifikasi ECMA Tanpa pengalaman praktikal, sukar untuk anda memahaminya. Oleh itu, artikel ini tidak akan menerangkan konsep penutupan dengan cara yang panjang, tetapi akan terus kepada maklumat praktikal supaya anda boleh belajar penutupan dalam beberapa minit!

1. Penutup - pengalaman pertama cinta

Apabila saya berhubung dengan teknologi baharu, perkara pertama yang saya lakukan ialah: cari kod demonya. Untuk pengekod, kod kadangkala boleh memahami sesuatu dengan lebih baik daripada bahasa semula jadi. Sebenarnya, penutupan ada di mana-mana Sebagai contoh, kod utama jQuery dan zepto semuanya disertakan dalam penutupan besar Jadi di bawah saya akan menulis demo penutupan yang paling mudah dan paling primitif untuk membantu anda menjana penutupan dalam otak anda >

function A(){
  function B(){
    console.log("Hello Closure!");
  }
  return B;
}
var c = A();
c();//Hello Closure!

Ini adalah penutupan paling mudah dalam sejarah. Tidak kira betapa mudahnya, ia bukan lagi penutupan.

Setelah mendapat pemahaman awal, mari kita analisa secara ringkas bagaimana ia berbeza daripada fungsi biasa, supaya kita dapat mengenali "dia" sepintas lalu di kalangan "orang ramai yang besar".

Kod di atas diterjemahkan ke dalam bahasa semula jadi seperti berikut:

• (1) mentakrifkan fungsi biasa A
• (2) Fungsi biasa B ditakrifkan dalam A
• (3) Kembalikan B dalam A (secara tepat, kembalikan rujukan kepada B dalam A)
• (4) Laksanakan A() dan tetapkan hasil pulangan A kepada pembolehubah c
• (5)Laksanakan c()

Untuk meringkaskan 5 langkah ini menjadi ayat karut:

Fungsi dalaman B fungsi A dirujuk oleh pembolehubah c di luar fungsi A

Proses semula karut ini dan ia menjadi definisi penutupan:

Apabila fungsi dalam dirujuk oleh pembolehubah di luar fungsi luarnya, penutupan terbentuk.

Jangan cuba mengingati definisi ini Tujuan memberitahu anda definisi ini adalah untuk membolehkan anda memahami bahawa 5 langkah di atas adalah untuk menghuraikan definisi penutupan.

Oleh itu, apabila anda melakukan 5 langkah di atas, anda telah pun menentukan penutupan!

Ini adalah penutupan.

2. Peranan penutup

Sebelum memahami peranan penutupan, mari kita fahami mekanisme GC dalam JavaScript: Dalam JavaScript, jika objek tidak lagi dirujuk, maka objek akan dikitar semula oleh GC, jika tidak objek akan sentiasa disimpan dalam memori .

Dalam contoh di atas, B ditakrifkan dalam A, jadi B bergantung pada A, dan pembolehubah luaran c merujuk kepada B, jadi A secara tidak langsung dirujuk oleh c. Dengan kata lain, A tidak akan dikitar semula oleh GC dan akan sentiasa Simpan dalam ingatan. Untuk membuktikan alasan kami, contoh di atas diperbaiki sedikit:

function A(){
  var count = 0;
  function B(){
    count ++;
    console.log(count);
  }
  return B;
}
var c = A();
c();// 1
c();// 2
c();// 3

kira ialah pembolehubah dalam A, dan nilainya ditukar dalam B. Setiap kali fungsi B dilaksanakan, nilai kiraan akan meningkat sebanyak 1 berdasarkan nilai asal. Oleh itu, kiraan dalam A sentiasa disimpan dalam ingatan.

Ini ialah peranan penutupan Kadangkala kita perlu mentakrifkan pembolehubah sedemikian dalam modul: kita mahu pembolehubah ini disimpan dalam ingatan tetapi tidak "mencemarkan" pembolehubah global modul ini.

3. Tulisan mewah

Kaedah penulisan di atas sebenarnya adalah kaedah penulisan yang paling mudah dan paling primitif, tetapi dalam aplikasi sebenar, tiada siapa yang melakukannya dengan cara ini, terutamanya dalam beberapa rangka kerja JS yang besar. Sebab mengapa saya memberitahu anda cara menulis ini adalah kerana lebih sedikit gangguan, lebih mudah untuk memberi tumpuan kepada satu perkara. Di bawah saya menggunakan kaedah penulisan yang biasa digunakan untuk menulis komponen demo mudah:

(function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
})(document);

Fungsi komponen ini adalah untuk memulakan bekas, kemudian menambah sub-bekas pada bekas, atau mengalih keluar bekas. Fungsi ini sangat mudah, tetapi konsep lain terlibat di sini: melaksanakan fungsi dengan segera. Fahami secara ringkas sahaja. Perkara utama ialah memahami bagaimana kaedah penulisan ini melaksanakan fungsi penutupan.

Struktur kod di atas boleh dibahagikan kepada dua bahagian: (function(){})() Bahagian merah ialah ungkapan, dan ungkapan ini sendiri ialah fungsi tanpa nama, jadi penambahan () selepas ungkapan ini bermakna Laksanakan tanpa nama ini fungsi.

Jadi proses pelaksanaan kod ini boleh diuraikan seperti berikut:

var f = function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
};
f(document);

Il semble que l'on puisse voir l'ombre de fermeture dans ce code, mais il n'y a pas de valeur de retour dans f. Il semble qu'il ne remplisse pas les conditions de fermeture :

window.jView = obj;
obj est un objet défini dans f, et une série de méthodes sont définies dans cet objet. Exécuter window.jView = obj signifie définir une variable jView dans l'objet global window et pointer cette variable vers l'objet obj, c'est-à-dire l'objet global. la variable jView fait référence à obj. La fonction dans l'objet obj fait référence à la fenêtre d'affichage variable dans f, donc la fenêtre d'affichage dans f ne sera pas recyclée par GC et sera enregistrée en mémoire, donc cette méthode d'écriture satisfait aux conditions de fermeture.

4.Résumé simple

C'est la compréhension la plus simple des fermetures.Bien sûr, les fermetures ont une compréhension plus profonde, qui est beaucoup plus complexe. Vous devez comprendre le contexte d'exécution JS (contexte d'exécution), l'objet actif (objet d'appel) et le mécanisme de fonctionnement de. portée et chaîne de portée. Mais en tant que débutant, vous n'avez pas besoin de les comprendre pour l'instant. Une fois que vous aurez une compréhension simple, vous devrez l'utiliser dans des projets réels. Lorsque vous l'utiliserez davantage, vous aurez naturellement une compréhension plus profonde des fermetures !

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.