وظيفة سهم جافا سكريبت
تم تقديم وظائف السهم في ES6.
تسمح لنا وظائف الأسهم بكتابة صيغة وظيفية أقصر:
let myFunction = (a, b) => a * b;
قبل:
hello = function() {
return "Hello World!";
}
مع وظيفة السهم:
hello = () => {
return "Hello World!";
}
يصبح أقصر! إذا كانت الوظيفة تحتوي على عبارة واحدة فقط ، وكانت العبارة تُرجع قيمة ، فيمكنك إزالة الأقواس والكلمة
الأساسيةreturn :
دالات السهم ترجع القيمة بشكل افتراضي:
hello = () => "Hello World!";
ملاحظة: يعمل هذا فقط إذا كانت الوظيفة لها عبارة واحدة فقط.
إذا كانت لديك معلمات ، فقم بتمريرها داخل الأقواس:
وظيفة السهم مع المعلمات:
hello = (val) => "Hello " + val;
في الواقع ، إذا كان لديك معامل واحد فقط ، فيمكنك تخطي الأقواس أيضًا:
ماذا عن this؟
يختلف التعامل مع thisوظائف السهم أيضًا مقارنة بالوظائف العادية.
باختصار ، مع وظائف السهم لا يوجد ربط
this.
في الوظائف العادية ، thisتمثل الكلمة الأساسية الكائن الذي يسمى الوظيفة ، والتي يمكن أن تكون النافذة أو المستند أو الزر أو أي شيء آخر.
مع وظائف السهم ، تمثل thisالكلمة الأساسية دائمًا الكائن الذي حدد وظيفة السهم.
دعونا نلقي نظرة على مثالين لفهم الفرق.
يستدعي كلا المثالين طريقة ما مرتين ، أولاً عند تحميل الصفحة ، ومرة أخرى عندما ينقر المستخدم على زر.
يستخدم المثال الأول دالة عادية ، ويستخدم المثال الثاني دالة سهم.
تظهر النتيجة أن المثال الأول يُرجع كائنين مختلفين (نافذة وزر) ، ويعيد المثال الثاني كائن النافذة مرتين ، لأن كائن النافذة هو "مالك" الوظيفة.
مثال
مع دالة عادية thisتمثل الكائن الذي يستدعي الوظيفة:
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
مثال
مع وظيفة السهم thisيمثل
صاحب الوظيفة:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
تذكر هذه الاختلافات عند العمل مع الوظائف. في بعض الأحيان يكون سلوك الوظائف العادية هو ما تريده ، وإذا لم يكن الأمر كذلك ، فاستخدم وظائف الأسهم.
دعم المتصفح
يحدد الجدول التالي إصدارات المستعرض الأولى مع الدعم الكامل لوظائف السهم في JavaScript:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |