JavaScript Objects Introduction

1 ביוני 2012

תגיות: , , , , ,
3 תגובות

הקדמה:

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

שיטה זו היא השיטה "הקלה" אך הפרימיטיבית, ולמעשה די מוזר בעיני שעם כל ההתקדמות שלנו בעולמות Object Oriented עדיין בהרבה מקומות עובדים בשיטה הפרימיטיבית בשפה זו.

השיטה השנייה והנכונה, היא לעבוד עם אובייקטים – מסתבר שב – Javascript ניתן להגדיר אובייקטים, להגדיר public, private של משתנים ומתודות – ואפילו אפשר לרשת.

בפוסט זה נכיר את השיטות השונות להגדרת אובייקטים ב – Javascript.

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

 

למעשה כדי לבנות אובייקטים קיימים כמה דרכים, ונכיר את כולם.

Object

הצורה הראשונה והפשוטה ביותר היא להשתמש עם Object – הכתיבה תהיה בסגנון הזה:

var person = new Object();

person.firstName = "Shlomo";

person.lastName = "Goldberg";

person.getFullName = function () {

    return this.firstName + " " + this.lastName;

}

 

function btn_click() {

    alert(person.getFullName());

}

 

 

אנחנו נייצר מופע חדש של Object נוכל להוסיף לו משתנים ופונקציות, למעשה מאחורי הקלעים נבנה סוג של Associative Array מה שיאפשר לנו גם לכתוב קוד כזה:

person["age"] = 27;

 

וכמובן נוכל לגשת באותה צורה לכל המשתנים שהגדרנו (גם אם הגדרנו אותם בשיטה הראשונה)

היות שזה המצב נוכל גם לכתוב פונקציה כזו:

function btn_click() {

    for (var i in person) {

        var prop = person[i];

        if (typeof (prop) != 'function') {

            alert(person[i]);

        }

    }

}

 

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

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

 

Object Literal

די דומה לשיטה הקודמת – אך כתיבה יותר נכונה:

var person =

{

    firstName: "Shlomo",

    lastName: "Goldberg",

    getFullName: function () {

        alert(this.firstName + " " + this.lastName)

    }

};

 

למעשה זה בדיוק אותו דבר כמו להשתמש ב – Object ואפילו לאחר ההגדרה של person נוכל עדיין לכתוב את הקוד הבא:

person["age"] = 27;

 

נשתמש בשיטה זו ברוב המקרים בהם נרצה להגדיר singelton – למעשה כמעט בכל מקום שנרצה להשתמש ב – Object נעדיף להשתמש ב – Literal Object.

 

function

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

מה הכוונה – כשהשתמשנו בשיטה הראשונה עם new Object למעשה יצרנו מופע חדש של מתודת Object (שהוא האבא של כל האובייקטים ב – javascript)

כדי להגדיר אובייקט נכתוב קוד כזה:

var Person = function (firstName, lastName) {

    this._firstName = firstName;

    this._lastName = lastName;

 

    this.getFullName = function () {

        return this._firstName + ' ' + this._lastName;

    }

}

 

 

 

function btn_click() {

    var shlomo = new Person('shlomo', 'goldberg');

    alert(shlomo.getFullName());

}

 

כפי שאפשר לראות המתודה Person הוגדרה עם אות תחילית גדולה (שזו הקונבנציה לאובייקטים – בשונה ממתודות "רגילות")

לאחר ההגדרה של האובייקט נוכל להפעיל עליה את האופרטור new שיפעיל את הבנאי של האובייקט – מה שיוחזר יהיה מופע של person.

this הוא תמיד מצביע לאובייקט שדרכו מפעילים את המתודה (במקרה שלנו המשתנה shlomo), מה יקרה עם מישהו יכתוב קוד כזה:

function btn_click() {

    var shlomo = Person('shlomo', 'goldberg');

    alert(shlomo.getFullName());

}

 

הערך של this בתוך Person יהיה למעשה Window – מה שיגרום להתנהגויות בלתי צפויות של האובייקט שלנו, ולכן מקובל לכתוב קוד כזה:

 

var Person = function (firstName, lastName) {

 

    if (this === window)

        return new Person(firstName, lastName);

 

    this._firstName = firstName;

    this._lastName = lastName;

 

    this.getFullName = function () {

        return this._firstName + ' ' + this._lastName;

    }

}

 

כך אנחנו מוודאים שתמיד יוחזר מופע של Person. (על ההבדל בין == ל – === בפוסט אחר)

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

 

var shlomo = Person('shlomo', 'goldberg');

var func = shlomo.getFullName;

func();

 

מכיוון ששוב this כעת יהיה Window, ולכן מקובל לשמור את הערך של this בתוך private member של האובייקט.

 

var Person = function (firstName, lastName) {

 

    if (this === window)

        return new Person(firstName, lastName);

 

    var self = this;

 

    this._firstName = firstName;

    this._lastName = lastName;

 

    this.getFullName = function () {

        return self._firstName + ' ' + self._lastName;

    }

}

 

הגדרה של משתנים (ופונקציות) בעזרת var יהיו private, נשמור את הערך של this במשתנה בשם self, ובפונקציות ניגש בעזרת self, כך נוודא שתמיד יהיה לנו את הערכים הנכונים.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

3 תגובות

  1. מיקי פטרסקו6 ביוני 2012 ב 10:41

    פוסט מצויין, ומרגישים שאתה בא מעולם ה .net
    הייתי ממליץ לך ולמבקרים לקרוא את המאמר:
    http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/

    זה החלק הראשון מתוך שלושה חלקים מצויינים.
    בהצלחה.

    הגב
  2. תודה13 באוגוסט 2013 ב 6:34

    איפה הפוסט על ההבדל בין הבדיקה בעזרת == לבין בדיקה בעזרת === ב – javascript

    הגב