JavaScript

JavaScript Scope
النطاق في لغة جافا سكريبت

ستتعلم في هذا الدرس أستخدام النطاقات JavaScript Scope مع المتغيرات ,وسوف تتعلم الفرق بين أنواع النطاقات Function Scope ,Block Scope,Global Scope عند الأعلان عن أي متغير,ايضاً سنتعلم الكُتل البرمجية block statement وعلاقتها بالمتغيرات والفرق بين المتغيرات المُعلن عنها بكلمة var,let,const keword داخل الكُتل البرمجية في لغة جافا سكريبت.

التاريخ

08 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1607

المواضيع

24
الشروحات chevron_left JavaScript Scope chevron_left JavaScript

Variable scope
النطاق في لغة جافا سكريبت

</> JavaScript Scope
النطاق في لغة جافا سكريبت

في لغة جافا سكريبت يكون للمتغيرات Variables ثلاث نطاقات Scopes ، من خلال النطاقات يمكن الوصول أو قراءة المتغيرات Variables بعد عملية الإعلان عنها Variable Declaration وبناءً علي نوع النطاق نُحدد إذا كان المتغير محلي Local  أو عام Global أو يبدأ بكلمة var Keywordأو بكلمة let Keyword. 


يجب في البداية التعرف علي الثلاث نطاقات Scopes للمتغيرات Variables لكي نُحدد متي نُعلن عن المتغيرات  Variables من النوع:

  • متغيرات محلية Local Variables.
  • متغيرات عامة Global Variables.
  • المتغيرات التي تُعرف بكلمة var Keyword.
  • المتغيرات التي تُعرف بكلمة let Keyword.


أنواع النِطاقات Scopes في لغة جافا سكريبت:

  • Global Scope
  • Block Scope
  • Function Scope

</> JavaScript Global Scope
النطاق العامة في لغة جافا سكريبت

في بيئات البرمجة النِطاق العام Global Scope هوا نَطاق مرئي لجميع النِطاقات الأخري ، في لغة جافا سكريبت النِطاق العام Global Scope هوا المتغيرات  Variables المُعلن عنها في صفحة الويب خارج الدوال وخارج الاقواس المجعدة Curly braces { }.

  • النِطاق العام Global Scope هوا تعريف المتغير Variable أعلي وخارج الدالة Function. 
  • المتغير Variable الذي يَكونُ من النوع النِطاقات العامة Global Scope نستطيع قراءته من أي مكان داخل صفحة الويب في لغة جافا سكريبت.
  • يتم الإعلان عن المتغيرات Variables في لغة جافا سكريبت بثلاث كلمات Keywords ، وهم var , let , const ، وهم متشابهين تماماً في حالة النِطاق العام Global Scope.   
Global Scope

يمكن قراءة المتغيرات من النوع Global Scope من أي مكان داخل صفحة الويب سواء كان تعريفة بكلمة var أو let أو const.

var username= "Ahmed";
function welcome(){
  document.write("Welcome " + username);
}
if(username == "Ahmed"){
   welcome();
}
else
{
  document.write(username + "Wrong Username" );
}

</> JavaScript Function Scope
المتغيرات التي تعرف بداخل الدوال في لغة جافا سكريبت

المُتغيرات Variables التي تُعرف بداخل الدوال Function Scope في بيئات البرمجة هوا نِطاق غير مرئي للنِطاقات الأخري ، في لغة جافا سكريبت المُتغيرات Variables المُعلن عنها داخل الدالة Function لن يتم قرائتها خارج هذه الدالة Function ، لأن كل دالة Function تَقوم بإنشاء نِطاق خاص بها New Scope.  

  • نِطاق داخل الدالة Function Scope هو الأعلان عن المتغير Variable بداخل أقواس الدالة Function المجعدة Curly braces { }.
  • المتغير Variable داخل الدالة Function Scope نستطيع قراءته داخل الدالة Function المُحددة فقط ولايَمكن قرائته من أي مكان داخل صفحة الويب في لغة جافا سكريبت.
  • يتم الإعلان عن المتغيرات Variables في لغة جافا سكريبت بثلاث كلمات Keywords ، وهم var , let , const ، وهم متشابهين تماماً في حالة النِطاق داخل الدالة Function Scope.   
Function Scope

لا يمكن قراءة المتغيرات من النوع Function Scope من أي مكان داخل صفحة الويب سواء كان تعريفة بكلمة var أو let أو const يقرأ بداخل الدالة التي تم العلان بداخلها عن المتغيرات فقط.

var username= "Ahmed";
function welcome(){
  document.write("Welcome " + username);
}
if(username == "Ahmed"){
   welcome();
}
else
{
  document.write(username + "Wrong Username" );
}

</> JavaScript local Scope
المتغيرات المحلية في لغة جافا سكريبت

المتغيرات المحلية Local variable هي المتغيرات التي يتم الأعلان عنها بداخل الدوال Function Scope وهي غير مرئية خارج نطاق الدالة لا يمكن استخدامها خارج حدود هذا النطاق.

  • المتغيرات المحلية Local variable هي ذات نطاق Local Scope.
  • النطاق Local Scope هو نطاق الدالة Function Scope.
  • لا يمكن استخدام المتغيرات المحلية Local variable خارج النطاق  Local Scope.
Local Scope

يمكن قراءة المتغيرات من النوع Global Scope من أي مكان داخل صفحة الويب سواء كان تعريفة بكلمة var أو let أو const.

function welcome(){
  var username= "Ahmed";
  /* local variable can access here only */
  document.write("Welcome " + username);
}
welcome();
/* local variable can't access here */
/* can't user username here */

</> JavaScript Block scope with curly braces
المتغيرات التي تعرف بداخل الاقواس المجعدة

تختلف المُتغيرات Variables التي تُعرف بداخل الكتل البرمجية Block Scope في بيئات البرمجة علي حسب الكلمة keywords تختلف var عن let عن const ، في لغة جافا سكريبت المُتغيرات Variables المُعلن عنها داخل Block Scope يتم قرائتها خارج Block Scope ولكن باختلاف بسيط.


الاختلاف بين المتغيرات المعلن عنها داخل وخارج الكتل البرمجية Block Scope؟

  • المتغيرات المعلن عنها بكلمة var keyword ليس لها كتلة برمجية block scope.

اي أن المتغيرات المعلن عنها بكلمة var keyword اعلي وخارج الكتل block scope عندما يتم اعادة الأعلان عنها أسفل وداخل block scope سوف تتبدل قيمتها بالقيمة الجديدة.

  • المتغيرات المعلن عنها بكلمات const,let keyword لها كتلة برمجية block scope.

    اي أن المتغيرات المعلن عنها بكلمات const,let keyword اعلي وخارج الكتل block scope عندما يتم اعادة الأعلان عنها أسفل وداخل block scope فأنها تعد متغير جديد مرئي فقط داخل block scope وخارجه متغير مختلف.

    var keyword

    المتغيرات المعلن عنها بكلمة var keyword هي اعادة اعلان بداخل الكتل البرمجية block scope.

    var x = 10;
    {
      var x = 3;
    }
    /* x here equal 3 */
    document.write(x);
    let keyword

    المتغيرات المعلن عنها بكلمة let keyword هي متغير مختلف عن المعلن عنه خارج الكتل البرمجية block scope.

    let x = 10;
    {
      let x = 3;
      /* x here equal 3 */
      document.write("inside block scope " + x + "<br>");
    }
    /* x here equal 10 */
    document.write("outside block scope " + x );
    let keyword global scope

    المتغيرات المعلن عنها بكلمة let keyword لها global scope اي أن المتغير المُعلن عنه خارج الكتل البرمجية block scope يكون له نطاق عام.

    let x = 10;
    {
      /* x here equal 10 */
      document.write("inside block scope " + x + "<br>");
    }
    /* x here equal 10 */
    document.write("outside block scope " + x );
    const keyword

    المتغيرات المعلن عنها بكلمة const keyword هي متغير مختلف عن المعلن عنه خارج الكتل البرمجية block scope.

    const X = 10;
    {
      const X = 3;
      /* x here equal 3 */
      document.write("inside block scope " + X + "<br>");
    }
    /* x here equal 10 */
    document.write("outside block scope " + X );

    </> JavaScript Automatically Global scope
    المتغيرات بدون كلمة var في لغة جافا سكريبت هي من النطاق العام

    المتغيرات التي أًعلن عنها بدون كلمة var أو كلمة let أو كلمة const داخل نطاق الدالة Function Scope أصبحت تلقائياً من النواع Global variables لحظة الأعلان عنها لأن المتغيرات بدون keyword هي من النوع var.

    Automatically Global scope

    المتغيرات التي أًعلن عنها بدون كلمة var أو كلمة let أو كلمة const داخل نطاق الدالة Function Scope أصبحت تلقائياً من النواع Global variables.

    function welcome(){
       username= "Ahmed";
      /* username now is global */
      /*Global variable can access here */
      document.write("Welcome inside " + username + "<br>");
    }
    welcome();
    /*Global variable can access here */
    /* username can access here */
    document.write("Welcome outside " + username);

    </> JavaScript Strict Mode with var in scope
    المتغيرات بكلمة var في لغة جافا سكريبت مع الوضع الصارم

    مع الوضع الصارم "Strict Mode" مع المتغيرات التي تُعرف بدون كلمة var keyword لن تكون من النوع Global scope في لغة جافا سكريبت.

    • لن يتم استخدام المتغيرات مع الوضع الصارم "Strict Mode" بدون تعريف decleare سواء داخل النطاق العام global scope أو النطاق المحلي local scope.
    not Automatically Global scope

    لن يتم استخدام المتغيرات مع الوضع الصارم "Strict Mode" بدون تعريف decleare سواء داخل النطاق العام global scope أو النطاق المحلي local scope.

    function welcome(){
       'use strict';
       username= "Ahmed";
       /* username is undeclared variable */
      /* undeclared variable can't access */
      /* username can't access here without declaration */
    
    }
    welcome();
    /* username can,t access here in 'use strict' */

    </> JavaScript window object Variables scope
    المتغيرات مع كائن window في لغة جافا سكريبت

    أي متغير يتم الأعلان عنه بكلمة var keyword هو تابع إلي كائن window في لغة جافا سكريبت ويمكن الوصول إليه عن طريق إسم الكائن متبوع بأسم المتغير.

    • المتغير المُعلن عنه بكلمة var keyword هو تابع إلي كائن window.
    • المتغير المُعلن عنه بكلمة let keyword لا يتبع كائن window.
    • المتغيرات العامة Global Variables هي تابعة لكائن window.
    Window Scope

    لن يتم استخدام المتغيرات مع الوضع الصارم "Strict Mode" بدون تعريف decleare سواء داخل النطاق العام global scope أو النطاق المحلي local scope.

    var username= "Ahmed";
    document.write(window.username);
    not Window Scope

    لن يتم استخدام المتغيرات مع الوضع الصارم "Strict Mode" بدون تعريف decleare سواء داخل النطاق العام global scope أو النطاق المحلي local scope.

    let username= "Ahmed";
    document.write(window.username);

    </> The Lifetime of JavaScript Variables
    حياة المتغيرات في لغة جافا سكريبت

    • حياة المتغير يبدأ عندما يتم الأعلان عنه declare مباشرة.
    • المتغيرات variables من النوع المحلي local scope أو function scope يتم حذفة بعد انتهاء تنفيذ الدالة function.
    • المتغيرات variables من النوع global scope يتم حذفها عندما يتم اغلاق صفحة الويب من المتصفح.
    • المتغيرات variables من النوع global scope يتم اعادة الأعلان عنها عندما يتم فتح صفحة الويب مرة اخري علي المتصفح.
    • المتغيرات variables من النوع global scope يتم استخدامها من داخل ملف جافا سكريبت اخر اذا تم أستدعاء الملف الذي يحمل المتغير أعلي الملف الذي يستدعي منه شاهد المثالي التالي.
    use variables in another js file

    يمكن استدعاء أي متغير من النوع النطاق العام global variable تم الأعلان عنه في ملف من أي ملف جافا سكربت اخر بشرط الاستدعاء اسفل الملف.

    <!DOCTYPE html>
    <html>
    <body>
      <h1>JavaScript Global Scope</h1>
      <script src="https://www.closetag.com/examples/global.js"></script>
      <script>
      /* 
      x is decleared in another file
      x is decleared here -> https://www.closetag.com/examples/global.js
      use x here 
      use x below file.js contain x
     */
      document.write("This variable is declared in external js file we will use it in this file : " + x);
    
      </script>
    </body>
    </html>
    use variables above another js file

    سوف يحدث خطأ اثناء الاستدعاء في حالة استدعاء المتغير أعلي ملف جافا سكريبت الزي تم الأعلان عن المتغير بداخلة.

    <!DOCTYPE html>
    <html>
    <body>
      <h1>JavaScript Global Scope</h1>
      <script>
      /* x is undefind if use above js file */
      document.write("This variable is declared in external js file we will use it in this file : ");
      document.write(x);
      </script>
      <script src="https://www.closetag.com/examples/global.js"></script>
    </body>
    </html>
    ملاحظات هامة
    • المصفوفات Arrays والكائنات Object لهما ايضاً نطاقات مثل المتغيرات.
    • عوامل الدوال Function Arguments هي من النوع local scope تُستخدم فقط داخل حدود الدالة فقط.
    معلومات تهمك
    • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
    • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
    مشاركة
    0
    0
    0
    0
    عدد المشاركات
    هل هذه المعلومات نالت إعجابك ؟
    0
    0
    عدد التقييمات

    لديك استفسار ؟

    يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.