JavaScript Scope
النطاق في لغة جافا سكريبت
ستتعلم في هذا الدرس أستخدام النطاقات JavaScript Scope مع المتغيرات ,وسوف تتعلم الفرق بين أنواع النطاقات Function Scope ,Block Scope,Global Scope عند الأعلان عن أي متغير,ايضاً سنتعلم الكُتل البرمجية block statement وعلاقتها بالمتغيرات والفرق بين المتغيرات المُعلن عنها بكلمة var,let,const keword داخل الكُتل البرمجية في لغة جافا سكريبت.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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 تُستخدم فقط داخل حدود الدالة فقط.
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
