ما الخطأ في العناصر العادية؟" />

إذا كنت تتوسع في معرفتك بجافا سكريبت وتتساءل لماذا سيضيفون وظائف السهم في ECMAScript 2015 (ES6)، فأنت لست وحدك. وبينما بنيت على معرفتي باللغة وتعقيداتها ومراوغاتها، وجدت نفسي أتساءل عن نفس الشيء. في هذا المنشور، سأوضح الاختلافات والفوائد والأسباب وراء إضافته ومتى يجب عليك استخدامه.

دعونا نتحدث عن الاختلافات

قبل تقديم وظائف الأسهم، كان لا بد من الإعلان عن الوظائف بالتنسيق التقليدي على النحو التالي:

function add(x, y) {
  return x   y;
}

أو تم الإعلان عنها كتعبير:

const addFunction = function add(x, y) {
  return x   y;
}

مع إدخال وظائف الأسهم، يمكن كتابة ذلك على النحو التالي:

const addFunction = (x,y) => x   y

بناء الجملة موجزة

من المثال أعلاه، يمكننا أن نرى بسهولة أنه باستخدام دالة السهم والاستفادة من ميزة الإرجاع الضمنية الخاصة بها، يمكن إعادة هيكلة الوظيفة بسرعة إلى سطر واحد. يكون الكود الناتج أكثر إيجازًا ووضوحًا وأسهل في القراءة، مما يؤدي إلى تطوير أكثر سلاسة وتصحيح أسرع للأخطاء.

الرفع

سيعمل وقت تشغيل JavaScript بشكل افتراضي على رفع جميع الوظائف والإعلانات المتغيرة إلى أعلى نطاقها عند إنشاء سياق التنفيذ. على سبيل المثال، ضمن النطاق العام، يضمن هذا أن جميع الوظائف والمتغيرات المعلنة ستكون متاحة لجميع الوظائف التي يتم استدعاؤها لاحقًا. ومع ذلك، لا يتم رفع وظائف الأسهم مطلقًا، مما يسمح بتحكم أكبر في الموقع الدقيق لمكان تنفيذ الوظيفة والمتغيرات التي يمكنها الوصول إليها.

سياق

في كل مرة يتم فيها تنفيذ وظيفة JavaScript، يتم إنشاء سياق التنفيذ الذي يتضمن معلومات حول البيئة التي تعمل فيها الوظيفة، بما في ذلك قيمة هذا. بينما يتم تنفيذ الوظيفة التقليدية في سياقها الخاص، فإن وظيفة السهم ترث دائمًا سياق الوظيفة التي استدعتها.
باستخدام الكود أدناه:

class Person {
    constructor(){
        this.name = "George";
        this.greetings = ["Good Morning,","Hello!","Howdy!"];
    }

    printGreetings(){
        this.greetings.forEach(function print(greet){
            console.log(`${greet} ${this.name}`);
        });
    }
}

let person = new Person();
person.printGreetings();

قد نحصل على خطأ يقول: لا يمكن قراءة الخاصية 'forEach' غير المحددة، وذلك لأنه على الرغم من أن وظيفة printGreetings تقع ضمن سياق فئة الشخص وترث سياقها، إلا أن وظيفة forEach (على الرغم من أنها وظيفة JavaScript مضمنة) تعمل في سياقها الخاص الذي لا يحتوي على خاصية this.name، مما يؤدي إلى حدوث خطأ في البحث.

ومع ذلك، لن تعمل دالة السهم مطلقًا في سياقها الخاص، ومن خلال إعادة كتابة الدالة أعلاه باستخدام دالة سهم...

printGreetings(){
    this.greetings.forEach((greet) => {
        console.log(`${greet} ${this.name}`);
    });
}

النتيجة ستكون كما هو متوقع

Good Morning, George
Hello! George
Howdy! George

ملخص

لتلخيص فوائد وظائف الأسهم؛ أنها تسمح برمز أقصر وأكثر إيجازا؛ يقدم إرجاعًا ضمنيًا لرمز كتلة الوظيفة؛ لا يتم رفعه إلى أعلى سياق التنفيذ ويحافظ على موقعه الدقيق في التعليمات البرمجية؛ أخيرًا، يرثون سياق الوظيفة التي استدعتها دون تنفيذ سياقها الخاص، مما يسمح باستخدام أكثر قابلية للتنبؤ بهذه الكلمة الأساسية.

نأمل أن يكون هذا المنشور قد ساعدك على فهم الاختلافات والفوائد بين الوظائف التقليدية ووظيفة السهم بشكل أفضل، وساعدك على تحقيق خطوة إضافية في رحلتك إلى JavaScript!

مزيد من القراءة:
مدونة ديمتري بافلوتين - الاختلافات بين السهم والوظائف العادية
المستندات المرجعية لـ MDN - وظائف الأسهم