مبدأ JavaScript

ECMAScript 2015

إدخال ECMAScript 2015 كلمتين جديدتين مهمتين في JavaScript:letconst.

تقدم هذان الكلمتان المفتاحيتان في 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 才是可见的。

函数作用域

在函数内声明变量时,使用 varlet 很相似。

它们都有函数作用域

function myFunction() {
  var carName = "porsche";   // 函数作用域
}
function myFunction() {
  let carName = "porsche";   // 函数作用域
}

全局作用域

如果在块外声明声明,那么 varlet 也很相似。

它们都拥有全局作用域

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;