העברת פונקציות כארגומנטים לפונקציות ב-JS

ל-Javascript יש תכונות מופלאות, שאחת מהן היא שניתן להעביר פונקציה בתור ארגומנט לפונקציה אחרת . במדריך זה נדגים את התכונה הזו, וגם נראה את ההשלכות שיש לתכונה על כתיבת javascript ו-jQuery באופן מסודר ומובן יותר.

בוא נראה דוגמה לפונקציה פשוטה של JS. בדוגמה, פונקציה שמחברת שני ארגומנטים, ומציגה את התוצאה בקונסולה.

function add(f,s){
   console.log(f+s);
}
  
add(1,2);

כפי שניתן להעביר ארגומנטים רגילים, ניתן להעביר פונקציה כארגומנט . בדוגמה זו, נעביר פונקציית callback כארגומנט.

function add(f,s,callback){
  console.log(f+s);
}
 
add(1,2,function(){
  console.log('callback');
});

זה לא מספיק להעביר את הפונקציה, צריך גם לקרוא לה.

function add(f,s,callback){
  console.log(f+s);
  callback();
}
  
add(1,2,function(){
  console.log('callback');
});

והתוצאה היא שפונקציה ה-callback תרוץ בסוף. כפי שניתן לראות בקונסולה:

בשביל הסדר, ניתן להפריד את פונקציית ה-callback, ולהעביר אותה כארגומנט בלבד. לדוגמה:

function add(f,s,callback){
  console.log(f+s);
  callback();
}
  
function after(){
  console.log('after');
}
  
add(1,2,after);

וזו התוצאה:

ניתן להעביר את פונקציית ה-callback כארגומנט אופציונלי, אם עוטפים את הקריאה לפונקציה בתנאי:

function add(f,s,callback){
  console.log(f+s);
  if(callback){
    callback();
  }
}
  
function after(){
  console.log('after');
}
  
add(1,2,after);

זו גם דרך מסודרת יותר לכתוב jQuery, על ידי העברת פונקציית ה-callback כארגומנט:

(function($){
  function clickHandle(e){
    e.preventDefault();
    alert('clicked');
  }
  
  $('#btn').on('click',clickHandle);
}(jQuery));

לכל מדריכי ה-javascript

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים