פונקציה

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

function named() {}
var handler = function() {}

תראו הרבה פונקציות ללא שם בקוד jQuery:

 $(document).ready(function() {});
 $("a").click(function() {});
 $.ajax({
   url: "someurl.php",
   success: function() {}
 });

סוג של הפונקציה הוא   "function"   .

ארגומנטים

בתוך פונקציה תמיד זמין משתנה   «arguments»  .

function log(x) {
  console.log(typeof x, arguments.length);
}
log(); // "undefined", 0
log(1); // "number", 1
log("1", "2", "3"); // "string", 3

אובייקט של ארגומנטים גם מכיל מאפיין   «callee»   , שפונה לפונקציה שאתם נמצאים בה. לדוגמה:

 var awesome = function() { return arguments.callee }
 awesome() == awesome // true

Context, Call and Apply

ב- JavaScript, משתנה   "this"   מתייחס לקונטקסט הנוכחי. בברירת מחדל   "this" מתיחחס לאובייקט של החלון. בתוך הפונקציה ההקשר הזה יכול להשתנות, תלוי איך פונקציה נקראת.

כל מטפלי האיריעים ב- jQuery נקראים עם אלמנט מטופל כמו ההקשר.

$(document).ready(function() {
  // this refers to window.document
});
$("a").click(function() {
  // this refers to an anchor DOM element
});

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

function scope() {
  console.log(this, arguments.length);
}
scope() // window, 0
scope.call("foobar", [1,2]); // "foobar", 1
scope.apply("foobar", [1,2]); // "foobar", 2

היקף

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

 // global
 var x = 0;
 (function() {
   // private
   var x = 1;
   console.log(x); // 1
 })();
 console.log(x); // 0

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

סגרים

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

function create() {
  var counter = 0;
  return {
    increment: function() {
      counter++;
    },
    print: function() {
      console.log(counter);
    }
  }
}
var c = create();
c.increment();
c.print(); // 1

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

Proxy Pattern

צירוף את כל הידע מעל, נותן לך, כי למפתח JavaScript הרבה כוח. דרך אחת לשלב את זה היא ליישם תוונית פרוקסי ב- JavaScript, מאפשר בסיס של היבט תכנות מונחים (АОР):

(function() {
  // log all calls to setArray
  var proxied = jQuery.fn.setArray;
  jQuery.fn.setArray = function() {
    console.log(this, arguments);
    return proxied.apply(this, arguments);
  };
})();

מבנה מעל מכניס קוד שלו בתוך הפונקציה, כדי להסתיר משתנה «פרוקסי». שיטה setArray שמוגשת על ידי jQuery נשמרת בסגר ונדרסת. בהמשך פרוקסי רושם כל הקריאות לשיטה ומעביר אותם לשיטה אמיתית. שימוש ב-   apply(this, arguments)   נותן ביטוח, שקורא לא יבחין בהבדל בין שיטה אמיתית ופרוקסית.