Closure در جاوا اسکریپت چیست؟ + کاربردها و مثال‌های عملی

Closure در جاوا اسکریپت چیست؟ + کاربردها و مثال‌های عملی
پشتیبان آکادمی آی تی
پشتیبان آکادمی آی تی
dots

Closure در جاوا اسکریپت چیست؟ + کاربردها و مثال‌های عملی

زمان مورد نیاز برای مطالعه 5 دقیقه

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

دپارتمان ‌ها: آموزش برنامه نویسی
1403/11/23
253 بازدید

تعریف Closureتعریف Closure در جاوا اسکریپت

Closure به توانایی یک تابع برای دسترسی به متغیرهای محیطی‌اش، حتی پس از اتمام اجرای تابع بیرونی، گفته می‌شود.به عبارت ساده‌تر، Closure زمانی ایجاد می‌شود که یک تابع داخلی به متغیرهای تابع بیرونی‌اش دسترسی داشته باشد.
این مفهوم به شما امکان می‌دهد تا داده‌ها و رفتارها را در جاوا اسکریپت به صورت کپسوله‌شده و خصوصی مدیریت کنید.  

 

 

 

برای درک بهتر، به مثال زیر توجه کنید:  

javascript
function outerFunction() {
    let outerVariable = 'I am outside!';

    function innerFunction() {
        console.log(outerVariable); // دسترسی به متغیر تابع بیرونی
    }

    return innerFunction;
}

const closureExample = outerFunction();
closureExample(); // خروجی: 'I am outside!'

در این مثال، innerFunction به outerVariable دسترسی دارد، حتی پس از اینکه outerFunction اجرا شده و به پایان رسیده است. این رفتار، Closure نامیده می‌شود.  

چگونه Closure کار می‌کند؟

برای درک نحوه عملکرد Closure، باید با مفهوم Scope (حوزه دسترسی) در جاوا اسکریپت آشنا باشید. هر تابع در جاوا اسکریپت یک Scope ایجاد می‌کند که تعیین می‌کند چه متغیرهایی در دسترس هستند. وقتی یک تابع داخلی به متغیرهای تابع بیرونی‌اش دسترسی پیدا می‌کند، موتور جاوا اسکریپت یک ارجاع به آن متغیرها را حفظ می‌کند، حتی اگر تابع بیرونی اجرا شده و از حافظه پاک شده باشد.  

این مکانیزم به شما امکان می‌دهد تا داده‌ها را به صورت خصوصی نگه دارید و از تغییرات ناخواسته جلوگیری کنید.  

 کاربردهای Closure در برنامه‌نویسی

Closure یکی از مفاهیم قدرتمند جاوا اسکریپت است که کاربردهای فراوانی دارد. در ادامه به برخی از مهم‌ترین کاربردهای آن اشاره می‌کنیم:  

۱. ایجاد توابع خصوصی

با استفاده از Closure، می‌توانید توابع و متغیرهایی ایجاد کنید که فقط در داخل یک Scope خاص قابل دسترسی باشند. این ویژگی به شما کمک می‌کند تا از تغییرات ناخواسته در داده‌ها جلوگیری کنید.  

javascript
function createCounter() {
    let count = 0; // متغیر خصوصی

    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // خروجی: 1
console.log(counter()); // خروجی: 2

در این مثال، متغیر count فقط در داخل createCounter قابل دسترسی است و از بیرون قابل تغییر نیست.  

۲. مدیریت State

Closure در مدیریت State (وضعیت) در برنامه‌های جاوا اسکریپت بسیار مفید است. به عنوان مثال، در کتابخانه‌هایی مانند React، از Closure برای مدیریت State کامپوننت‌ها استفاده می‌شود.  

۳. ایجاد توابع Factory

توابع Factory توابعی هستند که اشیاء یا توابع جدیدی را ایجاد می‌کنند. با استفاده از Closure، می‌توانید توابع Factory ایجاد کنید که رفتارهای خاصی داشته باشند.  

javascript
function createGreeting(greeting) {
    return function(name) {
        return `${greeting}, ${name}!`;
    };
}

const sayHello = createGreeting('Hello');
console.log(sayHello('Ali')); // خروجی: 'Hello, Ali!'

 

Closure در جاوا اسکریپت چیست؟


مثال‌های عملی از Closure

برای درک بهتر Closure، به چند مثال عملی نگاه می‌کنیم:  

مثال ۱: ایجاد یک ماشین حساب ساده

javascript
function createCalculator() {
    let result = 0;

    return {
        add: function(x) {
            result += x;
        },
        subtract: function(x) {
            result -= x;
        },
        getResult: function() {
            return result;
        }
    };
}

const calculator = createCalculator();
calculator.add(10);
calculator.subtract(4);
console.log(calculator.getResult()); // خروجی: 6

مثال ۲: استفاده از Closure در Event Handling

javascript
function setupButton() {
    let clickCount = 0;

    document.getElementById('myButton').addEventListener('click', function() {
        clickCount++;
        console.log(`Button clicked ${clickCount} times`);
    });
}

setupButton();

در این مثال، Closure به ما امکان می‌دهد تا تعداد کلیک‌ها را به صورت خصوصی نگه داریم و هر بار که دکمه کلیک می‌شود، آن را افزایش دهیم.  

 

تفاوت Closure و Scope در جاوا اسکریپت

- Scope: محدوده‌ای است که در آن متغیرها قابل دسترسی هستند. Scope می‌تواند Global (سراسری) یا Local (محلی) باشد.  
- Closure: زمانی ایجاد می‌شود که یک تابع داخلی به متغیرهای تابع بیرونی‌اش دسترسی داشته باشد، حتی پس از اتمام اجرای تابع بیرونی.  

به عبارت دیگر، Closure یک رفتار خاص است که در نتیجه تعامل بین Scopeها ایجاد می‌شود.  

نکات مهم در استفاده از Closure  

۱. مصرف حافظه: Closureها می‌توانند باعث افزایش مصرف حافظه شوند، زیرا موتور جاوا اسکریپت باید متغیرهای محیطی را در حافظه نگه دارد.  
۲. استفاده بهینه: از Closureها در جاهایی استفاده کنید که واقعاً به آن‌ها نیاز دارید تا از پیچیدگی‌های غیرضروری جلوگیری کنید.  
۳. اشکال‌زدایی: Debugging کدهایی که از Closure استفاده می‌کنند می‌تواند چالش‌برانگیز باشد، بنابراین مطمئن شوید که کد شما به خوبی ساختار یافته است.  

نتیجه‌گیری

Closure یکی از مفاهیم قدرتمند و ضروری در جاوا اسکریپت است که به شما امکان می‌دهد داده‌ها و رفتارها را به صورت کپسوله‌شده و خصوصی مدیریت کنید. با درک صحیح این مفهوم، می‌توانید کدهای تمیزتر، امن‌تر و کارآمدتری بنویسید.  
اگر می‌خواهید مهارت‌های جاوا اسکریپت خود را ارتقا دهید، تمرین و استفاده از Closure در پروژه‌های واقعی را فراموش نکنید. برای یادگیری بیشتر، می‌توانید به منابعی مانند MDN Web Docs یا کتاب‌های آموزشی معتبر مراجعه کنید.

 

سوالات متداول

۱. تفاوت Closure و Scope در جاوا اسکریپت چیست؟

  • Scope: محدوده‌ای است که در آن متغیرها قابل دسترسی هستند (Global یا Local).

  • Closure: یک رفتار خاص است که زمانی رخ می‌دهد که یک تابع داخلی به متغیرهای تابع بیرونی‌اش دسترسی داشته باشد، حتی پس از اتمام اجرای تابع بیرونی.

۲. آیا Closureها در React استفاده می‌شوند؟

بله، Closureها در React برای مدیریت State و ایجاد توابع خصوصی در کامپوننت‌ها استفاده می‌شوند. به عنوان مثال، در هوک‌هایی مانند useState و useEffect، Closure ها نقش مهمی ایفا می‌کنند.

۳. چگونه می‌توان از Closure برای حل مشکل Loop و Event Listener استفاده کرد؟

یکی از مشکلات رایج در جاوا اسکریپت، استفاده از حلقه‌ها برای اضافه کردن Event Listenerها است. با استفاده از Closure، می‌توانید این مشکل را حل کنید. به مثال زیر توجه کنید:

for (var i = 1; i <= 3; i++) {
    document.getElementById(`button${i}`).addEventListener('click', (function(i) {
        return function() {
            console.log(`Button ${i} clicked`);
        };
    })(i));
}

 در این مثال، Closure به ما کمک می‌کند تا مقدار صحیح i را در هر Event Listener حفظ کنیم.

۴. آیا Closureها در برنامه‌نویسی Asynchronous کاربرد دارند؟

بله، Closureها در برنامه‌نویسی Asynchronous (ناهمزمان) نیز کاربرد دارند. به عنوان مثال، در استفاده از setTimeout یا Promise، Closureها می‌توانند به شما کمک کنند تا داده‌ها را به صورت خصوصی نگه دارید.

۵. چگونه می‌توان از Closure برای پیاده‌سازی الگوهای طراحی استفاده کرد؟

Closureها در پیاده‌سازی الگوهای طراحی مانند Module Pattern و Singleton بسیار مفید هستند. به مثال زیر توجه کنید:

const Module = (function() {
    let privateVariable = 'I am private';

    function privateMethod() {
        console.log(privateVariable);
    }

    return {
        publicMethod: function() {
            privateMethod();
        }
    };
})();

Module.publicMethod(); // خروجی: 'I am private'

 

در این مثال، Closure به ما امکان می‌دهد تا متغیرها و توابع خصوصی ایجاد کنیم.