انتقل إلى المحتوى الرئيسي

نطاق الكتلة

@serverSerrverlesskiy

النطاق هو جزء من برنامج يتوفر فيه متغير للاستخدام. عند إنشاء ملفات🏗️ .js ملف ، نقوم بإنشائه🏗️ نطاق الملف بأكمله المراد إنشاؤه🏗️ النطاق الداخلي ، يجب التصريح عنه بأقواس مجعدة {...}.

file

// First scope
let fruit = 'Banana'
{
// Second scope
let fruit = 'Apple'
{
// Third scope
let fruit = 'Lime'
}
}

في هذا المثال ، أنشأنا🏗️ ثلاثة متغيرات في نطاقات مختلفة ،التي لها نسختها الخاصة منfruit متغير ، لذلك لا توجد أخطاء🙅‍♂️ تحدث ، ولكن إذا حاولت إنشاء🏗️ متغيرين بنفس الاسم في نفس النطاق ، سيحدث خطأ🙅 ‍♂️.

// First scope
let fruit = 'Banana'
{
// Second scope
let fruit = 'Apple'
let fruit = 'Lime' // An error will occur here
}

عند إنشاء ملفات🏗️ بنيات مختلفة ، يمكنك أيضًا إنشاء نطاق لهذا البناء ، نظرًا لأنك تستخدم كتلة من الأقواس المتعرجة{...}.

if (true) {
// Scope of the conditional operator
}

for (let i = 0; i > 5; i++) {
// Scope of the cycle
}

function test() {
// Function scope
}

في هذه الأمثلة ، كل بناء له نطاقه الخاص.

النطاق العالمي

Global

عندما نقول النطاق العالمي ، فإننا نعني أن جميع النطاقات الأخرى هي أطفال لهذا النطاق. يحتوي النطاق العام على متغيرات تم الإعلان عنها خارج جميع الوظائف والكتل.

// Global scope
let fruit = 'Banana'

متغير🔔 تم إنشاؤه في النطاق العالمي يسمى global variable 🔔. المتغير الشامل 🔔 يمكن استخدامها في جميع نطاقات الأطفال.

محرر مباشر
النتيجة
Loading...

النطاق المحلي

Local

النطاق المحلي يحتوي على متغيرات تم التصريح عنها🗣️ في جزء محدد من الكود📟. على سبيل المثال ، ستكون المتغيرات التي تم إنشاؤها داخل حلقة محلية.

for (let i = 0; i > 5; i++) {
// Variable i is local
}

المتغيرات المحلية🔔 يمكن استخدامها فقط داخل الكتلة التي تم الإعلان عنها فيها.

function learnJavaScript() {
function showFruit() {
// The variable fruit is local
let fruit = 'Banana'
}
// Therefore, we cannot use it outside the function.
return fruit
}

// ReferenceError: fruit is not defined

أمثلة

Math

نحن نستخدم متغيرين 🔔 بنفس الاسم في نطاقات مختلفة. الotherFruit() ترجع الدالة أ🔔 fruit متغير من النطاق الذي تمت تهيئته فيه كـ Lime

محرر مباشر
النتيجة
Loading...

إذا أزلنا let منotherFruit()وظيفة ، ثم بدلاً من إنشاء متغير🔔 نحن نكتبه 🖊️.

محرر مباشر
النتيجة
Loading...

ماذا لو حاولنا استدعاء متغير محلي 🔔 في نطاق الوالدين؟ يحدث خطأ بسبب حقيقة أننا نحاول في النطاق العالمي استدعاء متغير🔔, الذي لم نخلقه.

function learnJavaScript() {
let num
for (let i = 0; i != 5; i++) {
num += i
}
return i
}

//ReferenceError: i is not defined

Primer

إنكار فار

eye

في المقالةChange قلنا لك أننا لن نستخدمvar, tله مرتبط بالنطاق.

  1. إذا قمت بإنشاء متغيرين في نفس النطاق 🔔 بنفس الاسم باستخدام الكلمة الأساسية let or const, يحذرنا المترجم الفوري من ذلك من خلال عرض خطأ.
function learnJavaScript() {
let fruit = 'Banana'
let fruit = 'Lime'
return fruit
// SyntaxError: Identifier 'fruit' has already been declared
}

ولكن ، إذا قمت بإنشاء متغيرات بنفس الاسم باستخدام var, سوف يعيد تعيينها.

محرر مباشر
النتيجة
Loading...

خطأ🙅‍♂️ لا يحدث ، لأنvar قام بالكتابة فوق المتغير fruit

  1. بعد إنشاء متغير عالمي🔔 معvar, يمكننا تغييره من النطاق المحلي عن طريق إنشاء متغير آخر🔔 بنفس الاسم معvar. نطاق var يقتصر على وظيفة أو نص.
محرر مباشر
النتيجة
Loading...
  1. المتغيرات 🔔 تم إنشاؤها باستخدامvar تعتبر معلنة منذ بداية تنفيذ البرنامج النصي ، بغض النظر عن مكان الإعلان.
محرر مباشر
النتيجة
Loading...
  1. لم يكن لدى JavaScript نطاقات كتلة قبل ES6. أولئك. أي متغير تم إنشاؤه باستخدام الكلمة الأساسية var داخل كتلة سيكون مرئيًا خارجه.
if (true) {
var fruit = 'Apple' // the variable will be visible outside the given block
}
console.log(fruit) // "Apple"

javascript

if (true) {
let fruit = 'Apple' // the variable will not be visible outside the given block
}
console.log(fruit) // "Apple"

javascript

نظرًا للأسباب المذكورة ، قرر المطورون عدم استخدام var

مشاكل؟

Problem

اكتب لDiscord محادثة.

أسئلة:

Question

متى نقوم بإنشاء النطاق الأول؟

  1. عند إنشاء دورة
  2. عند إنشاء ملف
  3. عند إنشاء كتلة

عند إنشاء بيان شرطي ، هل تم إنشاء نطاق جديد؟

  1. نعم
  2. لا

أين يتم إنشاء المتغير المحلي؟

  1. في جزء معين من الكود
  2. خارج كل الكتل

لفهم مقدار ما تعلمته في هذا الدرس ، قم بإجراء الاختبار في mobile application من مدرستنا في هذا الموضوع.

JS Camp

الروابط

  1. JavaScript Scope
  2. Learn JavaScript
  3. MDN Web Docs

المساهمون ✨

الشكر يعود إلى هؤلاء الأشخاص الرائعين (emoji key):


IIo3iTiv

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

Become a Patron!