کلوژر در جاوا اسکریپت: کاربرد آنها و آموزش به زبان ساده
یادگیری مفهوم کلوژر (Closure) در جاوا اسکریپت (JavaScript) گیج کننده به نظر می رسد زیرا درک نحوه کار آن واقعا دشوار است.
از کلوژر برخلاف سایر مفاهیم مانند توابع، متغیرها و اشیا همیشه به طور مستقیم و با دقت استفاده نمی کنید. اما در عین حال ممکنه بارها از آن استفاده کرده باشید. یادگیری درباره کلوژرها بیشتر از آنکه یادگیری یک مفهوم جدید باشد، تشخیص زمان استفاده آن است.
کلوژر در جاوا اسکریپت چیست؟
هنگامی که یک تابع مقدار یک متغیر تعریف شده خارج از آن را می خواند یا ویرایش می کند، یک کلوژر دارید.
const value = 1
function doSomething() {
let data = [1,2,3,4,5,6,7,8,9,10,11]
return data.filter(item => item % value === 0)
}
در اینجا تابع doSomething از متغیر value استفاده می کند. اما می توان item => item % value === 0 را به صورت زیر نیز نوشت:
function(item){
return item % value === 0
}
از مقدار متغیر value استفاده شده که خارج از خود تابع تعریف شده است، این یک تابع در ون تابع دیگر است که نوعی کلوژر می باشد.
یک تابع می تواند به مقادیر تعریف شده خارج از بدنه تابع دسترسی پیدا کند (مانند مثال قبل).
به عنوان مثال:
let count = 1
function counter() {
console.log(count)
}
counter() // خروجی: 1
count = 2
counter() // خروجی: 2
مقدار متغیر count در همه جای کد قابل دسترس و ویرایش است. بنابراین هر وقت تابع counter فراخوانی شود، از مقدار فعلی آن استفاده می کند.
چرا از توابع استفاده می کنیم؟
چرا از توابع در برنامه های خود استفاده می کنیم؟ مطمئناً نوشتن برنامه بدون استفاده از توابع ممکنه سخت باشد اما امکان پذیر است. پس چرا توابع را ایجاد می کنیم؟
یک قطعه کد را در نظر بگیرید که کاری خاص و منحصر به فرد انجام می دهد و از تعدادی خط تشکیل شده است.
حالا فرض کنید از این قطعه کد در قسمت های مختلف برنامه استفاده می کنید، چه کاری انجام می دهید ؟
طبیعی است که این قطعه کد را در یک مجموعه با قابلیت استفاده مجدد قرار دهیم و هر بار به جای اضافه کردن کل کد از نام این مجموعه استفاده کنیم، این مجموعه با قابلیت استفاده مجدد همان مفهوم تابع است، هر تابع نیز یک بلوک از کدهایی است که کار خاصی انجام می دهند. توابع بهترین روش برای استفاده مجدد و به اشتراک گذاری کدها در یک برنامه می باشند.
می توانید هر زمانی و به هر تعدادی از تابع استفاده کنید. با صرف نظر از چند مورد خاص با هر بار فراخوانی تابع همان قطعه کد آن از ابتدا اجرا می شود. این یک جایگزین ساده برای کدهای تکراری و پرکاربرد است.
کلوژر کجاست؟
قطعه کد زیر را در نظر بگیرید.
let count = 1
console.log(count)
}
counter() // print 1
در این قطعه کد تعریف یک متغیر، تعریف تابع و فراخوانی تابع وجود دارد که از آن در قسمت های مختلف برنامه دوباره استفاده می کنیم، بنابراین آن را در یک تابع “بسته بندی” خواهیم کرد.
function wonderfulFunction() {
let count = 1
function counter() {
console.log(count)
}
counter() // خروجی: 1
}
حالا چی داریم؟ تابع counter که از مقدار متغیر count تعریف شده خارج از تابع استفاده می کند. متغیر count که در محدوده تابع wonderfulFunction تعریف شده و در داخل تابع counter نیز قابل استفاده و در دسترس است.
یک تابع داریم که از مقداری استفاده می کند که خارج از آن تعریف شده است: یک کلوژر.
چگونه برنامه نویس شویم؟ (9 نکته برای شروع و ورود به بازار کار)
ساده است، نه؟ حالا با اجرای تابع wonderfulFunction چه اتفاقی می افتد؟ پس از اجرای تابع والد (تابع wonderfulFunction) برای متغیر count و تابع counter چه اتفاقی می افتد؟
پس از بستن و تمام شدن اجرای تابع wonderfulFunction، همه متغیرها و تابع های تعریف شده در بدنه آن “ناپدید می شوند”.
این برای همه توابع یکسان است، هر تابع محدوده ای دارد که با { شروع و با } تمام می شود. بعد از } زباله روبی یا garbage collector اتفاق می افتد، یعنی حافظه اختصاص داده شده به متغیرها و توابع داخل تابع همه آزاد می شوند و بنابراین دیگر دسترسی به آنها وجود ندارد.
حالا بیایید مثال بالا را کمی تغییر دهیم:
function wonderfulFunction() {
let count = 1
function counter() {
count++
console.log(count)
}
setInterval(counter, 2000)
}
wonderfulFunction()
در اینجا برای متغیر و تابع تعریف شده در wonderfulFunction چه اتفاقی می افتد؟
در این مثال به مرورگر می گوییم که هر 2 ثانیه یکبار counter را اجرا کند. بنابراین موتور جاوا اسکریپت باید ارجاع تابع و همچنین متغیر استفاده شده در آن را حفظ کند. حتی بعد از اینکه اجرای تابع والد wonderfulFunction تمام شود، تابع counter و مقدار متغیر count همچنان “زنده” هستند.
این “اثر” داشتن کلوژرها است و دلیلش اینه که جاوا اسکریپت از توابع تودرتو پشتیبانی می کند. به عبارت دیگر کلوژرها first class citizens هستند و می توانید از آنها مانند هر شی دیگری استفاده کنید.
نکته: یک تابع first class citizens یا تابع کلاس اول چند ویزگی دارد:
- تخصیص به عنوان مقدار یک متغیر
- ارسال به تابع به عنوان آرگومان
- مقدار برگشتی از تابع
- ذخیره در انواع ساختار های داده
- داشتن متد ها و ویژگی های خاص خودش
حتما دانلود کنید: آموزش صفر تا صد جاوااسکریپت (رایگان)
کلوژرها در جاوا اسکریپت چه کاری انجام می دهند؟
Immediately-invoked Function Expression (IIFE)
IIFE یا فراخوانی سریع توابع روشی است که در ES5 برای پیاده سازی الگوی طراحی “ماژول” خیلی استفاده می شد. ایده این است که ماژول در تابعی بسته بندی می شود که بلافاصله اجرا خواهد شد.
(function(arg1, arg2){
…
…
})(arg1, arg2)
امکان استفاده از متغیرهای private که فقط توسط خود ماژول در داخل تابع قابل استفاده می باشند را فراهم می کند.
const module = (function(){
function privateMethod () {
}
const privateValue = “something”
return {
get: privateValue,
set: function(v) { privateValue = v }
}
})()
var x = module()
x.get() // “something”
x.set(“Another value”)
x.get() // “Another Value”
x.privateValue //Error
Factory Function
factory function یا تابع کارخانه الگوی طراحی دیگری است که به خاطر کلوژرها به کار گرفته شده است. این توابع، اشیا یا توابع ایجاد می کنند، مانند تابعی که امکان ساخت اشیای کاربر را فراهم می کند.
const createUser = ({ userName, avatar }) => ({
id: createID(),
جاوا، جاوا اسکریپت رو قورت بده! بدون کلاس، سرعت 2 برابر، ماندگاری 3 برابر، پولسازی عالی با توسعه وب، ماشین لرنینگ و ... کتابخانه های پیشرفته جاوا اسکریپت و ... دانلود:
userName,
avatar,
changeUserName (userName) {
this.userName = userName;
return this;
},
changeAvatar (url) {
// execute some logic to retrieve avatar image
const newAvatar = fetchAvatarFromUrl(url)
this.avatar = newAvatar
return this
}
});
console.log(createUser({ userName: ‘Bender’, avatar: ‘bender.png’ }));
{
“id”:”17hakg9a7jas”,
“avatar”: “bender.png”,
“userName”: “Bender”,
“changeUsername”: [Function changeUsername]
“changeAvatar”: [Function changeAvatar]
}
*/c
با استفاده از این الگو می توانید یک ایده از برنامه نویسی تابعی به نام “currying” راپیاده سازی کنید.
Currying
Currying یک الگوی طراحی (و مشخصه ویژه برخی از زبان ها) است که در آن یک تابع بلافاصله ارزیابی می شود و یک تابع دومی را برگشت می دهد. این الگو امکان اجرای خصوصی سازی و ترکیب را فراهم می کند.
توابع “Currying” با استفاده از کلوژرها ایجاد می شوند؛ تعریف و بازگشت تابع داخلی کلوژر.
function multiply(a) {
return function (b) {
return function (c) {
return a * b * c
}
}
}
let mc1 = multiply(1);
let mc2 = mc1(2);
let res = mc2(3);
console.log(res);
let res2 = multiply(1)(2)(3);
console.log(res2);
این نوع توابع یک مقدار یا آرگومان را می گیرند و یک تابع دیگر را برمی گردانند که خود این تابع نیز آرگومان دریافت می کند. این یک کاربرد جزئی از آرگومان ها است یعنی یک تابع با تعداد آرگومان های بیشتر را به یک تابع با آرگومان‌های کمتر تبدیل می کند. این مثال با استفاده از ES6 به صورت زیر بازنویسی می شود:.
let multiply = (a) => (b) => (c) => {
return a * b * c;
}
let mc1 = multiply(1);
let mc2 = mc1(2);
let res = mc2(3);
console.log(res);
let res2 = multiply(1)(2)(3);
console.log(res2);
در کجا می توانیم از Curryingکاری استفاده کنیم؟ در ترکیب (composition) فرض کنید تابعی دارید که عناصر HTML را ایجاد می کند.
function createElement(element){
const el = document.createElement(element)
return function(content) {
return el.textNode = content
}
}
const bold = crearElement(‘b’)
const italic = createElement(‘i’)
const content = ‘My content’
const myElement = bold(italic(content)) // <b><i>My content</i></b>
Event Listeners
event یا رویداد کاربرد نوعی دیگر از کلوژرها در event handlers یا کنترل کننده های رویداد با استفاده از React است.
فرض کنید برای ارائه موارد موجود در مجموعه داده های خود از کتابخانه دیگری استفاده می کنید. این کتابخانه یک مولفه به نام RenderItem را ارائه می دهد که فقط ویژگی در دسترس onClick را دارد. این ویژگی هیچ پارامتری دریافت نمی کند و مقداری را بر نمی گرداند.
حالا فرض کنید در برنامه خود نیاز دارید که وقتی کاربر روی یک مورد خاصی کلیک می کند، یک پنجره هشدار با عنوان آن مورد خاص نمایش داده شود. اما رویداد onClick هیچ آرگومانی دریافت نمی کند. بنابراین برای نمایش عنوان پنجره چه کاری می توانید انجام دهید؟ کلوژرها نجات دهنده هستند!
// Closure
// with es5
function onItemClick(title) {
return function() {
alert(“Clicked ” + title)
}
}
// with es6
const onItemClick = title => () => alert(`Clcked ${title}`)
return (
<Container>
{items.map(item => {
return (
<RenderItem onClick={onItemClick(item.title)}>
<Title>{item.title}</Title>
</RenderItem>
)
})}
</Container>
)
در این مثال ساده یک تابع ایجاد کردیم که عنوان مورد خاص (کلیک شده روی آن) را دریافت می کند و تابع دیگری را برمی گرداند که شامل تعریف تابع است که RenderItem به عنوان ویژگی دریافت می کند.
نتیجه گیری
احتمالا تا الان بدون اینکه بدانید در توسعه برنامه های خود از کلوژرها استفاده کرده اید. اما آشنایی با کلوژرها و نحوه عملکرد آنها راه حل های جدیدی در توسعه برنامه ارائه می دهد.
کلوژرها یکی از مفاهیمی است که درک آن هنگام شروع کار سخت خواهد بود اما اگر آنها را هنگام استفاده تشخیص دهید و درک کنید، گزینه های بیشتری در دسترس خواهید داشت و حرفه ای تر عمل خواهید کرد.
