درک آسان Closure در جاوااسکریپت

Closure  چیست؟!

function showName (firstName, lastName) {
​var nameIntro = "Your name is ";
// این تابع داخلی به متغیرهای تابع خارجی خودش دسترسی داره
​function makeFullName () {
  ​return nameIntro + firstName + lastName;
}
​
​return makeFullName ();
}
​
showName ("Majid", "Online"); // Your name is MajidOnli

$(function() {
​
​var selections = [];
$(".niners").click(function() { // this closure has access to the selections variable​
     selections.push (this.prop("name")); // آپدیت مقدار متغیر بیرونی
  });
​
});

Closureها دسترسی به متغیرهای توابع بیرونی دارند حتی بعد از return کردن تابع!

یکی از مهمترین و حساس‌ترین بخش های Closure  این مبحث هست که Closure  به متغیرهای توابع خارجی دسترسی داره حتی بعد از return شدن اون تابع! بله درست متوجه شدید حتی بعد از return  شدن. اگر بخواهیم بهتر توضیح بدیم به این معناست که وقتی شما تابعی رو تعریف میکنید و در قسمتی از برنامه اون تابع رو فراخوانی میکنید و تابع return میشه، حتی بعد از return  شدن تابع خارجی، شما بازهم میتونید به تابع داخلی دسترسی داشته باشید. با بررسی دو مثال زیر به خوبی این موضوع رو میتونید بفهمید :
 

function celebrityName(firstName) {
var nameIntro = "This celebrity is ";
    // this inner function has access to the outer function's variables, including the parameter​
    function lastName(theLastName) {
       return nameIntro + firstName + theLastName;
    }
return lastName;
}
​
​var mjName = celebrityName("Majid"); // در این قسمت تابع خارجی صدا زده میشه
​
​// The closure (lastName) is called here after the outer function has returned above​
​// the closure still has access to the outer function's variables and parameter​
mjName("Online"); // This celebrity is MajidOnline

مثال بعدی :

function makeAdder(x) {
   return function(y) { 
       return x + y; }; 
   }; 

var add5 = makeAdder(5); 
var add10 = makeAdder(10); 

console.log(add5(2)); // 7 
console.log(add10(2)); // 12

فکر کنم دو تا مثال فوق موضوع رو کامل تفهیم کرده و نیازی به توضیح بیشتر این موضوع نیست.
اگر احیانا در مورد نحوه صدا زدن تابع در دو مثال بالا مشکل دارید و متوجه نشدید بهتون توصیه میکنم قبل از ادامه مبحث این مطلب رو مطالع نمائید : " توابع و روش های فراخوانی آن ها در جاوااسکریپت "
 

Closureها مقدار بازگشتی را در متغیر اصلی تابع خارجی ذخیره می‌کنند.

function celebrityID () {
var celebrityID = 999; 

// All the inner functions have access to the outer function's variables​
   return {
      getID: function () {
          // این قسمت آخرین مقدار متغیر رو بازمیگردونه
          // در این قسمت آخرین مقدار متغیر پاس داده میشه حتی بعد از تغییر مقدار آخرین مقدار بازگردانده میشه
          return celebrityID;
      },
      setID: function (theNewID) {
         // این قسمت مقدار متغیر تابع خارجی را تغییر میده در هر زمانی که تغییری ایجاد بشه
         celebrityID = theNewID;
      }
   }
}
​
​var mjID = celebrityID (); // در این قسمت تابع خارجی صدا زده میشه
mjID.getID();     // 999​
mjID.setID(567); // مقدار متغیر خارجی تغییر داده میشه
mjID.getID();    // 567: آخرین مقدار متغیر تابع خارجی پاس داده میشه