טוח ריאה או scope הוא המרחב קוד שבו לקוד יש גישה למשתנים ולפוניקציות.
זה הדבר הזה שכשאתם יוצרים פונקציה ב PHP המשתנים בה שייכים רק לה ומחוץ לפונקציה הם לא קיימים. גם ב javascript והם יכולים להכיל בתוכם פונקציות שלמות או אפילו את הדברים הבאים:
טווח(סקופ)
שאתם מגדירים ערך בג'אווה מסקריפט אתם מוסיפים אותו לטווח (סקופ) שאתם נמצאים בו.
אם פשוט תשתמשו ב
var answer = 42;
אז הוא יוגדר בטווח שאתם מצאים בו, הטווח שממנו מתחילים בדפדפנים הוא הטווח הגלובלי window.שאנחנו כותבים קוד שמתבסס על קוד של מישהו אחר אנחנו לא נרצה לדרוס את הערכים שהוא קבע.
כלומר, אם הוא הגדיר את הגירסה ל 1.0 ואנחנו רוצים להגדיר את הגרסה שלנו כ1.2 ואנחנו נשתמש באותו שם לערך, אז תהיה לנו בעיה. כי אחד מאיתנו ידרוס את הערך של השני.
אחת הדרכים לפתור את זה היא לתת קידמות לשמות שלנו למשל:
var fb_version = 1.2;
וככה נדע שאנחנו לא דורסים ערכים אחרים ושלא ידרסו את הערכים שלנו.דרך אחרת היא להשתמש בטווח משלנו.
מי שלא מכיר את הרעיון של טווח(סקופ) יכול לדמיין קופסאות.
יש את הקופסה הכללית, הראשית שבה הכל נמצא, ערכים, פונקציות ועוד קופסאות.
אם בקופסה הראשית יש ערך בשם
var name = "web-site";
ויש קופסה בשםvar add_on = {};
ובקופסה add_on יש ערך בשם name וערך בשם versionadd_on.name = "the greatest add-on";
add_on.version = "over 9000";
אז הן לא ידרסו אחת את השניה.add_on.version = "over 9000";
אפשר לדמיין את זה גם בתור ענפים של עץ
name = "web site"
add_on
|-name = "the greatest add-on"
|-version = "over 9000"
צריך לזכור שהערך version קיים רק בתוך add_on.
לפי דעתי הדרך הזאת עדיפה בגלל שהיא עוזרת לשמור על הכל מאורגן, בראש ובמבנה.
אובייקטים
כדי ליצור אובייקט בג'אווה סקריםט אפשר להשתמש בסוגריים מסולסלות (תתעלמו מהשימוש שלהן בפוקנציות(בלוקים)).var obj = {};
שיוצרים אובייקט בדרך הזאת אפשר להגדיר לו ערכים, התחביר הוא key: value ושאחרי כל "הכרזה" כזאת יהיה פסיק כדי להפריד אותן.
var obj = {
"name": "value",
"key2": "someothervalue",
"last": "one"
};
"name": "value",
"key2": "someothervalue",
"last": "one"
};
לא חובה להשתמש בסוגריים למפתחות.
(שימו לב שלאחרון אין פסיק בגלל שאין "הכרזה" אחריו להבדיל אותו ממנה.)
אפשר לקבל ערכים מאובייקט בעזרת הנקודה.
obj.name
יחזיר את הערך "value"אם נעשה ככה
obj.name = "name value";
אז הערך יוגדר מחדש.אפשר גם לשרשר (עד אינסוף, או במקביל שהזיכרון יגמר) אובייקטים בתוך אובייקטים
var obj = {
"sub": {
"name": "nameless endless"
}
};
"sub": {
"name": "nameless endless"
}
};
ואני אוכל לגשת אליו ככה:
obj.sub.name
ואותו העיקרון עובד על כל "ענף" שתרדו ב"עץ" האובייקטים שלכם.
פונקציות
בג'אווה סקריפט יש מספר דרכים להגדיר פונקציה.
פשוט להכריז עליה.
function the() {
...
}
...
}
להעביר את הפונקציה כערך. לא חובה לתת לה שם, אם תתנו לה תוכלו להשתמש בו רק בתוכה ולא מחוץ לה. (שימו לב ל; בסוף)
var the = function() {
...
};
...
};
להשתמש בקונסטרקטור(בנאי)
var the = new Function(arg1 [, arg2 ...], "...");
מעבירים פרמטרים והפרמטר האחרון הוא תוכן הפונקציה, כמחרוזת.
והאחרונה היא פונקציה אנונימית לגמרי, שאדבר עליה בהמשך.
function(arg) {...}
new Functiob("...")
new Functiob("...")
בכל טווח שתהיו בו יהיה מוגדר הערך this. אם אתם נמצאים בטווח הראשי בדפדפן אתם תראו שthis מכיל את window.
אם תהיו בטווח add_on ותבדקו מה יש בthis תקבלו את add_on.
כאשר אנחנו בפונקציה הערך this יכיל את הטווח שהריץ את הפונקציה, כלומר, אם תריצו את זה:
function whereAmI() {
return this;
}
whereAmI();
return this;
}
whereAmI();
תקבלו בחזרה את הטווח שבו אתם נמצאים, זה יכול להיות הwindow בדפדפן או האובייקט add_on אם נבצע את זה מתוכו
add_on = {
"whereAmI": function() {
return this;
}
};
add_on.whereAmI();
"whereAmI": function() {
return this;
}
};
add_on.whereAmI();
שימו לב שאפשר לגשת אל הפונקציה כמו כל ערך אחר באובייקט, אם נגש אל הפונקציה ללא סוגרים אז נקבל את הפנקציה עצמה, נוכל למשל לעשות את זה כדי להדגים
var whereAmI = add_on.whereAmI;
whereAmI();
whereAmI();
עכשיו תנסו להריץ את זה בטווח הגלובלי ותראו מה קורה.
הערה: בפונקציות יהיה מוגדר הערך arguments הוא יכיל מערך של כל הפרמטרים שניתנו לפונקציה, בעזרתו אפשר לכתוב פונקציות שמקבלות מספר פרמטרים לא יודע מראש.
שימוש בפונקציה כדי ליצור אובייקט
דרך נוספת ליצור אובייקט היא להשתמש בפונקציה.
קודם נגדיר פונקציה
function webobj() {
this.website = "phpguide.co.il"
}
this.website = "phpguide.co.il"
}
ואז ניצור מופע חדש של האובייקט
var here = new webobj();
עכשיו נוכל לפנות ל
here.website
ולקבל את הערך.
הייתרון הוא שרוצים ליצור מספר גדול של מופעים כאלו.
אם היו לנו הרבה כלי רכב היינו יכולים לעשות משהו כזה
function creatACar() {
this.weels = 4,
this.sits = 5
}
this.weels = 4,
this.sits = 5
}
וכדי ליצור מכונית חדשה לעשות
var standCar = new creatACar();
וכדי ליצור מכונית עם 42 מושבים לעשות ככה
var epicCar = new creatACar();
epicCar.sits = 42;
epicCar.sits = 42;
כמובן שלפונקציה creatCar נוכל להעביר פרמטרים שישפיעו על ההתנהגות שלה, ובתוכה נוכל להשתמש בלוגיקה (משפטי תנאי, לולאות וכל מה שיש לנו בג'אווה סקריפט).
הפעלת פונקציות.
הדרך הכי פשוטה לקרוא לפונקציה היא להוסיף ().
אם נעשה ככה
function foo() {
}
}
אז נגדיר בעצם את foo כפוקנציה, וכדי לקרוא לה נוכל לעשות
foo
();
אם נעשה ככה
var foo = function() {
};
};
אז תגדיר את foo כפונקציה, בדיוק כמו הדרך הקודמת, רק בצורה שונה, נוכל לרשום
foo();
נראה שההכרזה של פונקציה בעצם מחזירה פונקציה, זה אומר שנוכל לעשות ככה.
function() {
}();
}();
שמתם לב לסוגריים והפסיק שבסוף?
זאת נקראת פונקציה אנונימית שקוראת לעצמה. שם ערך אבל מסביר את עצמו.
var tafluae = function() {
return 42;
}();
return 42;
}();
מה אתם חושבים שיהיה בערך tafluae?
אם חשבתם על הערך 42 אז צדקתם.
זה מקביל ללרשום
function foo() {
return 42;
}
var tafluae = foo();
return 42;
}
var tafluae = foo();
שאנחנו נרצה לכתוב משהו ולוודא שהוא לא יתנגש עם דברים אחרים שפועלים אנחנו ניצור לנו טווח משלנו.
הסברתי על כמה דרכים ליצור טווח משלנו ע"י אובייקטים ופונקציות. אבל אם אנחנו נרצה ליצור לנו טווח נקי שיהיה בטוח להגדיר עליו ערכים נוכל להשתמש בפונקציה
אנונימית שקוראת לעצמה.
function() {
}();
}();
בטוח הפונקציה אנחנו נתהג כמו שהיינו כותבים בטווח הראשי.
אני מעדיף לעטוף את הפונקציה עצמה בעוד סט של סוגריים
(function() {
})();
})();
ככה שאני קורא את הקוד, אני יכול לדעת שזאת פונקציה אנונימית שקוראת לעצמה ואני לא צריך לנחש את זה.
דרך אחרת לקרוא לפונקציה היא בעזרת המתודה call. אנחנו נקרא בצורה כזאת לפונקציות כשאנחנו נרצה להפעיל אותן "מטווח אחר"
לצורך ההדגמה המשתנה bar יכיל פונקציה כלשהי
bar = function() {}
הסברתי על המשתנה this בפונקציות שמכיל את הטווח שממנו הפעילו אותן, אפשר לשנות אותו ע"י הפונקציה call ובעצם "להפעיל את הפונקציה מטווח אחר".
אם נעשה ככה
bar.call(add_on, arg1 [, arg2 ...]);
אז המשתנה this בפונקציה יכיל את add_on.
לcall אפשר להעביר מספר לא מוגדר מראש של פרמטרים שהיא תעביר לפונקציה.
הפונקציה aplly עושה פעולה זהה. היא מקבלת שני פרמטרים.
הפרמטר הראשון יגדיר את הthis של הפונקציה, בדיוק כמו בcall
הפרמטר השני יקבל מערך, את הערכים של המערך הוא יעביר כפרמטרים לפונקציה.
ההבדל הוא שאם בזמן הריצה של הסקריפט נרצה לשנות את מספר הפרמטרים נוכל, ע"י הסרה או הוספה של ערך במערך.
bar.apply(add_on, arg_array);
אבל בcall יש לנו מספר סטטי של פרמטרים בזמן ריצה.
תגובות לכתבה:
אני חייב לציין שזה המדריך הכי ברור לתכנות מונחה עצמים בג'אווה סקריפט שקראתי עד היום. למרות שהוא לא מספר על פרמטרים סטטיים, הורשה/דקורציה , אבל הוא בהחלט מביא את המבוא.
תודה.
הורשה זה כבר להתעסק עם הprototype ולא רציתי לגלוש.
אם אני אראה שאנשים מתעניינים אני אמשיך לכתוב על js.
אני שמח שזה ברור, הייתי בטוח שעשיתי בלאגן. :)
תמשיך תמשיך לכתוב, מאמר מצוין, מסביר מעולה! תודה רבה!
כן, גם אותי זה מעניין. באיחוד עם הסברים טובים וברורים כמו שלך.
כל הכבוד על המדריך
מדריך מעולה :)
אני ממליץ גם להוסיף שהפקודה var, היא זו שגורמת למשתנה להיות בטווח הנוכחי שבו הוא הוכרז, אך אם נגדיר את המשתנה ללא var, הוא יוגדר כ"גלובאלי".
לדוגמה הקוד הזה לא יעבוד: http://pastebin.com/n6W3ce61
וזה כן: http://pastebin.com/6WkevfeU
@iiddaannyy הקישורים שנתת בתגובה האחרונה שבורים. אולי כדאי לארגן שמירת קטעי קוד כאן (כמו PHPLive שיש כאן), כך שזה לא יקרה שוב.