פונקציות JavaScript

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

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

ביטויי פונקציה

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

שים את ההצהרה הזו ב- JavaScript ביטוי (כמו הקצאה או ביטוי אריתמטי), הוא הופך להיות פונקציה ביטוי.

// פונקציה הצהרה function_name () ; // פונקציה ביטוי var function_name = function () ; 

כל ההצהרות JavaScript מועלות (הועלו בהיקף) במהלך ההערכה. לפיכך כתיבת קריאה לפונקציה לפני הצהרת הפונקציה היא בסדר (מאז ההצהרה יועברו למעלה ממילא).

function_name (); // קריאה לפונקציה [WORKS] function_name function () ; 

ביטויים פונקציה עם זאת לא הונפו מאז הפונקציות הופכות חלק הביטויים אינם הצהרות עצמאיות.

function_name (); // קריאה לפונקציה [לא יעבוד] var function_name = function () ; 

מופעלת מיד הביטוי פונקציה (IIFE)

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

להלן שני תחביר הנפוץ ביותר ליצור IIFE:

(function_function_name function () / body ()); 

ו

(function_function_name function () / body body ()); 

הסוגריים סביב הצהרת הפונקציה ממירים אותו לביטוי ולאחר מכן מוסיפים אותו () לאחר שהוא קורא את הפונקציה. אתה יכול להשתמש בדרכים אחרות כדי ליצור IIFE כל עוד אתה מוסיף () אחרי ביטוי פונקציה (כמו להלן), אבל השיטות המועדפות הן שני לעיל.

/ / כמה דרכים ליצור IIFEs! הפונקציה () / * ... * / (); + function () / * ... * / (); פונקציה חדשה () / * ... * /; 

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

var page_language = (function () var lang; // קוד כדי לקבל את השפה של הדף לחזור לאנג;) (); 

הקוד כדי לקבל את שפת הדף מבצע רק פעם אחת (רצוי לאחר טעינת הדף). התוצאה מאוחסנת ב שפה לשימוש מאוחר יותר.

שיטות

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

var calc = add: function (a, b) return a + b, sub: function (a, b) return a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); / 78 

ה הוסף ו :05 פונקציות הן שיטות קל אובייקט.

עכשיו עבור פונקציה בתוך דוגמה פונקציה:

(a) (פונקציית החזרה (b) return a + b; console.log (הוסף (1) (2)); / / פלט הוא 3 

הפונקציה האנונימית המוחזרת היא שיטת תפקוד הוסף.

הערה: מאז פרמטר (א) של פונקציה הוסף בדוגמה לעיל זמין עבור הפונקציה הבאה לקרוא, סוג זה של תהליך נקרא קארי.

בונים

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

הפונקציה פירות () שם var, משפחה; // שם מדעי ומשפחה this.getName = function () return name;; this.setName = function (value) name = value; this.getFamily = function () return family;; this.setFamily = function (value) family = value;  var apple = New Fruit (); apple.setName ("Malus domestica"); apple.setFamily ("Rosaceae"); var orange = New Fruit (); orange.setName ("פרי הדר ?? ?? ??¢?? ?? ("רוטסאי"); console.log (orange.getName ()); / "פרי הדר" ??¢?? ?? () (")". 

פונקציות חצים (ES6 Standard) [רק ב- Firefox]

הגדרת פונקציה חדשה מ- ES6 Standard מספקת תחביר קצר יותר לביטוי פונקציה. התחביר הוא

() => / * body * / 

פונקציית מדגם זו:

var sing = function () console.log ('שירה ...'); 

הוא זהה ל:

var sing = () = = console.log ('שירה ...'); 

פונקציות החץ הן אנונימיות ואין להן משלו זה ערך, זה בתוך זה יהיה זהה זה בקוד המצורף. כמו כן, אתה לא יכול לשנות את זה עם בנאי עם חדש מילת מפתח.

הם שימושיים כאשר אתה רוצה זה בתוך פונקציה להיות זהה מבחוץ ותחביר קצר שלה עושה קוד לכתיבה פונקציה בתוך פונקציה תמציתית (כמו להלן)

setInterval (function () console.log ('message'), 1000); 

לתוך

setInterval (() => console.log ('הודעה'), 1000); 

פונקציות גנרטור (ES6 Standard) [רק ב- Firefox]

עוד הגדרה חדשה של פונקציה ES6 Standard הוא פונקציה גנרטור. פונקציות גנרטור מסוגלות לעצור ולהמשיך בביצועה. התחביר שלה הוא:

function * function_name ()  

או

function * function_name ()  

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

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

להלן דוגמה פשוטה:

פונקציה * generator_func (count) עבור (var i = 0; i 
הנה דוגמה נוספת:
 
פונקציה * randomIncrement (i) (תשואה i + 3; תשואה i + 5; תשואה i + 10; תשואה i + 6;  var itr = randomIncrement (4); console.log (ערך itr.next (). // 7 console.log (ערך itr.next (). // 9 console.log (ערך itr.next (). // 14 
 
יש גם תשואה * ביטוי אשר מעביר את הערך לתפקוד גנרטור אחר
 
* פירות (פירות) (תשואה * ירקות (פירות); תשואה "ענבים";  פונקציה * ירקות (פירות) תשואה פרי + ± ותרד; תשואה פירות + "ו ברוקולי"; תשואה פרי + "ומלפפון";  var itr = פירות ("Apple"); console.log (ערך itr.next (). // "Apple and Spinach" console.log (ערך itr.next (). // "אפל וברוקולי" console.log (ערך itr.next (). // "Apple and Cucumber" console.log (ערך itr.next (). // "ענבים" console.log (ערך itr.next (). // und מוגדר 
 
פונקציות הגנרטור הן שימושיות אם אתה רוצה לעבור את הערכים בזה אחר זה בנקודה המועדפת עליך בקוד על-ידי השהייתה, במקום לעבור כמו בלולאה דרך מערך.
 
סיכום
 
כללתי רשימה של הפניות בהמשך, שם תמצא קישורים להפניות ומאמרים המתעמקים בנושאים שונים בנפרד. שתי הפונקציות הסטנדרטיות של ES6 יעבדו רק ב- Firefox כרגע.
 
הפניות
 
שפת ECMAScript: פונקציות וחוגים
 
ביטוי פונקציה מידית (IIFE)
 
את היסודות של ES6 גנרטורים
 
פונקציות חץ
 
פונקציה - רשת המפתחים של מוזילה