"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > إتقان وظائف جافا سكريبت: دليلك إلى الوظائف العادية مقابل وظائف السهم

إتقان وظائف جافا سكريبت: دليلك إلى الوظائف العادية مقابل وظائف السهم

تم النشر بتاريخ 2024-11-08
تصفح:865

Mastering JavaScript Functions: Your Guide to Normal vs. Arrow Functions

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

الدوال العادية مقابل دوال السهم: استكشاف الفجوة
بناء الجملة
يتم تعريف الوظائف العادية في JavaScript باستخدام الكلمة الأساسية للوظيفة متبوعة باسم الوظيفة والمعلمات (إن وجدت) ونص الوظيفة المحاط بأقواس متعرجة. إليك مثال:

function add(a, b) {
    return a   b;
}

من ناحية أخرى، توفر وظائف السهم صيغة أكثر إيجازًا تم تقديمها في ES6. يستخدمون تدوين السهم (=>) ويحذفون الكلمة الأساسية للوظيفة والأقواس المتعرجة للوظائف ذات السطر الواحد. على سبيل المثال:

const add = (a, b) => a   b;

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

const person = {
    name: 'John',
    sayHello: function() {
        console.log(`Hello, ${this.name}!`);
    }
};

person.sayHello(); // Output: Hello, John!

const personArrow = {
    name: 'Jane',
    sayHello: () => {
        console.log(`Hello, ${this.name}!`);
    }
};

personArrow.sayHello(); // Output: Hello, undefined!

في المثال أعلاه، يقوم person.sayHello() بتسجيل "Hello, John!" بشكل صحيح. لأن هذا يشير إلى الشخص. ومع ذلك، يقوم personArrow.sayHello() بتسجيل الرسالة "مرحبًا، غير محدد!" لأن وظائف السهم لا تملك thisbinding الخاصة بها، مما يجعلها ترث هذه القيمة من النطاق العام حيث لم يتم تعريف الاسم.

الوسائط الكائن
هناك تمييز آخر يكمن في الوسيطة. تتمتع الوظائف العادية بإمكانية الوصول إلى كائن الوسيطات، وهو كائن يشبه المصفوفة يحتوي على كافة الوسائط التي تم تمريرها إلى الوظيفة. ومع ذلك، لا تحتوي وظائف السهم على كائن وسيط خاص بها. دعونا نوضح ذلك بـ e

xample:

function sum() {
    let total = 0;
    for (let i = 0; i  {
    let total = 0;
    for (let i = 0; i 



في المثال أعلاه، يقوم sum() بحساب مجموع كافة الوسائط التي تم تمريرها إليه بشكل صحيح باستخدام كائن الوسيطات. ومع ذلك، فإن sumArrow() يلقي خطأ مرجعي نظرًا لأن وظائف الأسهم لا تملك حق الوصول إلى الوسائط.

كلمة رئيسية جديدة
يمكن استخدام الوظائف العادية كوظائف منشئة باستخدام الكلمة الأساسية الجديدة لإنشاء مثيلات جديدة للكائنات. ومع ذلك، لا يمكن استخدام وظائف السهم كمنشئات. سيؤدي استخدام وظائف الأسهم مع new إلى حدوث خطأ في الكتابة. إليك مثال:

function Person(name) {
    this.name = name;
}

const john = new Person('John');
console.log(john.name); // Output: John
const PersonArrow = (name) => {
    this.name = name;
}

const jane = new PersonArrow('Jane'); // TypeError: PersonArrow is not a constructor

قسم الأسئلة الشائعة
س: متى يجب علي استخدام الوظائف العادية بدلاً من وظائف الأسهم؟
ج: استخدم الوظائف العادية عندما تحتاج إلى الوصول إلى الكلمة الأساسية هذه، أو كائن الوسائط، أو عند تحديد وظائف المُنشئ. تُفضل وظائف الأسهم للسطور المفردة المختصرة أو عندما تريد الحفاظ على النطاق المعجمي.

س: هل يمكن أن يكون لوظائف السهم اسم؟
ج: لا، لا يمكن أن يكون لوظائف الأسهم اسم. هم مجهولون بشكل افتراضي.

س: هل وظائف السهم أسرع من الوظائف العادية؟
ج: لا يوجد فرق كبير في الأداء بين وظائف السهم والوظائف العادية. يجب أن يعتمد الاختيار بينهما على حالات الاستخدام المحددة وسهولة القراءة.

س: هل يمكنني استخدام وظائف الأسهم في أساليب الكائن؟
ج: نعم، يمكن استخدام وظائف الأسهم في أساليب الكائنات، ولكن كن حذرًا لأنها لا تربط نفسها بهذا، مما قد يؤدي إلى سلوك غير متوقع.

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

تذكر أنه لا يوجد حل واحد يناسب الجميع، ويعتمد الاختيار بين الوظائف العادية ووظائف الأسهم في النهاية على المتطلبات المحددة للتعليمات البرمجية الخاصة بك وتفضيلات أسلوب البرمجة لديك.

بيان الافراج تم إعادة نشر هذه المقالة على: https://dev.to/kafeel_ahmad/mastering-javascript-functions-your-guide-to-normal-vs-arrow-functions-2onk?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ Study_golang@163 .com لحذفه
أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3