نطاق الكتلة

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

// 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 scope
let fruit = 'Banana'

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

محرر مباشر

function learnJavaScript() { // The variable fruit is global let fruit = 'Banana' function showFruit() { // Therefore, we can use it inside a function return fruit } return showFruit() }

function learnJavaScript() {
  // The variable fruit is global
  let fruit = 'Banana'
  function showFruit() {
    // Therefore, we can use it inside a function
    return fruit
  }
  return showFruit()
}

النتيجة

Loading...

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

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

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

أمثلة

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

محرر مباشر

function learnJavaScript() { let fruit = 'Banana' function otherFruit() { let fruit = 'Lime' return fruit } return otherFruit() + ' and ' + fruit }

function learnJavaScript() {
  let fruit = 'Banana'
  function otherFruit() {
    let fruit = 'Lime'
    return fruit
  }
  return otherFruit() + ' and ' + fruit
}

النتيجة

Loading...

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

محرر مباشر

function learnJavaScript() { let fruit = 'Banana' function otherFruit() { fruit = 'Lime' return fruit } return otherFruit() + ' and ' + fruit }

function learnJavaScript() {
  let fruit = 'Banana'
  function otherFruit() {
    fruit = 'Lime'
    return fruit
  }
  return otherFruit() + ' and ' + fruit
}

النتيجة

Loading...

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

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

//ReferenceError: i is not defined

إنكار فار

في المقالة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, سوف يعيد تعيينها.

محرر مباشر

function learnJavaScript() { var fruit = 'Banana' var fruit = 'Lime' return fruit }

function learnJavaScript() {
  var fruit = 'Banana'
  var fruit = 'Lime'
  return fruit
}

النتيجة

Loading...

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

2. بعد إنشاء متغير عالمي معvar, يمكننا تغييره من النطاق المحلي عن طريق إنشاء متغير آخر بنفس الاسم معvar. نطاق var يقتصر على وظيفة أو نص.

محرر مباشر

function learnJavaScript() { var fruit = 'Lime' { var fruit = 'Banana' } return fruit }

function learnJavaScript() {
  var fruit = 'Lime'
  {
    var fruit = 'Banana'
  }
  return fruit
}

النتيجة

Loading...

3. المتغيرات تم إنشاؤها باستخدامvar تعتبر معلنة منذ بداية تنفيذ البرنامج النصي ، بغض النظر عن مكان الإعلان.

محرر مباشر

function learnJavaScript() { fruit = 'Banana' var fruit return fruit }

function learnJavaScript() {
  fruit = 'Banana'
  var fruit
  return fruit
}

النتيجة

Loading...

4. لم يكن لدى JavaScript نطاقات كتلة قبل ES6. أولئك. أي متغير تم إنشاؤه باستخدام الكلمة الأساسية var داخل كتلة سيكون مرئيًا خارجه.

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

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

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

مشاكل؟

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

أسئلة:

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

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

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

1. نعم
2. لا

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

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

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

الروابط

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

المساهمون ✨

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

IIo3iTiv

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨