https://virgool.io/feed/@saman.rohanizade fa 2026-06-17 07:37:14 https://files.virgool.io/upload/users/61056/avatar/SWLA9P.png?height=120&width=120 https://virgool.io/@saman.rohanizade https://virgool.io/iran-react-community/%DB%8C%D9%87-%D9%86%DA%A9%D8%AA%D9%87%DB%8C-%D8%AC%D8%A7%D9%84%D8%A8-%D8%B1%D8%A7%D8%AC%D8%B9-%D8%A8%D9%87-arrow-function%D9%87%D8%A7-%D8%AF%D8%B1-%DA%A9%D9%84%D8%A7%D8%B3-%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA%D9%87%D8%A7%DB%8C-%D8%B1%DB%8C%D8%A7%DA%A9%D8%AA-recq43fj3k37 مقدمههمه‌ی ما از arrow functionهای جاوااسکریپت استفاده می‌کنیم و میدونیم که مقدار this داخل arrow functionها برابر مقدار this بیرون از اون‌هاست (چون arrow functionها this binding انجام نمیدن)!با این حساب اگر از arrow functionها به عنوان متد یک آبجکت استفاده کنیم، مقدار this داخل این متد به خود آبجکت اشاره نمیکنه:اگر کد بالا رو اجرا کنیم، میبینیم که this به آبجکت گلوبال اشاره می‌کنه (و نه به آبجکت obj).کاملا منطقیه. نه؟اما صبر کنید. چرا وقتی از arrow functionها به عنوان فیلد یک class استفاده می‌کنیم، مقدار this به خود آبجکت‌های اون کلاس اشاره می‌کنه؟! (دقیقا برعکس رفتاری که در کد بالا دیدیم)برای مثال توی کد زیر که یه کلاس کامپوننت ری‌اکت هست، متد handleClick رو به صورت arrow function تعریف کرده‌ایم، اما مقدار this به خود آبجکت react component اشاره می‌کنه:We Need To Go Deeperبرای اینکه مقدار this داخل فیلد‌های کلاس که با arrow function تعریف می‌کنیم، به خود آبجکت کلاس اشاره کنه، دو مکانیزم مهم جاوااسکریپت یعنی Closure و This keyword با هم همکاری می‌کنند.پس قبل از هر چیز این دو مفهوم رو خیلی کوتاه بررسی می‌کنیم:This Keywordکلمه کلیدی this مثل یه پارامتر implicit هست که به هر تابع پاس داده میشه.مقدار this داخل هر تابع فقط با توجه به اینکه این تابع کجا و چطور صدا شده مشخص میشه.همینطور که می‌بینید یه تابع رو با روش‌های مختلف صدا کردیم، و هر بار با توجه به نحوه‌ی صدا شدن تابع، مقدار this تغییر کرد.به عنوان مثال وقتی یک تابع را با new صدا می‌کنیم (constructor)، یک آبجکت جدید ساخته می‌شه که this به این آبجکت جدید اشاره خواهد کرد (خط 9).از طرفی arrow functionها this ندارند. یعنی مقدار this داخل یه arrow function مثل یه متغیر معمولی تعیین می‌شه. به این صورت که انجین جاوااسکریپت اول داخل خود تابع دنبال identifierی به اسم this می‌گرده و وقتی پیداش نکرد، مقدار this توی تابع بیرونی رو پیدا میکنه (در نتیجه مقدار this داخل arrow functionها برابر مقدار this بیرون از اون‌هاست).Closureهر بار که یه تابع رو صدا می‌کنیم، متغیرهایی که توی هر تابع تعریف کرده‌ایم، داخل memory ساخته میشن (انجین جاوااسکریپت این متغیرها رو داخل ساختار داده‌ای به اسم Lexical Environment نگهداری میکنه).و طبیعتا بعد از اینکه اجرای تابع تموم شد، انجین جاوااسکریپت میتونه این lexical environment رو از memory پاک کنه. مگر اینکه...!کد زیر رو در نظر بگیرید:همینطوری که می‌بینید توی خط 7، تابع createMultiplier رو صدا می‌کنیم و خروجی این تابع (یعنی تابع inner) رو داخل متغیر double میریزیم.اما به خط 8 و 9 دقت کنید. وقتی تابع double رو اجرا می‌کنیم، اجرا شدن تابع createMultiplier تموم شده. ولی همچنان تابع inner به متغیر a که در تابع بیرونی تعریف شده دسترسی داره.در واقع انجین جاوااسکریپت متوجه شد که همچنان یه reference به تابع داخلی داریم، پس lexical environment تابع createMultiplier رو هم از memory پاک نکرد تا همچنان به متغیر a دسترسی داشته باشیم.خلاصه: به لطف closure، توابع جاوااسکریپت به متغیرهایی که در scope بیرونی خودشون تعریف شده دسترسی دارند. حتی وقتی بیرون از این scope اجرا میشن.مفهوم Closure توی بقیه‌ی زبان‌های محبوب مثل Python و Ruby و ... هم وجود داره.همکاری Closure و This در کلاس کامپوننت ری‌اکتحالا که دو مفهوم Closure و This رو مرور کردیم، بیاید برگردیم به سوال اصلی:چرا وقتی متدهای یه کلاس کامپوننت ری‌اکت رو به صورت arrow function تعریف می‌کنیم، مقدار this به خود آبجکت کلاس اشاره می‌کنه؟برای جواب دادن به این سوال، بیاید ببینیم فیلدهای کلاس، بعد از transpile شدن چه شکلی می‌شن:سمت چپ یه کلاس با دو تا فیلد و سمت راست خروجی ساده شده‌ی babel با presetهای ES2017 و stage-3همینطور که می‌بینید،‌ فیلد‌های کلاس به داخل constructor منتقل شدند. حتی فیلد handleClick که با arrow function تعریف کردیم.از این کد واضحه که متدهای کامپوننت که با arrow functionها تعریف می‌کنیم، در واقع به داخل constructor منتقل میشن.همچنین گفتیم که arrow functionها this ندارند. پس مقدار this داخل این تابع‌ها دقیقا برابر مقدار this داخل constructorها می‌شه! از طرفی میدونیم که مقدار this داخل constructorها به آبجکت جدیدی که ساخته شده اشاره میکنه.شاید بپرسید زمانی که ما متد handleClick رو صدا می‌کنیم، اجرا شدن constructor تموم شده. پس چطور همچنان arrow function به مقدار this داخل constructor دسترسی داره؟ برای فهمیدن این موضوع یه بار دیگه قسمت closure رو بخونید :)به این ترتیب هر زمانی که این arrow function رو صدا کنیم، مقدار this داخل اون به خود آبجکت ساخته شده توسط کلاس اشاره میکنه.نکته‌ی مهم دیگه اینکه وقتی متدهای یه کامپوننت رو به صورت arrow function و داخل یه فیلد کلاس تعریف می‌کنیم، در واقع داریم داخل تک تک instanceهای این کامپوننت این تابع رو تعریف می‌کنیم (یعنی برعکس متدهای معمولی که فقط داخل prototype تعریف میشن).البته به لطف انجین‌های جاوااسکریپت مدرن، احتمالا این موضوع مشکلات performanceی قابل لمسی ایجاد نمیکنه. مگر اینکه بخواهیم تعداد خیلی خیلی زیادی instance از یه کامپوننت بسازیم. سامان روحانی زاده سامان روحانی زاده Sun, 08 Dec 2019 18:53:50 +0330 https://virgool.io/@saman.rohanizade/%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87%D9%86%D9%88%DB%8C%D8%B3%DB%8C-async-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D9%82%D8%B3%D9%85%D8%AA-%D8%AF%D9%88%D9%85-ymemp4uqvq92 در قسمت قبلی با مفاهیم و اصطلاحات مرتبط با برنامه‌نویسی async آشنا شدیم و روش‌های مختلف پیاده‌سازی multitasking در نرم‌افزار را بررسی کردیم.همچنین دیدیم که در جاوااسکریپت تسک‌های مختلف به صورت نوبتی و اشتراکی از یک thread استفاده می‌کنند. به این ترتیب با اینکه انجین جاوااسکریپت در هر لحظه فقط یک تسک را پردازش می‌کند، می‌توانیم در یک بازه‌ی زمانی چندین کار انجام دهیم (cooperative concurrency).حالا در این قسمت می‌خواهیم ببینیم این مفاهیم به چه صورتی در جاوااسکریپت پیاده‌سازی شده‌اند و با مفهوم مهم Event Loop آشنا شویم:همکاری مرورگر و جاوااسکریپت!عملیات asyncی که در جاوااسکریپت استفاده می‌کنیم در واقع حاصل همکاری انجین جاوااسکریپت و محیطی است که جاوااسکریپت در آن اجرا می‌شود (مثل Node یا مرورگر):۱ - همکاری بخش‌های مختلف جاوااسکریپت و hosting environment برای انجام تسک‌های async در ادامه این مکانیزم‌ها و همکاری بین آن‌ها را بررسی می‌کنیم:Call Stackجاوااسکریپت هم مثل خیلی از زبان‌های دیگر، برای مشخص کردن اینکه در هر لحظه چه تابعی در حال اجرا است، از ساختمان داده‌ی Stack استفاده می‌کند.به این صورت که با صدا شدن هر تابع، یک frame جدید به بالای call stack اضافه می‌شود (push). و با بازگشت از هر تابع، یک frame از بالای call stack حذف می‌شود (pop) (تصویر ۱).برای مثال اجرای این کد را از نظر call stack در نظر بگیرید:با اجرای این کد ابتدا تابع foo به call stack اضافه می‌شود و thread اصلی جاوااسکریپت شروع به پردازش این تابع می‌کند.داخل تابع foo یک timeout با مقدار ۲ثانیه تعریف می‌کنیم و بلافاصله تابع bar را صدا می‌کنیم (Non-Blocking IO).سپس تابع bar به بالای call stack اضافه می‌شود و با اجرای کامل تابع bar، این تابع هم از بالای call stack حذف می‌شود.در نهایت ادامه‌ی تابع foo هم اجرا می‌شود و call stack خالی می‌شود.اما بعد از حدود ۲ثانیه، تابع callbackی که برای timeout تعریف کردیم، داخل call stack ظاهر و اجرا می‌شود (تصویر ۲)!۲- Call Stackحالا سوال اینجاست که این تابع callback از کجا وارد call stack شد؟!Task Queueوقتی از یکی از APIهای async مثل timeout استفاده می‌کنیم، در واقع عملیات مورد نظر داخل hosting environment اتفاق می‌افتد (و نه داخل انجین جاوااسکریپت).به این صورت که داخل کد یک timeout با زمان ۲ثانیه و به همراه یک callback تعریف می‌کنیم. سپس این timer داخل مرورگر (یا node) ایجاد می‌شود و کد جاوااسکریپت می‌تواند به صورت Non-Blocking به اجرا شدن ادامه دهد.اما بعد از حدود ۲ثانیه، مرورگر callback را به عنوان یک تسک، داخل لیستی به نام Task Queue قرار می‌دهد تا بعدتر این تسک‌ها داخل انجین جاوااسکریپت اجرا شوند.به این ترتیب APIهای مختلف، بعد از اتمام کارشان یک تسک به این صف از تسک‌ها اضافه می‌کنند. تا بعدتر، این تسک‌ها به نوبت داخل call stack اجرا شوند. اما چه مکانیزمی این تسک‌ها را از task queue به انجین جاوااسکریپت و call stack منتقل می‌کند؟Event Loopاحتمالا تا الان متوجه شده‌اید که Event Loop پل ارتباطی بین hosting environment و انجین جاوااسکریپت محسوب می‌شود.دیدیم که عملیات async (مثل ارسال درخواست به سرور و استفاده از تایمر) داخل hosting environment انجام می‌شوند و بعد از اتمام عملیات، یک تسک به task queue اضافه می‌کنند.پس event loop بین این تسک‌ها و انجین جاوااسکریپت ارتباط برقرار می‌کند.(جالب است بدانید که بیشتر مفاهیم مرتبط با Event Loopداخل HTML specification تعریف شده‌اند و نه ECMAScript specification!)در واقع event loop یک پروسه است که دائما اجرا می‌شود و هر بار چک می‌کند که اگر call stack خالی باشد، قدیمی‌ترین تسک داخل task queue را اجرا می‌کند (به call stack منتقل می‌کند).همچنین به هر iteration از Event Loop یک tick گفته می‌شود.Microtask Queueکد زیر را در نظر بگیرید:در این کد با استفاده از setTimeout یک تسک به انتهای task queue اضافه می‌کنیم. اما به محض اجرا شدن این تسک، دوباره با استفاده از setTimeout یک تسک دیگر به انتهای task queue اضافه می‌کنیم و این روند به صورت مداوم ادامه پیدا می‌کند.اما طبق مفاهیمی که تا اینجا یاد گرفتیم، این کد باعث freeze شدن مرورگر نمی‌شود!چرا که هر بار، مرورگر این تسک‌ها را به انتهای صف اضافه می‌کند. به این ترتیب تسک‌های دیگر (مثل رندر شدن صفحه، هندل کردن input کاربر و ...) هم فرصت اجرا شدن پیدا می‌کنند.اما گاهی می‌خواهیم این تسک‌های async، به انتهای صف اضافه نشوند و دقیقا بعد از تسکی که الان در حال اجراست، اجرا شوند. در این مواقع از Microtaskها استفاده می‌کنیم.بیشترین کاربرد microtaskها، در Promiseهای جاوااسکریپت است (که در قسمت‌های بعدی بیش‌تر بررسی می‌کنیم) :در واقع هر تسک، زمانی که در حال اجرا شدن است، می‌تواند چندین microtask ایجاد ‌کند.این microtaskها در یک صف دیگر به نام microtask queue قرار می‌گیرند. و دقیقا بعد از تمام شدن تسکی که در حال اجراست (و قبل از اجرای تسک بعدی)، همه‌ی این microtaskها به ترتیب اجرا می‌شوند. یعنی microtaskها عملیات asyncی هستند که بعد از هر تسک اجرا می‌شوند (و به انتهای صف تسک‌ها منتقل نمی‌شوند).مثل اینکه یک نفر جلوی صف نان باشد، و زمانی که در حال گرفتن نان است، یک یا چند دیگر را هم پشت خودش (یعنی جلوی بقیه) قرار دهد!طبیعتا اگر خود این افراد جدید هم این کار را تکرار کنند، به هیچ کدام از افراد دیگر داخل صف نان نمی‌رسد.این موضوع برای microtaskها هم صادق است. یعنی خود microtaskها هم می‌توانند microtaskهای جدیدی به انتهای Microtask Queue اضافه کنند (مثل یک زنجیره از promiseها).و اگر این کار به صورت مداوم اتفاق بیافتد، تسک‌های معمولی فرصت اجرا شدن پیدا نمی‌کنند و مرورگر freeze می‌شود.برای اثبات این موضوع، این کد را داخل مرورگر اجرا کنید:البته ترجیحا تا تموم شدن مقاله این کد رو اجرا نکنید. چون مرورگرتون از کار می‌افته :)به دلیل اهمیت بالای این مفهوم در پرامیس‌های ES6، مفهوم microtask queue در ECMAScript Specification هم تحت عنوان “Job Queue” تعریف شده است. و در بعضی از مقالات و ... با این اسم شناخته می‌شود.نکات تکمیلیTask Sourceمی‌دانیم که تسک‌هایی که داخل task queue قرار می‌گیرند، می‌توانند به دلایل مختلفی ایجاد شوند.مثلا تسک‌هایی که در اثر تعامل کاربر با صفحه، یا توسط timerها یا ... ایجاد می‌شوند.مرورگرهای مدرن، برای بعضی از این Task Sourceها اولویت بالاتری در نظر می‌گیرند.به عنوان مثال اگر تعداد زیادی تسک در task queue داشته باشیم و کاربر بر روی یک دکمه کلیک کند، ممکن است به دلیل اولویت پاسخگویی به درخواست کاربر، مرورگر تصمیم بگیرد که تسک مرتبط با کلیک شدن دکمه را زودتر اجرا کند.در واقع هر event loop می‌تواند بیش از یک task queue داشته باشد. یکی برای تسک‌های مرتبط با user interaction، یکی برای تسک‌های مرتبط با networking و ...به این ترتیب مرورگر می‌تواند به تسک‌هایی که از نظر performance مهم‌تر هستند اولویت بیشتری بدهد.در نتیجه تسک‌های مختلف ممکن است به ترتیب اجرا نشوند. و حتی اگر بدانیم تسک‌ها به چه ترتیبی وارد task queue می‌شوند، باز هم نمی‌توانیم مطمئن باشیم که به چه ترتیبی اجرا می‌شوند.پس باید تا جای ممکن بر روی ترتیب اجرای تسک‌های async حساب باز نکنیم!Run to Completionمی‌دانیم که جاوااسکریپت فقط بر روی یک thread اجرا می‌شود و در هر لحظه فقط یک تسک را می‌تواند پردازش کند.همچنین هر تسکی که وارد call stack می‌شود باید تا انتها اجرا شود تا تسک بعدی بتواند اجرا شود.یعنی حتی اگر پردازش یک تسک زمان زیادی هم طول بکشد نمی‌توانیم آن را pre-empt کنیم. در نتیجه تسک‌های بعدی باید صبر کنند تا این تسک تا انتها اجرا شود. به این ویژگی جاوااسکریپت run to completion گفته می‌شود.بنابراین اگر می‌خواهیم یک پردازش طولانی انجام دهیم، مثلا اگر بخواهیم روی یک آرایه‌ی خیلی طولانی map بزنیم، باید این کار را به چند تسک کوچک‌تر تبدیل کنیم و در چند مرحله انجام دهیم. یا اینکه تسک مورد نظر را به یک web worker منتقل کنیم.در واقع این مفهوم، مشابه مقایسه‌ی cooperative و pre-emptive multitasking است که در قسمت قبلی بررسی کردیم!و مفاهیمی مثل "همکاری تسک‌ها" یا "استفاده‌ی اشتراکی چند تسک از یک thread" که در قسمت قبلی بررسی کردیم را به صورت عملی دیدیم.حالا آماده‌ی بررسی بیشتر مفاهیم معروف مثل callback و promise و ... در قسمت‌های بعدی هستیم. اما قبل از آن، در قسمت بعدی نگاه کوتاهی به کارکرد Timerهای معروف جاوااسکریپت خواهیم داشت... سامان روحانی زاده سامان روحانی زاده Sat, 14 Sep 2019 19:12:53 +0430 https://virgool.io/coderlife/%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87%D9%86%D9%88%DB%8C%D8%B3%DB%8C-async-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-wp1eksdnim8s یکی از نقدهایی که معمولا به جاوااسکریپت وارد می‌شود این است که بعضی مکانیزم‌های پایه‌ای آن (مثل coercion)، ما را مجبور به یادگیری نکات و استثناهایی می‌کند که لزوما در زبان‌های دیگر قابل استفاده نیستند و بیشتر داخل خود جاوااسکریپت کاربرد دارند.اما با عمیق شدن در مفاهیم برنامه‌نویسی async در جاوااسکریپت، با دنیایی از مفاهیم و پترن‌های جذاب رو به رو می‌شویم که یادگیری آن‌ها، ما را به برنامه‌نویس بهتری تبدیل می‌کند!در این سری مقاله سعی می‌کنیم این مفاهیم مثل event loop, callback, promise و ... را عمیق‌تر یاد بگیریم. امیدوارم برای شما هم مفید باشد و اگر نکته‌ای در مطالب جا افتاده بود، در قسمت نظرات بنویسید.قبل از هر چیز بیایید با مفاهیم مرتبط با برنامه‌نویسی async آشنا شویم:Blocking/non-Blocking IOتقریبا تمام برنامه‌هایی که با جاوااسکریپت نوشته می‌شوند، به نحوی با عملیات IO، مثل فرستادن request به سرور، هندل کردن input کاربر و ... سروکار دارند.همچنین می‌دانیم که این عملیات IO، معمولا نسبت به سرعت پردازش CPU، بسیار کند هستند و به زمان بیشتری برای کامل شدن احتیاج دارند (IO Bound).دو روش کلی برای انجام دادن IO وجود دارد:Blocking IOدر این روش، وقتی یک request به سرور می‌فرستیم، (یا هر عملیات IO دیگر) اجرای برنامه متوقف می‌شود و تا زمانی که سرور به request پاسخ ندهد، threadی که کد روی آن اجرا می‌شود، block می‌شود.در بعضی زبان‌ها برای اینکه بتوانیم از blocking IO استفاده کنیم و در عین حال کل برنامه freeze نشود، می‌توانیم برای هر عملیات IO، یک thread جدید ایجاد کنیم، تا بقیه‌ی پردازش‌های برنامه در یک thread مجزا ادامه پیدا کند. اما با توجه به اینکه جاوااسکریپت فقط بر روی یک thread اجرا می‌شود، امکان استفاده از این روش داخل جاوااسکریپت را نداریم.در واقع استفاده از blocking IO در یک سیستم single-thread (مثل برنامه‌های جاوااسکریپتی) فاجعه به بار می‌آورد! چرا که با هر عملیات IO، کل برنامه به کلی متوقف می‌شود و کاربر نمی‌تواند با برنامه تعامل داشته باشد، تا زمانی که عملیات IO تکمیل شود.Blocking IONon-Blocking IOدر این روش، بعد از فرستادن request به سرور، صبر نمی‌کنیم تا request تکمیل شود و CPU بلافاصله می‌تواند بقیه پردازش‌های برنامه را انجام دهد.Non Blocking IOهمانطور که می‌بینید، در این کد با ارسال request به سرور، بلافاصله اجرای برنامه را ادامه می‌دهیم و هر وقت نتیجه از سمت سرور برگشت، callbackی که تعریف کرده‌ایم صدا می‌شود (در مقاله‌های بعدی معایب callbackها را بررسی خواهیم کرد!).به این ترتیب، یک قسمت از برنامه الان اجرا می‌شود و بقیه قسمت‌های برنامه، بعدتر و وقتی request از سرور برمی‌گردد اجرا می‌شود.به این عملیات که الان اجرا نمی‌شوند و اجرای برنامه را از نظر زمانی تقسیم می‌کنند، asynchronous می‌گوییم.(دقت کنید که non-blocking IO فقط یک مثال از asynchrony است. و برای انجام کارهای دیگر، مثل نمایش انیمیشن‌ها و ... هم از برنامه نویسی async استفاده می‌کنیم.)Concurrency در مقابل parallelism!اما چطور جاوااسکریپت با وجود single-thread بودن می‌تواند “هم‌زمان” با ارسال request و ... کارهای دیگر را هم انجام دهد؟ در واقع اگر به برنامه‌هایی که با جاوااسکریپت نوشته می‌شوند دقت کنید، به نظر می‌رسد که چند کار مختلف به صورت هم‌زمان انجام می‌شود. به عنوان مثال هم‌زمان با scroll شدن صفحه توسط کاربر، یک انیمیشن اجرا می‌شود و ...چطور همه‌ی این کارها فقط بر روی یک thread انجام می‌شوند؟!برای جواب به این سوال باید با دو مفهوم مهم concurrency و parallelism آشنا باشیم.Parallelismدر parallelism، همانطور که از اسم آن مشخص است، چند تسک، به صورت موازی و دقیقا در یک لحظه پردازش می‌شوند. برای پردازش parallel، معمولا از چند thread (یا process) برای اجرای عملیات مختلف استفاده می‌شود. بنابراین با توجه به single-thread بودن جاوااسکریپت، عملا نمی‌توانیم دو کار را دقیقا در یک لحظه انجام دهیم.Concurrencyهمچنین Concurrency به این معنی است که چند تسک مختلف در یک بازه‌ی زمانی انجام شوند (اما نه لزوما هم‌زمان و در یک لحظه). در واقع concurrency مفهوم کلی‌تری نسبت به parallelism است و می‌توانیم بدون پردازش parallel هم، concurrency داشته باشیم.به عنوان مثال فرض کنید یک پروژه داریم که بخش‌های مختلفی (مثلا فرانت-اند و بک-اند) دارد.اگر چند تیم بر روی بخش‌های مختلف این پروژه کار کنند، بخش‌های مختلف پروژه به صورت هم‌زمان و parallel پیش‌رفت می‌کند.اما اگر فقط یک نفر روی این پروژه کار کند، در یک لحظه، فقط بر روی یک بخش از پروژه کار می‌شود و بخش‌های مختلف به صورت هم‌زمان پیش‌رفت نمی‌کنند. اما هم‌چنان پروژه به صورت concurrent انجام می‌شود. چرا که بخش‌های مختلف پروژه در یک بازه‌ی زمانی با هم پیش‌رفت می‌کنند. هر چند دقیقا در یک لحظه، بر روی همه‌ی بخش‌ها کار نمی‌شود.Parallel Concurrency vs Non-Parallel Concurrencyدر نتیجه با اینکه جاوااسکریپت به صورت parallel اجرا نمی‌شود، اما می‌توانیم بیش از یک کار را در یک بازه‌ی زمانی به صورت concurrent انجام دهیم.به این‌صورت که انجین جاوااسکریپت در هر لحظه فقط یک کار را انجام می‌دهد و به عنوان مثال اگر در طول پردازش responseی که از سرور برگشته است، کاربر روی یک دکمه کلیک کند، باید تا پایان پردازش response صبر کنیم تا کلیک کاربر پردازش شود. به این ترتیب در یک بازه‌ی زمانی چند کار مختلف پردازش می‌شوند.Multitaskingحالا که متوجه شدیم فقط با استفاده از یک thread هم می‌توانیم بیش از یک کار را در یک بازه‌ی زمانی انجام دهیم، بیایید نگاهی به دو روش کلی multitasking در نرم‌افزار داشته باشیم. و در نهایت ببینیم کارکرد جاوااسکریپت به کدام یکی از این دو روش نزدیک‌تر است.Preemptive Multitaskingدر این روش معمولا برای پردازش تسک‌های مختلف، چند thread (یا process) ایجاد می‌شود و اگر اجرای یک thread بیش از حد زمان بگیرد، سیستم عامل می‌تواند اجرای آن را متوقف کند.در کل این threadها توسط سیستم عامل مدیریت می‌شوند و حتی ممکن است به صورت موازی (parallel) اجرا شوند.Cooperative Multitaskingدر این روش، کل برنامه از دید سیستم عامل فقط بر روی یک thread اجرا می‌شود.اما تسک‌های مختلف داخل خود برنامه مدیریت می‌شوند. به این صورت که در هر لحظه یک تسک اجرا می‌شود و مقداری پردازش روی CPU انجام می‌دهد. سپس CPU را آزاد می‌کند (اصطلاحا yield می‌کند) تا تسک بعدی اجرا شود. به این ترتیب تسک‌های مختلف یک thread را به صورت اشتراکی استفاده می‌کنند.به این روش cooperative گفته می‌شود، چون برای کارکرد درست کل سیستم، همه‌ی تسک‌ها باید با هم هم‌کاری کنند. اگر یک تسک پردازش طولانی روی CPU انجام دهد، کل برنامه کند می‌شود.در نتیجه در این روش مدیریت تسک‌های مختلف بر عهده‌ی برنامه‌نویس است.احتمالا متوجه شدید که عملکرد جاوااسکریپت به شدت شبیه به مدل cooperative multitasking است!یعنی در جاوااسکریپت هم، تسک‌های concurrent به صورت اشتراکی از یک thread استفاده می‌کنند و ما به عنوان برنامه‌نویس باید این تسک‌ها را به درستی مدیریت کنیم. اگر یک تابع، پردازش طولانی روی CPU انجام می‌دهد، باید آن را به چند تسک کوچک‌تر تقسیم کنیم تا کل برنامه کند نشود و ...تقریبا تمام مطالب بعدی این سری مقاله در راستای مدیریت مناسب این تسک‌های concurrent از نظر خوانایی کد، عمل‌کرد و ... خواهد بود.خلاصهدر این مقاله با مفاهیم مرتبط با برنامه‌نویسی async مثل concurrency و انواع multitasking آشنا شدیم و نحوه‌ی مدیریت تسک‌های asynchronous در جاوااسکریپت را دیدیم.اما از هر جنبه که کارکرد جاوااسکریپت را بررسی کردیم، به یک نتیجه‌ی واحد رسیدیم: “جاوااسکریپت چندین تسک را در یک بازه‌ی زمانی بر روی یک thread پردازش می‌کند. و در هر لحظه فقط یک تسک را انجام می‌دهد.”در قسمت بعدی با Event Loop آشنا می‌شویم و نمود عملی‌تر این مفاهیم را می‌بینیم. سامان روحانی زاده سامان روحانی زاده Thu, 01 Aug 2019 18:47:08 +0430