وظائف الجسر جافا سكريبت

تم إدخال الدوال المدمجة في ES6.

تسمح الدالة المدمجة لنا بكتابة دوال أقصر:

النحو

let myFunction = (a, b) => a * b;

جربها بنفسك

قبل:

hello = function() {
  return "Hello World!";
}

جربها بنفسك

بعد استخدام الدالة المدمجة:

hello = () => {
  return "Hello World!";
}

جربها بنفسك

يصبح قصيرًا حقًا! إذا كان لديك سطر واحد فقط في الدالة، وكان ذلك يعود إلى قيمة، يمكنك إزالة الأقواس والكلمة المفتوحة return: return الكلمة المفتوحة:

قيمة العودة الافتراضية للدالة المدمجة:

hello = () => "Hello World!";

جربها بنفسك

ملاحظة:هذا ينطبق فقط عندما يكون لديك سطر واحد فقط في الدالة.

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

الدالة المدمجة بمعاملات:

hello = (val) => "Hello " + val;

جربها بنفسك

في الواقع، إذا كان هناك فقط معامل واحد، يمكنك أيضًا تجاوز الأقواس:

الدالة المدمجة بدون أقواس:

hello = val => "Hello " + val;

جربها بنفسك

هذا ماذا نفعل؟

مقارنة بالدوال العادية، تتعامل الدوال المدمجة مع هذا المعالجة أيضًا.

بشكل مختصر، لا يؤثر استخدام الدالة المدمجة على هذا التعيين.

في الدوال العادية، الكلمة المفتوحة هذا الكائن الذي يدعو الدالة، يمكن أن يكون نافذة أو مستندًا أو زرًا أو أي شيء آخر.

بالنسبة للدوال المدمجة،هذا الكلمة المفتوحة دائمًا تمثل الكائن الذي تم تعريف الدالة المدمجة.

دعنا نرى مثالين لفهم الفرق.

كلا المثالين قد تم دعوتهما مرتين، مرة واحدة عند تحميل الصفحة، ومرة أخرى عند ضغط المستخدم على الزر.

المثال الأول يستخدم الدالة العادية، والمثال الثاني يستخدم الدالة المدمجة.

结果显示 في المثال الأول يعودان إلى كائنين مختلفين (window و button)، وفي المثال الثاني يعودان إلى كائن window مرتين، لأن كائن window هو "مالك" الدالة.

مثال

للدوال العادية، الكلمة المفتوحة this تمثل الكائن الذي يدعو الدالة:

// دالة عادية:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// إدعاء لـ window دالة
window.addEventListener("load", hello);
// إدعاء لـ button دالة
document.getElementById("btn").addEventListener("click", hello);

جربها بنفسك

مثال

استخدمت الدالة المدمجة، فإن هذا تعني مالك الدالة:

// دالة الموجهة للأسفل:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// إدعاء لـ window دالة
window.addEventListener("load", hello);
// إدعاء لـ button دالة
document.getElementById("btn").addEventListener("click", hello);

جربها بنفسك

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

دعم المتصفحات

التالية في الجدول تشير إلى إصدارات المتصفحات التي تدعم بشكل كامل وظيفة الدوال الموجهة للأسفل:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
سبتمبر 2015 يوليو 2015 مايو 2013 سبتمبر 2016 سبتمبر 2015