021-20483015

Closures در JavaScript

متغیرهای جاوا اسکریپت می توانند به محدوده محلی یا سراسری تعلق داشته باشند.
متغیرهای سراسری می توانند محلی (خصوصی) با closures  ساخته شوند.

متغیرهای سراسری

یک تابع می تواند به تمام متغیرهایی تعریف شده در داخل تابع دسترسی داشته باشد، مانند این:

متغییر سراسری
function myFunction() {
    var a = 4;
    return a * a;
}
مشاهده مثال

اما یک تابع همچنین می تواند به متغیرهایی که خارج از تابع تعریف شده دسترسی داشته باشند، مانند این:

متغییر سراسری تعریف شده خارج از تابع
var a = 4;
function myFunction() {
    return a * a;
}
مشاهده مثال

در مثال آخر یک یک متغیر سراسری است.
در یک صفحه وب، متغیرهای سراسری به شیء window تعلق دارند.
متغیرهای سراسری را می توان با استفاده از تمامی اسکریپت ها در صفحه (و در پنجره) مورد استفاده قرار داد (و تغییر داد).
در مثال اول یک متغیر محلی است.
متغیر محلی تنها می تواند در داخل تابع که در آن تعریف شده استفاده شود. این از سایر توابع و دیگر کد های اسکریپت پنهان است.
متغیرهای سراسری و محلی با همان نام متغیرهای متفاوت هستند. یک تغییر ، دیگر تغییر نمی کند.

متغیرهایی که بدون کلید واژه var ایجاد شده اند، همیشه سراسری هستند، حتی اگر آنها در داخل یک تابع ایجاد شوند.

طول عمر متغیر

متغیرهای سراسری تا زمانی که برنامه شما (صفحه وب شما) در اجرا هستند  زندگی می کنند.
متغیرهای محلی زندگی کوتاه دارند. هنگامی که تابع فراخوانی می شود، آنها ایجاد می شوند و هنگامی که تابع به پایان می رسد حذف می شود.

معضل شمارش معکوس

فرض کنید شما می خواهید از یک متغیر برای شمارش چیزی استفاده کنید و شما می خواهید این شمارنده برای تمام توابع موجود باشد.
شما می توانید یک متغیر سراسری و یک تابع برای افزایش شمارنده استفاده کنید:

معضل شمارش معکوس
// Initiate counter
var counter = 0;

// Function to increment counter
function add() {
    counter += 1;
}

// Call add() 3 times
add();
add();
add();

// The counter should now be 3 
مشاهده مثال

یک مشکل در راه حل بالا وجود دارد: هر کدی از صفحه میتواند شمارنده را بدون صدا زدن ()add تغییر دهد.

برای جلوگیری از تغییر کد دیگر، باید با استفاده از تابع ()add محلی استفاده کرد:

مثال
// Initiate counter
var counter = 0;

// Function to increment counter
function add() {
    var counter;
    counter += 1;
}

// Call add() 3 times
add();
add();
add();

//The counter should now be 3. But it is 0 
مشاهده مثال

این کار نکرد زیرا ما به جای شمارنده محلی نمایش داده می شود.
ما می توانیم شمارنده سراسری را حذف کنیم و با تابع return آن را به شمارنده محلی دسترسی یابیم:

مثال
// Function to increment counter
function add() {
    var counter;
    counter += 1;
    return counter;
}

// Call add() 3 times
add();
add();
add();

//The counter should now be 3. But it is 1. 
مشاهده مثال

 

این کار نکرد زیرا ما هر بار که تابع را نام می بریم محلی را بازنشانی می کنیم.

یک تابع داخلی جاوا اسکریپت می تواند این را حل کند.

توابع تو در تو جاوا اسکریپت

تمام توابع به دامنه سراسری دسترسی دارند.
در واقع، در جاوا اسکریپت، تمام توابع به دامنه "بالا" آنها دسترسی دارند.
جاوا اسکریپت از توابع توخالی توابع مشتق شده به دامنه "بالا" آنها دسترسی دارند.
در این مثال، تابع درونی به ()plus دارای دسترسی به متغیر ضد در تابع پدر و مادر است:

توابع تو در تو
function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();   
    return counter;
} 
مشاهده مثال

این می تواند معضل مقابله ای را حل کند، اگر بتوانیم به عملکرد ()plus از خارج برسیم.
ما همچنین باید یک راه برای اجرای counter = 0 را فقط یک بار پیدا کنیم.
ما نیاز به closure  داریم

Closures جاوا اسکریپت

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

add();
add();
add();

// the counter is now 3 
مشاهده مثال

مثال توضیح داده شده

متغیر add مقدار برگشتی یک تابع self-invoking را تعیین می کند.
تابع self-invoking تنها یک بار اجرا می شود. این شمارنده صفر را صفر می کند (0)، و عبارتی تابع را باز می گرداند.
به این ترتیب یک تابع افزوده می شود. بخش فوق العاده این است که می تواند به شمارنده در حوزه والدین دسترسی پیدا کند.
این Closures جاوا اسکریپت نامیده می شود. این باعث می شود که یک تابع دارای متغیرهای خصوصی باشد.
شمارنده توسط محدوده عملکرد ناشناس محافظت می شود و می تواند تنها با استفاده از تابع اضافه تغییر کند.

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری JavaScript

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط