וובמאסטר - תיכנות ובניית אתרים

מדריך JS - יצירת אובייקטי משתמש

אורי בן אהרון/‏ 10 מרץ, 2004
F+
F-
יצירת אובייקט נעשית כך:

<script type="text/javascript">
    function myFunction()
    {
    }

    myObject = new myFunction(); 
</script> 
יצרנו אובייקט משלנו, אובייקט myFunction. הפונקציה myFunction() היא ה-constructor של האובייקט. (שימו לב, שלא קראנו לפונקציה באופן נורמלי, אלא הוספנו את המילה new לפניה). אם יצירת האובייקט הייתה נראית כך:

<script type="text/javascript">
    function myFunction()
    {
        return 22;
    }
    myObject = myFunction();
</script> 
המשתנה myObject היה מכיל את הערך 22, ולא את האובייקט myFunction(). כל זה נחמד מאוד, אבל בשביל מה צריך את זה? מפני שאפשר להצמיד לאובייקט ערכים, מתודות ותכונות. לדוגמה:

<script type="text/javascript">
    function myFunction()
    {
    }
    myObject = new myFunction();
    myObject.StringValue = "This is a String!"
    document.write(myObject.StringValue)
</script> 
ידפיס על המסך This is a String! אבל כאן, יצרנו את התכונה StringValue רק ל-myObject, ולא לאובייקט myFunction(). איך ניצור תכונות ומתודות לכל האובייקט? באמצעות this. לדוגמה:

<script type="text/javascript">
    function myFunction()
    {
        this.StringValue="This is a String!"
    }
    myObject = new myFunction();
    document.write(myObject.StringValue)
</script> 
גם כאן, יודפס על המסך This is a String! ההבדל הוא שכעת, שבכל אובייקטי myFunction שניצור, התכונה StringValue קיימת. אפשר גם לשנות את התכונה StringValue מחוץ לאובייקט כך:

<script type="text/javascript">
    function myFunction()
    {
        this.StringValue="This is a String!"
    }
    myObject = new myFunction();
    myObject.StringValue = "The StringValue for myObject"
    document.write(myObject.StringValue)
</script> 
כעת יודפס על המסך The StringValue for myObject, אפשר גם להעביר ל-constructor ארגומנטים. כך:

<script type="text/javascript">
    function myFunction(StringValue)
    {
        this.StringValue=StringValue
    }
    myObject = new myFunction("The StringValue argument");
    document.write(myObject.StringValue)
</script> 
יודפס על המסך The StringValue argument.



מתודות

ניצור אובייקט Square, כלומר אובייקט ריבוע.

<script type="text/javascript">
    function Square(height)
    {
        this.Height=height
        this.Width=height
    }
    bigSquare = new Square(50)
    smallSquare = new Square(2)
</script> 
כעת לאובייקט הריבוע שלנו יש שתי תכונות, Height ו-Width. עכשיו נגדיר שתי פונקציות, שישמשו מאוחר יותר כמתודות:
<script type="text/javascript">
    function getArea()
    {
        return (this.Height*this.Width)
    }
    function getPerimeter()
    {
        return (this.Height*4)
    }
</script> 
הפונקציות האלה פשוטות מאוד, חוץ מדבר אחד: מה מוחזר מ-this.Width ו-this.Height? this תמיד מתייחס לאובייקט הנוכחי, במקרה שלנו, אובייקט Square, אז this.Width ו-this.Height מתייחסים לתכונות Height ו-Width של Square. אז איך הופכים את הפונקציות האלו למתודות של האובייקט Square? משנים קצת את ה-constructor של Square:

<script type="text/javascript">
    function Square(height)
    {
        this.Height=height;
        this.Width=height;
        this.getArea=getArea;
        this.getPerimeter=getPermiter;
    }
</script> 
כעת, אפשר להשתמש בזה כך:

<script type="text/javascript">
    document.write("bigSquare's Perimeter: " + bigSquare.getPerimeter() )
    document.write("smallSquare's Area: " + smallSquare.getArea())
</script> 
תגיות: JS‏  /  Javascript‏  /  סקריפט‏  /  אובייקט‏  /  object‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות