در دنیای پویای جاوا اسکریپت، درک پیچیدگی‌های محدوده، بسته شدن و بالابردن برای تسلط بر زبان و ایجاد برنامه‌های کاربردی قوی ضروری است.

این مفاهیم، ​​اگرچه اغلب اشتباه درک می شوند، اما نقش مهمی در تعیین نحوه رفتار متغیرها و توابع در کد دارند.

دامنه دسترسی به متغیرها را دیکته می کند، بسته شدن الگوهای برنامه نویسی قدرتمند را فعال می کند و اگر به درستی درک نشود، بالا بردن می تواند منجر به نتایج غیرمنتظره شود.

در این راهنمای جامع، ما عمیقاً در قلمروهای محدوده، بسته شدن و ارتقاء در جاوا اسکریپت کاوش خواهیم کرد، پیچیدگی‌های آنها را آشکار می‌کنیم، مثال‌های عملی ارائه می‌کنیم و بهترین روش‌ها را برای توانمندسازی شما در سفر خود به عنوان یک توسعه‌دهنده جاوا اسکریپت ارائه می‌کنیم.

پس ، با شروع این کاوش روشنگرانه سه گانه پویا جاوا اسکریپت، دست و پنجه نرم کنید.

فهرست مطالب

پیش نیازها

دامنه در جاوا اسکریپت

انواع دامنه در جاوا اسکریپت

بسته شدن

بالا بردن

بالابر متغیر

عملکرد بالابر

بالا بردن کلاس

بالابر وارداتی

بهترین شیوه ها

نتیجه

پیش نیازها

برای دنبال کردن این مقاله، باید درک اولیه ای از زبان جاوا اسکریپت داشته باشید.

دامنه در جاوا اسکریپت

در برنامه نویسی، scope به زمینه ای اطلاق می شود که در آن متغیرها و توابع اعلام شده و به آنها دسترسی پیدا می کنند.

Scope قابلیت مشاهده و چرخه عمر این متغیرها و عملکردها را در یک برنامه تعیین می کند و اطمینان حاصل می کند که آنها در زمینه مورد نظر استفاده می شوند.

در جاوا اسکریپت، scope از مفهوم دامنه واژگانی پیروی می کند. در گستره واژگانی، قابلیت مشاهده متغیرها و توابع بر اساس زمینه ای که متغیرها و توابع در آن تعریف می شوند، تعیین می شود.

انواع دامنه در جاوا اسکریپت

در جاوا اسکریپت سه نوع دامنه اصلی وجود دارد:

گستره جهانی

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

 let globalScopeVariable = "I'm in the global scope"; function logScope(){ console.log(globalScopeVariable) } logScope(); // I'm in the global scope for(let i=0; i<3; i++){ console.log(globalScopeVariable); } // I'm in the global scope // I'm in the global scope // I'm in the global scope if(true){ console.log(globalScopeVariable); } // I'm in the global scope console.log(globalScopeVariable); // "I'm in the global scope"

در کد بالا، globalScopeVariable توسط هر بخشی از برنامه قابل دسترسی است، خواه در داخل یک تابع، حلقه، دستورات شرطی یا در خود دامنه جهانی باشد.

شما می توانید وسعت جهانی را به عنوان سوپرمارکت محلی خود در نظر بگیرید - همه به آن دسترسی دارند.

توجه : هنگام ساخت برنامه های کاربردی در دنیای واقعی، توصیه می شود تعداد متغیرهایی را که دارای دامنه جهانی هستند به حداقل برسانید. این برای کاهش غیرقابل پیش بینی بودن کد شما است که می تواند منجر به باگ شود.

محدوده عملکرد

وقتی متغیرها و توابع در داخل توابع اعلان می شوند، متغیرها و توابع در محدوده تابع هستند.

این متغیرها و توابع فقط در تابعی که در آن اعلام شده اند قابل دسترسی هستند.

به متغیرهای اعلام شده در محدوده تابع گفته می شود که دارای محدوده تابع هستند.

 function doubleNum(){ let num = 23; console.log(num * 2) } doubleNum(); // 46 console.log(num); // Reference error: "num" is not defined

در کد بالا، logging num منجر به Reference error می شود زیرا num فقط در تابع doubleNum قابل دسترسی است.

شما می توانید محدوده عملکرد را به عنوان یک پیام ارسال شده به یک چت گروهی در نظر بگیرید - فقط شرکت کنندگان گروه می توانند پیام را مشاهده کرده و با آن تعامل داشته باشند.

محدوده را مسدود کنید

پرانتزهای مجعد، {} ، یک بلوک کد را نشان می دهند. متغیرهای اعلام شده در این بریس‌های فرفری را نمی‌توان در خارج از بریس‌های فرفری مشاهده کرد.

 { let blockScopedVariable = "I'm block-scoped"; console.log(blockScopedVariable); // I'm block-scoped } console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined

در کد بالا، blockScopedVariable فقط در داخل بریس‌های فرفری قابل دسترسی است، همانطور که در داخل بریس‌های فرفری تعریف شده بود.

اگرچه محدوده بلوک با دامنه عملکرد مشابه به نظر می رسد، تفاوت کمی وجود دارد.

تفاوت کلیدی بین محدوده بلوک و محدوده تابع در این است که دامنه تابع به متغیرهای تعریف شده در توابع اشاره دارد، در حالی که محدوده بلوک به متغیرهایی اشاره دارد که در یک جفت مهاربند مجعد تعریف شده اند.

می توان بيان کرد که محدوده تابع زیر مجموعه ای از محدوده بلوک است.

توجه : متغیرهای اعلام شده در یک تابع با استفاده از var قابل دسترسی خارج از آن تابع نیستند.

 function logScope(){ var x = 4; } console.log(x); // ReferenceError: x is not defined

بسته شدن

بسته شدن ترکیبی از یک تابع و دامنه واژگانی آن است. به عبارت دیگر، بسته شدن تابعی است که در تابع دیگری تعریف شده است که محیط واژگانی خود را به خاطر می آورد.

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

 function parentFunction(){ let x = 3; function childFunction(y){ return x + y } return childFunction } let res = parentFunction(); console.log(res(6));

در کد بالا، childFunction یک بسته در داخل parentFunction ایجاد می کند. childFunction به متغیرهای تعریف شده در محیط واژگانی childFunction دسترسی دارد حتی پس از اتمام اجرای parentFunction در let res = parentFunction() . به همین دلیل است که console.log(res(6)) 9 می دهد.

بالا بردن

Hoisting در جاوا اسکریپت به فرآیندی اشاره دارد که توسط آن مفسر جاوا اسکریپت اعلان متغیرها، توابع، کلاس‌ها و واردات را قبل از اجرا به بالای کد منتقل می‌کند.

می‌توانید hoisting را به‌عنوان اعلان‌هایی که قبل از اجرای کد بالا می‌آیند مشاهده کنید.

بالابر متغیر

فقط متغیرهایی که با استفاده از var اعلام شده اند بالا می روند. این به این دلیل است که var دارای محدوده بلوکی نیست، به این معنی که متغیر var -declared بدون توجه به موقعیت اعلان متغیر می‌تواند به هر جایی از محدوده آن ارجاع داده شود.

 console.log(x); // undefined var x = 4;

اجرای کد بالا undefined به کنسول وارد می شود. این به این دلیل است که فقط اعلان‌های متغیر بالا می‌روند یا «بالا می‌شوند» و نه مقداردهی اولیه.

قبل از اجرای کد، کد به شکل زیر خواهد بود:

 var x; console.log(x); x = 4

نکته : var x اعلان متغیر است. x = 4 مقداردهی اولیه است.

متغیرهای اعلام شده با let و const بالا نمی روند. این بدان معنی است که مراجعه به متغیرها قبل از اعلان منجر به ReferenceError می شود.

 console.log(y); // ReferenceError: Cannot access "y" before initialization let y = 3;

عملکرد بالابر

توابع درست مانند متغیرهای اعلام شده var بالا می روند.

 console.log(addNums(1,3)); // 4 function addNums(a,b){ return a + b; }

در هنگام اجرا، کد به شکل زیر است:

 function addNums(a,b){ return a + b; } console.log(addNums(1,3));

با این حال، مهم است که بدانید که فقط اعلان های عملکرد بالا می روند. عبارات توابع بلند نمی شوند.

 console.log(addNums(1,3)); // ReferenceError: cannot access "addNums" before initialization const addNums = function (a,b) { return a + b; }

اجرای کد بالا منجر به ReferenceError می شود.

بالا بردن کلاس

برخلاف اعلان تابع، اعلان های کلاس بالا نمی روند. این بدان معناست که شما نمی توانید قبل از اعلام کلاس به آن دسترسی داشته باشید.

 new Car(); // ReferenceError: cannot access "Car" before initialization class Car{}

بالابر وارداتی

اظهارنامه های واردات بالا می رود. این بدان معنی است که تمام روش ها و عملکردهای یک مقدار وارد شده در ماژول دیگری حتی قبل از اعلام آن قابل دسترسی هستند.

 const sum = f.add(2+3); import f from './library/package'

در کد بالا، توابع و متدهای f قابل دسترسی هستند حتی اگر اعلان بعداً ارائه شود.

بهترین شیوه ها

دامنه را تا حد امکان محلی نگه دارید

شما باید محدوده خود را تا حد امکان محلی نگه دارید.

هنگام ایجاد متغیرها، باید هدف خود را ایجاد کنید که متغیرها را در جایی که می خواهید از آنها استفاده کنید. این امر مخصوصاً زمانی صادق است که می‌خواهید از متغیرها فقط در یک یا چند قسمت از کد خود استفاده کنید.

 const num = 3; function addNum(){ return 2 + num; // 3 } function multiplyNum(a){ return 3 * a; }

در کد بالا، num فقط یک بار در تابع addNum استفاده می شود. اعلان num در داخل تابع addNum تمرین بهتری است.

 function addNum(){ const num = 3; return 2 + num; } // rest of code

برای ماژولار بودن بهتر، می توانید num به عنوان آرگومان به تابع addNum ارسال کنید.

 function addNum(num){ return 2 + num } addNum(3); //5

برای محافظت از داده ها از بسته ها استفاده کنید

در برنامه نویسی، مواقعی وجود دارد که ممکن است بخواهید برخی از متغیرها را از دسترسی خارج از یک شی محافظت کنید. اینجاست که بسته شدن می تواند بسیار مفید باشد.

برای محافظت از داده های خصوصی در برابر عملکردهای خارجی و سایر بخش های کد خود از بسته ها استفاده کنید.

 function encapsulateData(){ const user = { name: 'Chidera', age: 23 } return updateUserAge(){ return data.age++; } } const updateHandler = encapsulateData(); const updatedAge = updateHandler(); // 24 console.log(user); // undefined

در کد بالا، updateAge سن کاربر را افزایش می دهد بدون اینکه user از خارج در دسترس باشد.

متغیرها و توابع را قبل از استفاده از آنها اعلام کنید

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

همیشه از let و const برای ایجاد متغیرها استفاده کنید

let و const روش استاندارد اعلان متغیرها در جاوا اسکریپت هستند. آنها رفتار کد غیرقابل پیش بینی را که با استفاده از var ارائه می شود حذف می کنند.

تقریبا هیچ دلیلی برای استفاده از var برای اعلام متغیرها در جاوا اسکریپت مدرن وجود ندارد.

نتیجه

به طور خلاصه، دامنه ها تعیین می کنند که کجا می توان به یک متغیر دسترسی داشت.

محدوده را می توان به سه تقسیم کرد: دامنه جهانی، محلی و بلوک.

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

بالا بردن متغیرها را حتی قبل از ایجاد آنها قابل دسترسی می کند.

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

خبرکاو