تم كتابة هذا الدليل من قبل الأب الذي يقوم ببناء alis4ops.com.

• أشير إليه باسم "بابا".
• إنه يتعلم بناء تطبيقات الويب، وكان مهندسًا كهربائيًا سابقًا.
• سوف نترك بعض الملاحظات حول المقالة التي تشير إليه، لذلك يمكن لأي شخص يقرأ هذا على موقع interwebz أن يتجاهل هذه السطور. أتمنى أن لا تمانعوا يا رفاق!

سياق

لدينا الوظائف التالية:

• التعامل مع اللمس
• التعامل معMoveTouch

بابا محدد في DragDrop.js

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

function handleMoveTouch(event) {
    event.preventDefault()
    if (draggedElement) {
        const touch = event.touches[0];
        // ..more code
    }
}

لاحظ أننا نصل إلى DraggedElement على السطر:

• إذا (تم سحب العنصر) {

لا يُظهر hanldeMoveTouch خطأً عند الاتصال.

سيؤدي وضع نقطة توقف على if (draggedElement) في Chrome DevTools إلى إظهار أن DragedElement يتحلل إلى نفس عنصر html الذي يوفره events.target في HandleStartTouch

مشكلة

لماذا يمكننا الوصول إلى DraggedElement في HandleMoveTouch حتى من خلاله المحدد في HandleStartTouch

بشكل أكثر عمومية، لماذا يمكننا الوصول إلى متغير تم تعريفه في وظيفة في وظيفة أخرى في جافا سكريبت؟

توضيح

انظر إلى وظيفة HandleStartTouch:

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

على وجه التحديد السطر:

    draggedElement = event.target;

لا يتم الإعلان عن اسم المتغير الذي تم سحبه باستخدام أي من الكلمات الرئيسية

• الثابت
• يترك
• فار

على سبيل المثال، نحن لا نعرّفها على النحو التالي:

    const draggedElement = event.target;

إعلان المتغير (ويعرف أيضًا باسم الكلمات الرئيسية)

في جافا سكريبت، عندما لا نستخدم إعلانات المتغيرات (وتسمى أيضًا الكلمات الرئيسية)، تعتبر جافا سكريبت هذا المتغير متغيرًا عامًا.

يمارس

خذ بعين الاعتبار المثال التالي حيث نحدد وظيفتين:

// Takes in two arguments and returns the sum
function add(x, y) {
  sum = x   y
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}

فتح أدوات التطوير في Chrome

• انتقل إلى "وحدة التحكم"
• انسخ الكود أعلاه والصقه
• اضغط على زر الإدخال
• سيعود غير محدد، هذا جيد.

في وحدة التحكم، اتصل بـ add(1,1)

• سترى وحدة التحكم تعود 2

add(1,1)
=> 2

ثم اتصل بحالة الطباعة

• سترى مجموع الناتج: 2

يمكننا أن نرى أن printStatus () يمكنه الوصول إلى مجموع المتغير المحدد في add(x, y)

هذا لأنه تم الإعلان عن مجموع المتغير بدون الكلمات الأساسية التالية:

• المجموع = س ص

الآن دعنا نغير add(x, y) add لاستخدام إعلان متغير لـ sum

// Takes in two arguments and returns the sum
function add(x, y) {
  const sum = x   y // use the variable declartion const
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}

• الانتقال إلى Chrome
• قم بتحديث الصفحة باستخدام Ctrl R
  • يمكنك أيضًا فتح علامة تبويب جديدة وفتح وحدة تحكم أدوات التطوير مرة أخرى.

دعونا نحدد الوظائف في سجل وحدة التحكم مرة أخرى.

• انسخ والصق مقتطف الشفرة أعلاه في وحدة التحكم واضغط على Enter.

نحتاج إلى إعادة تعريفه لأننا بدأنا وحدة تحكم مطور جديدة.

الآن في وحدة التحكم، اتصل بـ add(2, 2)

• سترى وحدة التحكم ترجع 4

اتصل بـ printStatus لمعرفة ما إذا كان بإمكانك الوصول إلى مجموع المتغير المحدد في add(x, y)

printStatus()
> Uncaught ReferenceError: sum is not defined
    at printStatus (:9:3)
    at :1:1

الخطأ يقول أن المبلغ غير محدد

يؤكد هذا أنه عندما يتم تعريف متغير بإعلان متغير (const، Let، var) داخل دالة، فإن نطاق هذا المتغير يكون فقط داخل الوظيفة

عندما يتم تعريف متغير بدون تعريف متغير داخل دالة، يكون نطاق هذا المتغير عامًا.

آمل أن يساعد هذا بابا (وأي شخص آخر يقرأ هذا.)