Εισαγωγή στο Object Oriented JavaScript

Για κάποιο λόγο υπάρχει μια τάση στη βιομηχανία πληροφορικής να υποστηρίζει ότι εάν δεν χρησιμοποιείτε μεθόδους Object Oriented Programming (OOP), τότε δεν είστε «πραγματικός προγραμματιστής». Αυτό είναι στην πραγματικότητα μια κάπως ανόητη στάση που πρέπει να ακολουθήσουμε, επειδή υπάρχουν πολλές καταστάσεις όπου το OOP δεν είναι ο καταλληλότερος τρόπος αντιμετώπισης ενός προβλήματος. Αυτό είναι το ελάττωμα σε γλώσσες όπως η Java που αναγκάζουν το OOP σε κάθε εργασία προγραμματισμού είτε το χρειάζεστε είτε όχι.

Η JavaScript (η οποία δεν έχει σχεδόν καμία σχέση με την Java) είναι εντελώς διαφορετική γλώσσα. Παρέχει σχεδόν απεριόριστη ελευθερία και ευελιξία, με μειωμένη πολυπλοκότητα στους περισσότερους τομείς. Δυστυχώς, υπάρχουν ορισμένα πράγματα που είναι πιο περίπλοκα στο JavaScript λόγω της ελευθερίας που προσπαθεί να σας δώσει.

Γιατί το OOP δεν είναι πάντα κατάλληλο για κάθε εργασία είναι ότι προσθέτει περισσότερη πολυπλοκότητα σε ένα πρόγραμμα και συχνά συνεπάγεται επιπλέον βήματα, περισσότερη δουλειά και περισσότερα πράγματα που ενδεχομένως να πάνε στραβά εάν δεν προσέχετε. Ωστόσο, το OOP μπορεί επίσης να προσφέρει πολλά πλεονεκτήματα εάν χρησιμοποιείται σε καταστάσεις όπου είναι κατάλληλο.

Το πιο σημαντικό πλεονέκτημα που μπορεί να προσφέρει ο OOP είναι η αναπαραγωγή, πράγμα που σημαίνει ότι μπορούμε να κλωνοποιήσουμε ένα αντικείμενο και να το επαναχρησιμοποιήσουμε πολλές φορές στο ίδιο πρόγραμμα, όποτε το χρειαζόμαστε. Η σιωπηρή πολυπλοκότητα και το γεγονός ότι η JavaScript δεν έχει δημιουργηθεί από την αρχή για να είναι μια γλώσσα OOP (προσθέτοντας έτσι περισσότερη πολυπλοκότητα), είναι ένας από τους λόγους για τους οποίους το OOP αντιπροσωπεύει το τελευταίο όριο για πολλούς αρχικούς προγραμματιστές JavaScript πριν κερδίσουν τα φτερά τους.

Εντάξει, είναι δύσκολο, αλλά δεν είναι τόσο δύσκολο

Προτού αρχίσετε να σκέφτεστε ότι η ιδέα του Object Oriented JavaScript είναι πάρα πολύ για εσάς, σκεφτείτε ότι χρησιμοποιείτε ήδη OOP ακόμα κι αν δεν το γνωρίζετε. Οι καθαριστές μπορεί να διαφωνούν, αλλά νομίζω ότι είναι δίκαιο να πούμε ότι εάν χρησιμοποιείτε ήδη HTML και CSS και έχετε περιστασιακά χρησιμοποιήσει JavaScript για να χειριστείτε στοιχεία HTML σε μια ιστοσελίδα, τότε είστε ήδη έμπειρος προγραμματιστής OOP.

Κάθε στοιχείο HTML σε μια ιστοσελίδα είναι στην πραγματικότητα ένα αντικείμενο. Όλα ταιριάζουν στην ιεραρχία του Document Object Model (DOM), που σημαίνει ότι έχουν μια καθορισμένη κλάση, καθορισμένες ιδιότητες και καθορισμένη κληρονομιά. Εκτός αν ορίσετε ρητά μια τιμή ιδιότητας, όλα τα αντικείμενα θα χρησιμοποιούν τις προεπιλεγμένες τιμές ιδιοκτησίας τους. Όταν γράφετε μια οδηγία CSS, αυτό που πραγματικά συμβαίνει είναι να χρησιμοποιείτε μια μέθοδο για να τροποποιήσετε μία ή περισσότερες τιμές ιδιοτήτων μιας κλάσης.

Κάθε φορά που γράφετε μια οδηγία HTML, δημιουργείτε μια νέα παρουσία μιας τάξης. Και όπως σίγουρα θα γνωρίζετε ήδη, μπορείτε να δημιουργήσετε τις δικές σας τάξεις με βάση την προκαθορισμένη κλάση κάθε τύπου αντικειμένου (για παράδειγμα, μπορείτε να δημιουργήσετε που μπορεί να έχει πολύ διαφορετικές ιδιότητες από την αρχική τάξη από την οποία δημιουργήθηκε). Μπορείτε να καθορίσετε ότι τα αντικείμενα H2 με αυτήν την τάξη θα έχουν διαφορετικό χρώμα και μέγεθος από τα κανονικά αντικείμενα H2. Και μπορείτε να χρησιμοποιήσετε ξανά αυτά τα τροποποιημένα αντικείμενα όσο συχνά θέλετε. Το αρχικό αντικείμενο H2 είναι ένα πρότυπο αντικειμένου και η νέα σας κλάση προέρχεται από την κλάση προτύπων.

Ναι, το OOP δεν είναι εύκολο, αλλά μάλλον το κάνετε ήδη, οπότε τι πρέπει να φοβάστε;

Το επόμενο επίπεδο: δημιουργία των δικών σας αντικειμένων

Η εργασία με ενσωματωμένα αντικείμενα DOM είναι πολύ εύκολη. Χρειάζεστε περισσότερες προκλήσεις. Η δημιουργία των δικών σας αντικειμένων είναι το πρώτο βήμα για ένα υψηλότερο επίπεδο OOP.

Με όλο αυτό το προοίμιο, πιθανότατα περιμένετε ότι η δημιουργία ενός αντικειμένου είναι μεγάλη υπόθεση που απαιτεί πολύ περίπλοκο κώδικα. Σίγουρα αν έχετε δοκιμάσει ποτέ να δημιουργήσετε προσαρμοσμένες κλάσεις αντικειμένων σε μια γλώσσα όπως η Java ή το C #, θα περιμένατε να δημιουργήσετε έναν μακρύ κατασκευαστή κλάσης. Δείτε πώς το κάνουμε σε JavaScript:

Λοιπόν, αυτό ήταν αντι-κλιματικό, ε; Αυτό που κάναμε εκεί δημιουργήσαμε ένα κενό αντικείμενο της κλάσης "myObject". Προφανώς τα κενά αντικείμενα είναι βαρετά, επειδή δεν κάνουν τίποτα εκτός από την κατάληψη μνήμης. Για να είναι χρήσιμο, ένα αντικείμενο πρέπει να έχει περιεχόμενο. Ας εξετάσουμε μια πιο πρακτική τάξη:

Τα παραπάνω δείχνουν ένα αντικείμενο που ονομάζεται objAlien το οποίο έχει όλες αυτές τις διαφορετικές ιδιότητες (συνηθισμένες μεταβλητές) και μεθόδους (συνάρτηση) που ορίζονται σε αυτό. Τεχνικά, λοιπόν, θα μπορούσατε επίσης να θεωρήσετε ένα αντικείμενο ως μια σειρά μεταβλητών ή / και συναρτήσεων.

Χρήση αντικειμένων σε ένα πρόγραμμα

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

Αυτός ο κώδικας θα έκανε 20 γλοιώδεις πράσινους αλλοδαπούς να τους τοποθετήσουν 110 εικονοστοιχεία (έτσι θα μπορούσαμε να μαντέψουμε από αυτό ότι η εικόνα που χρησιμοποιείται για την αποθήκευση του αλλοδαπού έχει πλάτος 100px και υπάρχει περιθώριο 10px μεταξύ κάθε αλλοδαπού). Προφανώς, φυσικά, αυτός δεν είναι καλός τρόπος για να εφαρμόσετε ένα παιχνίδι σε JavaScript επειδή υπάρχουν καλύτερες τεχνικές, αλλά αυτό το άρθρο δεν αφορά τη δημιουργία παιχνιδιών, αλλά για τη δημιουργία και τη χρήση αντικειμένων.

Τα αντικείμενα δεν πρέπει πάντα να προστίθενται χρησιμοποιώντας τη νέα λέξη-κλειδί. Ακολουθεί ένα δείγμα κώδικα από ένα έργο όπου ένα αντικείμενο ορίζει τις δικές του ιδιότητες χρησιμοποιώντας τις τιμές ενός άλλου αντικειμένου:

 

Εδώ μπορούμε να δούμε έναν πολύ περίπλοκο τρόπο χρήσης ενός αντικειμένου, όπου οι τιμές του αντικειμένου μεταβιβάζονται στην ιδιότητα attr του αντικειμένου R. Εάν είστε εξοικειωμένοι με το JSON (Σημείωση αντικειμένου JavaScript), τότε ίσως πιστεύετε ότι το πρώτο μέρος του παραδείγματος είναι η χρήση JSON με σφάλματα σύνταξης, αλλά στην πραγματικότητα δεν είναι κωδικός JSON.

Ο λόγος για τον οποίο αναφέρονται τα ονόματα μεταβλητών, εκτός από το fill, είναι να αποτραπεί η επεξεργασία της JavaScript από το χειριστή των ονομάτων μεταβλητών (που είναι ιδιότητες CSS). Από τότε που γράφτηκε αυτό το πρόγραμμα, έγιναν αλλαγές για να επιτρέπεται η εγγραφή ιδιοτήτων CSS όπως το font-family ως fontFamily, αλλά αυτός ο κώδικας παλαιού τύπου δεν έχει προσαρμοστεί για να επωφεληθεί από αυτήν την αλλαγή.

Γιατί να χρησιμοποιήσετε αντικείμενα;

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

Πότε να μην χρησιμοποιηθούν αντικείμενα;

Δεν πρέπει να χρησιμοποιείτε αντικείμενα εάν το έργο δεν τα χρειάζεστε πραγματικά. Δεν έχει νόημα να περιπλέξετε υπερβολικά τα προγράμματά σας χωρίς έναν καλό λόγο. Εάν το πρόγραμμά σας έχει σχεδιαστεί για να κάνει κάτι απλό, δεν θα πρέπει να απαιτούνται τεχνικές OOP.

Γιατί τα αντικείμενα JavaScript είναι ευκολότερα στη δημιουργία από τα αντικείμενα σε άλλες γλώσσες OOP

Σε γλώσσες όπως η Java και ακόμη και η Visual Basic, η δημιουργία αντικειμένων είναι μεγάλη δουλειά. Αυτό συμβαίνει επειδή πρέπει να δημιουργήσετε ένα πρότυπο κλάσης (ή να χρησιμοποιήσετε ένα υπάρχον) για να βάλετε το αντικείμενο σας πριν μπορέσετε να το ορίσετε. Αυτό δεν είναι απαραίτητο στο JavaScript επειδή μας δίνεται μια απλή τεχνική κατασκευής (namename = {…}). Τα αντικείμενα στο JavaScript μπορούν επίσης να περιλαμβάνουν οποιονδήποτε τύπο μεταβλητής, συμπεριλαμβανομένων των συστοιχιών, και οι δηλώσεις τύπων είναι ανύπαρκτες. Οι τιμές επιστροφής είναι προαιρετικές.

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

Θα περίμενα πολύ σωστά η παραπάνω γραμμή κώδικα να βάλει 5 μέσα στο στοιχείο με το αναγνωριστικό "par1". Αλλά αν επρόκειτο να πληκτρολογήσετε κάτι σαν:

Δεν θα βλέπετε την αγαπημένη γεύση του αλλοδαπού, θα δείτε απροσδιόριστο να εμφανίζεται στο par1. Για τις περισσότερες εφαρμογές αυτό δεν θα ήταν πρόβλημα, αλλά για ορισμένες θα ήταν. Σε αυτές τις περιπτώσεις, πρέπει να είστε προετοιμασμένοι για αυτό και να γράψετε κώδικα που ελέγχει για έγκυρες τιμές πριν βασιστείτε σε αυτές.

Ένας τρόπος για να το δοκιμάσετε είναι:

Αυτή η απάντηση είναι λίγο ακραία, αλλά έχετε την ιδέα. Παρατηρήστε ότι δοκιμάζουμε το "! ==" και όχι το "! =", Κάτι που είναι εύκολο να μπερδευτείτε. Εδώ είναι ένας άλλος τρόπος για να το κάνετε:

Το ίδιο πράγμα, με διαφορετικό τρόπο. Μπορείτε επίσης να προσθέσετε ιδιότητες σε αντικείμενα μετά τη δημιουργία τους. Μπορείτε να το κάνετε με αυτόν τον τρόπο:

Προφανώς μπορείτε επίσης να αλλάξετε τις τιμές των ιδιοτήτων με τον ίδιο τρόπο. Για να καταργήσουμε την ιδιότητα FavorFlavour από το αντικείμενο, θα πρέπει να το κάνουμε:

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

Κάνοντας τα αντικείμενα πιο επαναχρησιμοποιήσιμα

Ίσως παρατηρήσατε το μεγαλύτερο πιθανό πρόβλημα με τη δημιουργία αντικειμένων, το οποίο είναι ότι εάν θέλετε να έχετε διαφορετικούς τύπους αλλοδαπών, θα πρέπει να κάνετε την ιδιότητα objAlien.type ως πίνακα. Αλλά υπάρχει ένας άλλος τρόπος, ο οποίος είναι καλύτερος.

Αυτή η τεχνική ονομάζεται πρωτότυπο αντικειμένου, που σημαίνει ότι δημιουργείτε ένα βασικό πρότυπο για το αντικείμενο αλλά δεν συμπληρώνετε όλες τις λεπτομέρειες. Και εδώ, πλησιάζουμε τον πραγματικό τρόπο προσθήκης αντικειμένων σε ένα παιχνίδι.

Μπορείτε να δείτε τώρα ότι ορίζονται οι μέθοδοι του αντικειμένου, αλλά οι περισσότερες από τις ιδιότητες δεν έχουν καθοριστεί. Επίσης, αντί να είναι μια απλή μεταβλητή, η δήλωση αντικειμένου τυλίγεται τώρα μέσα σε μια συνάρτηση και αυτό συμβαίνει επειδή δεν είναι ακόμη αντικείμενο. Είναι απλώς ένα πρωτότυπο ενός αντικειμένου, που περιγράφει τον τρόπο δημιουργίας του αντικειμένου χωρίς να το δημιουργεί.

Τώρα λοιπόν για να δημιουργήσουμε πραγματικά αντικείμενα με βάση το πρωτότυπο θα μπορούσαμε να το κάνουμε αυτό:

Αυτό είναι το ίδιο με αυτό:

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

Ποιο είναι το επόμενο?

Αυτό το άρθρο ήταν μια εισαγωγή στο Object Oriented JavaScript, το οποίο ελπίζω να απομυθοποιήσει το θέμα και το έκανε να φαίνεται λιγότερο εκφοβιστικό. Καλύψαμε όλα τα βασικά, συμπεριλαμβανομένου του τρόπου δημιουργίας απλών αντικειμένων, του τρόπου προσθήκης, αφαίρεσης και τροποποίησης ιδιοτήτων, του τρόπου δήλωσης και χρήσης μεθόδων και του τρόπου χρήσης πρωτοτύπων για να κάνουμε τα αντικείμενα ευκολότερα στην επαναχρησιμοποίηση. Αλλά υπάρχουν ακόμα πολλά να μάθετε, οπότε τώρα που έχετε μια καλή αφετηρία, θα μπορείτε να προσεγγίσετε οποιοδήποτε σεμινάριο ή μάθημα για πιο προηγμένο OOP με αυτοπεποίθηση.

Μπογκντάν Ράνσα

Ο Bogdan είναι ιδρυτικό μέλος του Inspired Mag, έχοντας συγκεντρώσει σχεδόν 6 χρόνια εμπειρίας κατά τη διάρκεια αυτής της περιόδου. Στον ελεύθερο χρόνο του αρέσει να μελετά την κλασική μουσική και να εξερευνά εικαστικές τέχνες. Είναι επίσης πολύ παθιασμένος με τους fixies. Έχει ήδη 5.