رد فعل وظائف السهم ES6
وظائف السهم
تسمح لنا وظائف الأسهم بكتابة صيغة وظيفية أقصر:
قبل:
hello = function() {
return "Hello World!";
}
مع وظيفة السهم:
hello = () => {
return "Hello World!";
}
يصبح أقصر! إذا كانت الوظيفة تحتوي على عبارة واحدة فقط ، وكانت العبارة تُرجع قيمة ، فيمكنك إزالة الأقواس والكلمة
الأساسيةreturn
:
دالات السهم ترجع القيمة بشكل افتراضي:
hello = () => "Hello World!";
ملاحظة: يعمل هذا فقط إذا كانت الوظيفة لها عبارة واحدة فقط.
إذا كانت لديك معلمات ، فقم بتمريرها داخل الأقواس:
وظيفة السهم مع المعلمات:
hello = (val) => "Hello " + val;
في الواقع ، إذا كان لديك معامل واحد فقط ، فيمكنك تخطي الأقواس أيضًا:
الحصول على شهادة!
95 دولارًا ENROLL
ماذا عن this
؟
يختلف التعامل مع this
وظائف السهم أيضًا مقارنة بالوظائف العادية.
باختصار ، مع وظائف السهم لا يوجد ربط
this
.
في الوظائف العادية ، this
تمثل الكلمة الأساسية الكائن الذي يسمى الوظيفة ، والتي يمكن أن تكون النافذة أو المستند أو الزر أو أي شيء آخر.
باستخدام وظائف السهم ، تمثل this
الكلمة الأساسية دائمًا الكائن الذي حدد وظيفة السهم.
دعونا نلقي نظرة على مثالين لفهم الفرق.
يستدعي كلا المثالين طريقة ما مرتين ، أولاً عند تحميل الصفحة ، ومرة أخرى عندما ينقر المستخدم على زر.
يستخدم المثال الأول دالة عادية ، ويستخدم المثال الثاني دالة سهم.
تُظهر النتيجة أن المثال الأول يُرجع كائنين مختلفين (نافذة وزر) ، ويعيد المثال الثاني كائن الرأس مرتين.
مثال
مع دالة عادية ، this
يمثل الكائن الذي يسمى الوظيفة:
class Header {
constructor() {
this.color = "Red";
}
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
مثال
باستخدام وظيفة السهم ، this
يمثل كائن الرأس بغض النظر عمن دعا الوظيفة:
class Header {
constructor() {
this.color = "Red";
}
//Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
تذكر هذه الاختلافات عند العمل مع الوظائف. في بعض الأحيان يكون سلوك الوظائف العادية هو ما تريده ، وإذا لم يكن الأمر كذلك ، فاستخدم وظائف الأسهم.