Bagaimanakah penutupan JavaScript berfungsi?

Question

Bagaimana untuk menerangkan penutupan kepada seseorang yang memahami konsep penutupan JavaScript (seperti fungsi, pembolehubah, dll.), tetapi tidak memahami penutupan itu sendiri?

Saya telah melihat contoh Skim yang diberikan di Wikipedia, tetapi malangnya ia tidak membantu.

Answer 1

Dalam JavaScript, setiap fungsi mengekalkan pautan ke persekitaran leksikal luarannya. Persekitaran leksikal ialah peta semua nama (seperti pembolehubah, parameter) dan nilainya dalam skop.

Jadi, apabila anda melihat kata kunci function, kod di dalam fungsi itu boleh mengakses pembolehubah yang diisytiharkan di luar fungsi.

function foo(x) {
  var tmp = 3;

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

  bar(10);
}

foo(2);

Ini akan menghasilkan persekitaran leksikal 16，因为函数 bar 闭包了参数 x 和变量 tmp，它们都存在于外部函数 foo.

Persekitaran leksikal fungsi

bar 与其与函数 foo dikaitkan bersama untuk membentuk penutup.

Fungsi

tidak perlu kembali untuk membuat penutupan. Dengan pengisytiharan sahaja, setiap fungsi melampirkan persekitaran leksikalnya, membentuk penutup.

function foo(x) {
  var tmp = 3;

  return function (y) {
    console.log(x + y + (++tmp)); // 也将输出 16
  }
}

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

Fungsi di atas juga akan mengeluarkan 16 kerana bar 中的代码仍然可以引用参数 x 和变量 tmp, walaupun ia tidak lagi secara langsung dalam skop.

Namun, sejak tmp 仍然存在于 bar 的闭包中，它可以被递增。每次调用 bar , semuanya akan bertambah.

Contoh penutupan yang paling mudah ialah:

var a = 10;

function test() {
  console.log(a); // 将输出 10
  console.log(b); // 将输出 6
}
var b = 6;
test();

Apabila fungsi JavaScript dipanggil, konteks pelaksanaan baharu dicipta ec。除了函数参数和目标对象之外，该执行上下文还接收到调用执行上下文的词法环境的链接，这意味着在外部词法环境中声明的变量（在上面的示例中，即 a 和 b）可以从 ec dan diakses di dalamnya.

Setiap fungsi mencipta penutupan kerana setiap fungsi mempunyai pautan ke persekitaran leksikal luarannya.

Sila ambil perhatian bahawa apa yang kelihatan dalam penutupan ialah pembolehubah itu sendiri, bukan salinannya.

Answer 2

Penutupan ialah gandingan:

1. Satu fungsi dan
2. Rujukan kepada skop luaran (persekitaran leksikal) fungsi

Persekitaran leksikal adalah sebahagian daripada setiap konteks pelaksanaan (bingkai tindanan) dan merupakan pemetaan antara pengecam (iaitu nama pembolehubah tempatan) dan nilai.

Setiap fungsi dalam JavaScript mengekalkan rujukan kepada persekitaran leksikal luarannya. Rujukan ini digunakan untuk mengkonfigurasi konteks pelaksanaan yang dibuat apabila fungsi dipanggil. Rujukan ini membolehkan kod di dalam fungsi untuk "melihat" pembolehubah yang diisytiharkan di luar fungsi, tanpa mengira bila dan di mana fungsi dipanggil.

Jika fungsi dipanggil daripada fungsi lain, satu siri rujukan kepada persekitaran leksikal luaran dicipta. Rantaian ini dipanggil rantai skop.

Dalam kod di bawah, inner与调用foo时创建的执行上下文的词法环境形成了闭包，闭包包含变量secret:

function foo() {
  const secret = Math.trunc(Math.random() * 100)
  return function inner() {
    console.log(`The secret number is ${secret}.`)
  }
}
const f = foo() // 无法直接从外部访问`secret`
f() // 检索`secret`的唯一方法是调用`f`