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

יצירת אובייקט נעשית כך:

<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>