Fahami dan gunakan mekanisme penutupan JavaScript_Pengetahuan asas

Komrad Einstein yang hebat pernah berkata: "Jika anda tidak dapat menerangkan sesuatu dengan jelas kepada kanak-kanak berumur 6 tahun, maka anda sendiri tidak memahaminya." Bagaimanapun, apabila saya menjelaskan penutupan kepada rakan berusia 27 tahun, saya gagal sepenuhnya.

Ini pada asalnya soalan yang dibangkitkan oleh rakan asing di Stack Overflow tentang penutupan JavaScript. Walau bagaimanapun, memandangkan soalan ini ditanya pada Stack Overflow, sudah tentu ramai pakar akan menjawabnya Beberapa jawapan memang klasik, seperti yang berikut:

Jika anda mentakrifkan fungsi dalaman dalam fungsi luaran, iaitu fungsi bersarang, maka fungsi dalaman juga boleh mengakses pembolehubah dalam fungsi luaran:

function foo(x) {
 var tmp = 3;
 function bar(y) {
 alert(x + y + (++tmp));
 }
 bar(10);
}

foo(2); // alert 16
foo(2); // alert 16
foo(2); // alert 16

Kod ini boleh dilaksanakan dengan betul dan mengembalikan hasil: 16, kerana bar boleh mengakses tmp pembolehubah fungsi luaran dan juga boleh mengakses parameter x fungsi luaran foo. Tetapi contoh di atas bukan penutup!

Untuk melaksanakan penutupan, fungsi dalaman perlu dikembalikan sebagai nilai pulangan fungsi luaran Sebelum kembali, fungsi dalaman akan mengunci semua pembolehubah dalam fungsi luaran yang telah diakses dalam memori. pembolehubah ini Ia akan berada dalam memori bar dan tidak akan dikitar semula oleh pemungut sampah, seperti berikut:

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + (++tmp));
 }
}
var bar = foo(2); // bar 现在是个闭包了
bar(10); // alert 16
bar(10); // alert 17
bar(10); // alert 18

Dalam kod di atas, apabila bar dilaksanakan buat kali pertama, hasilnya masih akan dikembalikan: 16, kerana bar masih boleh mengakses x dan tmp, walaupun bar itu tidak lagi wujud secara langsung dalam skop foo. Jadi oleh kerana tmp dikunci dalam penutupan bar, tmp akan dinaikkan setiap kali bar dilaksanakan, jadi apabila bar dilaksanakan untuk kali kedua dan ketiga, 17 dan 18 masing-masing dikembalikan.

Dalam contoh ini, x hanyalah nilai tulen Apabila foo dipanggil, nilai x akan disalin ke foo sebagai parameter.

Tetapi apabila JavaScript mengendalikan objek, ia sentiasa menggunakan rujukan Jika anda memanggil foo dengan objek sebagai parameter, maka apa yang dihantar dalam foo sebenarnya adalah rujukan kepada objek asal, jadi objek asal juga bersamaan dengan ditutup. . , seperti berikut:

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + tmp++);
 x.memb = x.memb ? x.memb + 1 : 1;
 alert(x.memb);
 }
}
var age = new Number(2);
var bar = foo(age); // bar 现在是个闭包了
bar(10); // alert 15 1
bar(10); // alert 16 2
bar(10); // alert 17 3

Seperti yang dijangkakan, setiap kali bar(10) dilaksanakan, bukan sahaja tmp dinaikkan, tetapi x.memb juga dinaikkan, kerana x dalam badan fungsi dan umur di luar fungsi merujuk kepada objek yang sama.

melalui http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

Tambahan: Melalui contoh di atas, anda seharusnya dapat memahami penutupan dengan lebih jelas. Jika anda rasa anda memahaminya, anda boleh cuba meneka hasil pelaksanaan kod berikut:

function foo(x) {
 var tmp = 3;
 return function (y) {
 alert(x + y + tmp++);
 x.memb = x.memb ? x.memb + 1 : 1;
 alert(x.memb);
 }
}
var age = new Number(2);
var bar1 = foo(age); // bar1 现在是个闭包了
bar1(10); // alert 15 1
bar1(10); // alert 16 2
bar1(10); // alert 17 3

var bar2 = foo(age); // bar2 现在也是个闭包了
bar2(10); // alert ? ?
bar2(10); // alert ? ?
bar2(10); // alert ? ?

bar1(10); // alert ? ?
bar1(10); // alert ? ?
bar1(10); // alert ? ?

Apabila digunakan dalam amalan, penutupan boleh mencipta reka bentuk yang sangat elegan, membenarkan penyesuaian pelbagai kaedah pengiraan yang ditakrifkan pada funarg. Berikut ialah contoh pengisihan tatasusunan, yang menerima fungsi keadaan isihan sebagai parameter:

[1, 2, 3].sort(function (a, b) {
 ... // 排序条件
});

Contoh yang sama ialah kaedah peta tatasusunan memetakan tatasusunan asal kepada tatasusunan baharu berdasarkan syarat yang ditakrifkan dalam fungsi:

[1, 2, 3].map(function (element) {
 return element * 2;
}); // [2, 4, 6]

Menggunakan parameter berfungsi, anda boleh melaksanakan kaedah carian dengan mudah dan menyokong syarat carian tanpa had:

someCollection.find(function (element) {
 return element.someProperty == 'searchCondition';
});

Terdapat juga fungsi aplikasi, seperti kaedah biasa untukSetiap, yang menggunakan fungsi untuk setiap elemen tatasusunan:

[1, 2, 3].forEach(function (element) {
 if (element % 2 != 0) {
  alert(element);
 }
}); // 1, 3

Dengan cara ini, kaedah memohon dan memanggil objek fungsi juga boleh digunakan sebagai fungsi aplikasi dalam pengaturcaraan berfungsi. Di sini, kami menganggapnya sebagai fungsi aplikasi - fungsi yang digunakan pada parameter (dalam penggunaannya ialah senarai parameter, dalam panggilan ia adalah parameter bebas):

(function () {
 alert([].join.call(arguments, ';')); // 1;2;3
}).apply(this, [1, 2, 3]);

Penutupan mempunyai satu lagi aplikasi yang sangat penting - panggilan tertunda:

var a = 10;
setTimeout(function () {
 alert(a); // 10, after one second
}, 1000);
还有回调函数：

//...
var x = 10;
// only for example
xmlHttpRequestObject.onreadystatechange = function () {
 // 当数据就绪的时候，才会调用;
 // 这里，不论是在哪个上下文中创建
 // 此时变量“x”的值已经存在了
 alert(x); // 10
};
//...

Anda juga boleh membuat skop pengekapan untuk menyembunyikan objek pembantu:

var foo = {};

// 初始化
(function (object) {

 var x = 10;

 object.getX = function _getX() {
  return x;
 };

})(foo);

alert(foo.getX()); // 获得闭包 "x" – 10