מדריך 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>
תגובות בפייסבוק