مبدأ JavaScript
ECMAScript 2015
إدخال ECMAScript 2015 كلمتين جديدتين مهمتين في JavaScript:let
和 const
.
تقدم هذان الكلمتان المفتاحيتان في JavaScript نطاق الكتلة (نطاق الكتلةمتغيرات (وثوابت).
قبل ES2015، كان لدى JavaScript نوعين فقط من النطاقات:全局作用域和函数作用域.
全局作用域
عالميالمتغيرات المعلنة全局作用域.
مثال
var carName = "porsche"; // يمكن استخدام carName في هذا الكود function myFunction() { // يمكن استخدام carName في هذا الكود }
عالمييمكن الوصول إلى المتغيرات في أي مكان في برنامج JavaScript.
函数作用域
محليالمتغيرات المعلنة函数作用域.
مثال
// لا يمكن استخدام carName في هذا الكود function myFunction() { var carName = "porsche"; // يمكن استخدام carName هنا } // لا يمكن استخدام carName في هذا الكود
محلييمكن الوصول إلى المتغيرات فقط داخل الدوال التي تم إعلانها فيها.
نطاق الكتلة JavaScript
من خلال var
المتغيرات المعلنة بالكلمات المفتاحية لا تحتوي علىالنطاق.
في الكتلة {} يمكن الوصول إلى المتغيرات المعلنة داخلياً من خارج الكتلة.
مثال
{ var x = 10; } // هنا يمكن استخدام x
قبل ES2015، لم يكن لدى JavaScript نطاق الكتلة.
يمكن استخدام let
الكلمات المفتاحية تعلن متغيرات تحتوي على نطاق الكتلة.
في الكتلة {} المتغيرات المعلنة داخلياً غير قابلة للوصول منها خارج الكتلة:
مثال
{ let x = 10; } // هنا لا يمكن استخدام x
إعادة إعلان المتغيرات
استخدام var
الكلمة المفتاحية لإعادة إعلان المتغيرات يمكن أن تسبب مشكلة.
إعادة إعلان المتغيرات في الكتلة تجدد إعلان المتغيرات خارج الكتلة:
مثال
var x = 10; // هنا x هو 10 { var x = 6; // هنا x هو 6 } // هنا x هو 6
استخدام let
الكلمة المفتاحية لإعادة إعلان المتغيرات يمكن أن تحل هذه المشكلة.
إعادة إعلان المتغيرات في الكتلة لا تجدد إعلان المتغيرات خارج الكتلة:
مثال
var x = 10; // هنا x هو 10 { let x = 6; // هنا x هو 6 } // هنا x هو 10
دعم المتصفح
Internet Explorer 11 أو إصداراتها الأقدم لا تدعم بشكل كامل let
الكلمات المفتاحية.
جدول التالي يحدد الأول الذي يدعم بشكل كامل let
الكلمات المفتاحية إصدار المتصفح:
Chrome 49 | IE / Edge 12 | Firefox 44 | Safari 11 | Opera 36 |
2016 年 3 月 | 2015 年 7 月 | 2015 年 1 月 | 2017 年 9 月 | 2016 年 3 月 |
循环作用域
在循环中使用 var
:
مثال
var i = 7; for (var i = 0; i < 10; i++) { // 一些语句 } // 此处,i 为 10
在循环中使用 let
:
مثال
let i = 7; for (let i = 0; i < 10; i++) { // 一些语句 } // 此处 i 为 7
在第一个例子中,在循环中使用的变量使用 var
重新声明了循环之外的变量。
在第二个例子中,在循环中使用的变量使用 let
并没有重新声明循环外的变量。
如果在循环中用 let
声明了变量 i,那么只有在循环内,变量 i 才是可见的。
函数作用域
在函数内声明变量时,使用 var
和 let
很相似。
它们都有函数作用域:
function myFunction() { var carName = "porsche"; // 函数作用域 } function myFunction() { let carName = "porsche"; // 函数作用域 }
全局作用域
如果在块外声明声明,那么 var
和 let
也很相似。
它们都拥有全局作用域:
var x = 10; // 全局作用域 let y = 6; // 全局作用域
HTML 中的全局变量
使用 JavaScript 的情况下,全局作用域是 JavaScript 环境。
在 HTML 中,全局作用域是 window 对象。
من خلال var
关键词定义的全局变量属于 window 对象:
مثال
var carName = "porsche"; // 此处的代码可使用 window.carName
من خلال let
关键词定义的全局变量不属于 window 对象:
مثال
let carName = "porsche"; // 此处的代码不可使用 window.carName
重新声明
允许在程序的任何位置使用 var
重新声明 JavaScript 变量:
مثال
var x = 10; // 现在,x 为 10 var x = 6; // 现在,x 为 6
在相同的作用域,或在相同的块中,通过 let
في نفس المجال، أو في نفس الكتلة، من خلال var
المتغيرات غير مسموح إعادة الديclarationها:
مثال
var x = 10; // 允许 let x = 6; // 不允许 { var x = 10; // 允许 let x = 6; // 不允许 }
在相同的作用域,或在相同的块中,通过 let
في نفس المجال، أو في نفس الكتلة، من خلال let
المتغيرات غير مسموح إعادة الديclarationها:
مثال
let x = 10; // مسموح let x = 6; // 不允许 { let x = 10; // مسموح let x = 6; // 不允许 }
在相同的作用域,或在相同的块中,通过 var
في نفس المجال، أو في نفس الكتلة، من خلال let
المتغيرات غير مسموح إعادة الديclarationها:
مثال
let x = 10; // مسموح var x = 6; // غير مسموح { let x = 10; // مسموح var x = 6; // غير مسموح }
في مجالات أو الكتل المختلفة، من خلال let
إعادة الديclaration للمتغير مسموح:
مثال
let x = 6; // مسموح { let x = 7; // مسموح } { let x = 8; // مسموح }
Hoisting
من خلال var
المتغيرات المُديرلة سHoistingإلى القمة. إذا لم تكن تعرف ما هو Hoisting، يرجى تعلم هذا الفصل من Hoisting.
يمكنك استخدام المتغير قبل الديclaration:
مثال
// في هذا المكان، يمكنك استخدام carName var carName;
من خلال let
المتغيرات المحددة لن تُرفع إلى القمة.
في الديclaration let
استخدام المتغير قبل الديclaration يؤدي إلى خطأ ReferenceError.
المتغيرات تكون في منطقة "المنعزلة المؤقتة" من بداية الكتلة حتى نقطة الديclaration:
مثال
// في هذا المكان، لا يمكنك استخدام carName let carName;