Penggunaan Persekitaran Leksikal Fungsi dalam JavaScript

Katakan kita mempunyai fungsi yang mengembalikan fungsi lain sebagai hasilnya:

javascriptfunction test() {
  return function() {
    
  }
}

Jika fungsi induk mempunyai sebarang pembolehubah, maka pembolehubah tersebut akan terkandung dalam persekitaran leksikal fungsi yang dikembalikan:

javascriptfunction test() {
  let num = 1; // pembolehubah fungsi induk
  
  return function() {
    // persekitaran leksikal = {num: 1}
  }
}

Tuliskan dalam kod fungsi yang dikembalikan kita console.log, yang memaparkan nilai pembolehubah num:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

Sekarang mari kita panggil fungsi induk test dan tulis hasil kerjanya ke dalam pembolehubah func:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();

Fungsi yang dikembalikan akan ditulis ke dalam pembolehubah func. Mari kita panggil fungsi kita - hasilnya ia akan memaparkan kandungan pembolehubah num:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();
func(); // akan memaparkan 1

Jika cuba memaparkan pembolehubah num di luar fungsi - ia tidak akan dapat diakses:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

console.log(num); // pembolehubah num tidak dapat diakses di sini

Seperti yang anda lihat, pembolehubah tempatan num telah terikat pada persekitaran leksikal fungsi kita dan sekarang, dengan memanggil fungsi ini di mana-mana sahaja dalam kod, kita boleh mendapatkan nilai pembolehubah num, walaupun di tempat panggilan itu sendiri pembolehubah ini tidak dapat diakses.

Sebenarnya, hasil yang serupa boleh dicapai dengan menjadikan pembolehubah num global:

javascriptfunction test() {
  return function() {
    console.log(num);
  }
}

let num = 1; // pembolehubah global
let func = test();
func(); // akan memaparkan 1

Walau bagaimanapun, terdapat perbezaan yang ketara di sini: dalam versi baru, pembolehubah num boleh diubah di luar fungsi (kerana ia global), manakala dalam versi lama - tidak.

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

let func = test();
console.log(func());

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

console.log(test()());

javascriptfunction test() {
  let num1 = 1;
  
  return function() {
    return num1 + num2;
  }
}

let num2 = 2;
let func = test();
console.log(func());

javascriptfunction test() {
  let num = 1;
  
  return function() {
    return num;
  }
}

let num = 2;
let func = test();
console.log(func());