Υποενότητα 6.3: Συναρτήσεις δόμησης

Εισαγωγή στις συναρτήσεις δόμησης - Constructor functions

Στην προηγούμενη υποενότητα,  μάθαμε σχετικά με αντικείμενα JavaScript. Αν και τα αντικείμενα μας δίνουν πολλές δυνατότητες, έχουν ένα μειονέκτημα, δεν είναι εύκολα επαναχρησιμοποιήσιμα.

Αυτό σημαίνει ότι εάν θέλουμε να έχουμε περισσότερα από ένα αντικείμενα με τις ίδιες ιδιότητες και μεθόδους σε μια σελίδα, δεν υπάρχει εύκολος τρόπος για να επιτευχθεί αυτό. 

Η λύση στα παραπάνω έρχεται με τη χρήση των συναρτήσεων δόμησης - constructor functions. 

Με τις συναρτήσεις δόμησης - constructor functions, μπορούμε να δημιουργήσουμε όσες αντίγραφα χρειαστούμε, χωρίς να γράψουμε υπερβολικό κώδικα..  

Για παράδειγμα, φανταστείτε ότι θέλουμε να δημιουργήσουμε 1.000 κύκλους που κινούνται τυχαία (θα μάθουμε πώς να το κάνουμε αυτό σε μια άλλη υποενότητα).

Εάν επρόκειτο να το κάνουμε αυτό χρησιμοποιώντας αντικείμενα JavaScript, θα έπρεπε να γράψουμε τον ίδιο κώδικα, με διαφορετικά ονόματα, 1000 φορές.

Χρειαζόμαστε όμως μόνο μία constructor function για να επιτευχθεί το ίδιο αποτέλεσμα.

Σύνταξη συνάρτησης δόμησης

Ας πάρουμε το παράδειγμα του αντικειμένου JavaScript

var myObject = { 
name:"myName", 
age:20, 
job:"myJob" 
};

και να δούμε πώς μπορεί να μετατραπεί σε συνάρτηση δόμησης.

Σε αυτήν την περίπτωση, θα δημιουργούσαμε πρώτα έναν τύπο αντικειμένου χρησιμοποιώντας μια συνάρτηση δόμησης:

function myObject (n,a,j) { 
this.name= n; 
this.age = a; 
this.job=j; 
}

Γενικά σε μια constructor function:

• οι παράμετροι - parameters περνούν μέσα στη συνάρτηση, στην περίπτωση αυτή, n, a, j είναι οι παράμετροι.
• κάθε ιδιότητα - property αρχίζει με τη λέξη-κλειδί this.
• this δεν έχει προεπιλεγμένη τιμή, η τιμή θα οριστεί όταν δημιουργηθεί ένα νέο αντικείμενο.
• το σύμβολο εκχώρησης - assignment χρησιμοποιήθηκε μεταξύ της ιδιότητας και της τιμής που θα οριστεί από την παράμετρο
• κάθε ιδιότητα χωρίζεται από το επόμενο με ένα ερωτηματικό -semicolon

Για να χρησιμοποιήσουμε τη constructor function, πρέπει να δημιουργήσουμε ένα αντικείμενο. Ο τρόπος δημιουργίας αυτού του αντικειμένου είναι καλώντας τη λειτουργία του κατασκευαστή με τη λέξη-κλειδί new. 

Παράδειγμα:

var him = new myObject ("John","30","developer");

Τώρα, οι τιμές που δίνονται στο αντικείμενο "him" έχουν περάσει μέσα στη συνάρτηση δόμησης.

Μπορούμε να καλέσουμε τις ιδιότητες της συνάρτησης δόμησης με την ίδια λογική που χρησιμοποιούμε για τα αντικείμενα JavaScrip.

Για παράδειγμα, ένας από τους τρόπους πρόσβασης στην ιδιότητα name θα είναι:

console.log(him.name);

Μέθοδοι στη συνάρτηση δόμησης

Παρόμοια με τα αντικείμενα JavaScript, οι συναρτήσεις δόμησης μπορούν επίσης να έχουν μεθόδους.

Παράδειγμα μεθόδου μέσα στη συνάρτηση δόμησης:

function myObject (n,a,j) { 
this.name= n; 
this.age = a; 
this.job=j; 
this.nameAge = function(){
                return this.name + " " + this.age;
    }
}

Ας δημιουργήσουμε δύο νέα  objects:

Object 1

var student1 = new myObject("Helen");

Object 2

var student2 = new myObject("Aris","24");

Πώς θα καλούσατε τη μέθοδο για το Object 2;

Απάντηση:

Ποιο θα ήταν το αποτέλεσμα αν καλέσουμε τη μέθοδο στο object 1; Ανοίξτε την κονσόλα σας και πληκτρολογήστε τον κατάλληλο κώδικα για να δείτε το αποτέλεσμα.

Answer:

Άσκηση

1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice06.3.03.html στον φάκελο "yourNameWEB2JS".
2. Χρησιμοποιώντας τον παραπάνω κώδικα, δημιουργήστε 2 new objects. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

Solution:

Προσθήκη Ιδιοτήτων και Μεθόδων

Υπάρχουν δύο διαφορετικές επιλογές όταν θέλουμε να δημιουργήσουμε νέες ιδιότητες / μεθόδους.

Η πρώτη επιλογή είναι να τα δημιουργήσουμε μόνο για ένα από τα δημιουργημένα αντικείμενα.

Παράδειγμα:

function myObject (n,a,j) { 
this.name= n; 
this.age = a; 
this.job=j; 
this.nameAge = function(){
                return this.name + " " + this.age;
    }
}

var student1 = new myObject("Aris","24");

var student2 = new myObject("Peter","24");

student1.hobby = "cinema";

student1.addMethod = function () { return this.job + " " + this.hobby; };

Σε αυτή την περίπτωση, μόνο το αντικείμενο "student1" έχει τη νέα ιδιότητα και τη μέθοδο.

Η ιδιότητα πρέπει να έχει μια εκχωρηθείσα τιμή ενώ η μέθοδος ακολουθεί την ίδια σύνταξη με αυτή που χρησιμοποιείται μέσα στη συνάρτηση δόμησης.

Τι νομίζετε ότι θα συμβεί αν προσπαθήσουμε να αποκτήσουμε πρόσβαση στο αντικείμενο "hobby" στο αντικείμενο "student2"; Ανοίξτε την κονσόλα σας και πληκτρολογήστε τον κατάλληλο κώδικα για να δείτε το αποτέλεσμα.

View source:

Η δεύτερη επιλογή είναι να προσθέσετε ιδιότητες ή μεθόδους, απευθείας μέσα στη συνάρτηση δόμησης.

Σε αυτή την περίπτωση, χρησιμοποιούμε την ίδια σύνταξη που συζητήθηκε στο προηγούμενο κεφάλαιο. Οι ιδιότητες και οι μέθοδοι που προστίθενται στο εσωτερικό της συνάρτησης δόμησης εφαρμόζονται σε όλα τα δημιουργημένα αντικείμενα.