JavaScript ปิดท้าย

JavaScript แปลงเป็น本地或全局範圍。

全局變量能夠通過บงการปิดหน้าจอ實現局部（私有）。

全局變量

函數能夠訪問函數內部定義的所有變量，比如：

ตัวอย่าง

function myFunction() {
    var a = 4;
    return a * a;
}

ลองทดลองด้วยตัวเอง

但是函數也能訪問函數外部定義的變量，比如：

ตัวอย่าง

var a = 4;
function myFunction() {
    return a * a;
}

ลองทดลองด้วยตัวเอง

在最後這個例子中，a 是全局變量。

在網頁中，全局變量屬於 window 對象。

全局變量能夠被頁面中（以及窗口中）的所有腳本使用和修改。

在第一個例子中，a 是局部變量。

局部變量只能用於其被定義的函數內部。對於其他函數和腳本代碼來說它是不可見的。

擁有相同名稱的全局變量和局部變量是不同的變量。修改一個，不會改變其他。

不通過關鍵詞 var 創建的變量總是全局的，即使它們在函數中創建。

變量的生命周期

全局變量活得和您的應用程序（窗口、網頁）一樣久。

局部變量活得不長。它們在函數調用時創建，在函數完成後被刪除。

一個計數器的困境

假設您想使用變量來計數，並且您希望此計數器可用於所有函數。

您可以使用全局變量和函數來遞增計數器：

ตัวอย่าง

// 初始化計數器
var counter = 0;
// 遞增計數器的函數
function add() {
  counter += 1;
}
// 調用三次 add()
add();
add();
add();
// 此時計數器應該是 3

ลองทดลองด้วยตัวเอง

上述解決方案有一個問題：頁面上的任何代碼都可以更改計數器，而無需調用 add()。

對於 add() 函數，計數器應該是局部的，以防止其他代碼更改它：

ตัวอย่าง

// 初始化計數器
var counter = 0;
// 遞增計數器的函數
function add() {
  var counter = 0; 
  counter += 1;
}
// 調用三次 add()
add();
add();
add();
// 此時計數器應該是 3。但它是 0。

ลองทดลองด้วยตัวเอง

它沒有用，因為我們顯示全局計數器而不是本地計數器。

通過讓函數返回它，我們可以刪除全局計數器並訪問本地計數器：

ตัวอย่าง

// 遞增計數器的函數
function add() {
  var counter = 0; 
  counter += 1;
  return counter;
}
// 調用三次 add()
add();
add();
add();
// 此時計數器應該是 3。但它是 1。

ลองทดลองด้วยตัวเอง

它沒有用，因為我們每次調用函數時都會重置本地計數器。

JavaScript 內部函數可以解決這個問題。

JavaScript 嵌套函數

所有函數都有權訪問全局範圍。

事實上，在 JavaScript 中，所有函數都有權訪問它們“上面”的範圍。

JavaScript 支援嵌套函數。嵌套函數可以訪問其上的範圍。

在本例中，內部函數 plus() 可以訪問父函數中的 counter 計數器變量：

ตัวอย่าง

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();     
    return counter; 
}

ลองทดลองด้วยตัวเอง

ดังนั้นจึงสามารถแก้ปัญหาปัญหานับเลขที่เป็นความยากโดยมีสิทธิ์เข้าถึงนอกจากนี้ plus() ฟังก์ชัน

เรายังต้องหาฟังก์ชันที่ทำงานเพียงครั้งเดียว counter = 0 ของวิธี

เราต้องการบงการปิดหน้าจอ (closure)

JavaScript ปิดท้าย

จำจักฟังก์ชันที่เรียกตัวเองหรือไม่? ฟังก์ชันนี้จะทำอะไรบ้าง?

ตัวอย่าง

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// ตัวแปรนี้เป็น 3

ลองทดลองด้วยตัวเอง

ตัวอย่างการชี้แจง

ตัวแปร add การแสดงของมันเป็นฟังก์ชันแสดงที่ยังไม่มีชื่อ

ฟังก์ชันที่เรียกตัวเองนี้เรียกเดียว มันตั้งค่าตัวแปรนับเลขเป็น 0 (0) และกลับคืนฟังก์ชันแสดงที่ยังไม่มีชื่อ

แล้ว add ก็กลายเป็นฟังก์ชัน ส่วนที่น่าสนใจที่สุดคือมันสามารถเข้าถึงตัวแปรนับเลขที่อยู่ในช่วงปฏิบัติของพ่อเพื่อน

นี่เรียกว่า JavaScript บงการปิดหน้าจอเป็นสิ่งที่ทำให้ฟังก์ชันมีส่วนตัว“ตัวแปร”เป็นไปได้

ตัวแปรนี้ถูกปกป้องโดยช่วงปฏิบัติของฟังก์ชันที่ไม่มีชื่อ และสามารถใช้ฟังก์ชัน add เพื่อเปลี่ยนแปลงได้เท่านั้น

บงการปิดหน้าจอหมายถึงฟังก์ชันที่มีสิทธิ์เข้าถึงช่วงปฏิบัติที่เป็นเจ้าของของพ่อเพื่อน แม้ว่าจะมีการปิดฟังก์ชันพ่อเพื่อนเสร็จแล้ว