Πώς να δημιουργήσετε αντικείμενα σε JavaScript

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

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

Στο JavaScript, σκεφτείτε τα αντικείμενα ως συλλογή ζευγών «κλειδιού: τιμής». Αυτό μας φέρνει τον πρώτο και πιο δημοφιλή τρόπο δημιουργίας αντικειμένων σε JavaScript.

Ας ξεκινήσουμε.

1. Δημιουργία αντικειμένων χρησιμοποιώντας την κυριολεκτική σύνταξη αντικειμένων

Αυτό είναι πολύ απλό. Το μόνο που έχετε να κάνετε είναι να πετάξετε τα ζεύγη τιμών-κλειδιών που διαχωρίζονται με «:» μέσα σε ένα σετ με σγουρά τιράντες ({}) και το αντικείμενο σας είναι έτοιμο για σερβίρισμα (ή κατανάλωση), όπως παρακάτω:

const person = { firstName: 'testFirstName', lastName: 'testLastName' };

Αυτός είναι ο απλούστερος και πιο δημοφιλής τρόπος δημιουργίας αντικειμένων σε JavaScript.

2. Δημιουργία αντικειμένων χρησιμοποιώντας τη «νέα» λέξη-κλειδί

Αυτή η μέθοδος δημιουργίας αντικειμένων μοιάζει με τον τρόπο δημιουργίας αντικειμένων σε γλώσσες που βασίζονται στην τάξη, όπως η Java. Παρεμπιπτόντως, ξεκινώντας από το ES6, οι τάξεις είναι εγγενείς και στο JavaScript και θα εξετάσουμε τη δημιουργία αντικειμένων καθορίζοντας τάξεις προς το τέλος αυτού του άρθρου. Έτσι, για να δημιουργήσετε ένα αντικείμενο χρησιμοποιώντας τη «νέα» λέξη-κλειδί, πρέπει να έχετε μια συνάρτηση κατασκευαστή.

Εδώ είναι 2 τρόποι για να χρησιμοποιήσετε το μοτίβο λέξεων-κλειδιών «νέο» -

α) Χρήση της «νέας» λέξης-κλειδιού με «ενσωματωμένη συνάρτηση κατασκευαστή αντικειμένων

Για να δημιουργήσετε ένα αντικείμενο, χρησιμοποιήστε τη νέα λέξη-κλειδί με τον Object()κατασκευαστή, ως εξής:

const person = new Object();

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

person.firstName = 'testFirstName'; person.lastName = 'testLastName';

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

β) Χρήση του «νέου» με καθορισμένη από τον χρήστη συνάρτηση κατασκευαστή

Το άλλο πρόβλημα με την προσέγγιση της χρήσης της συνάρτησης κατασκευαστή «Object» προκύπτει από το γεγονός ότι κάθε φορά που δημιουργούμε ένα αντικείμενο, πρέπει να προσθέτουμε με μη αυτόματο τρόπο τις ιδιότητες στο αντικείμενο που δημιουργήθηκε.

Τι γίνεται αν έπρεπε να δημιουργήσουμε αντικείμενα εκατοντάδων ατόμων; Μπορείτε να φανταστείτε τον πόνο τώρα. Έτσι, για να απαλλαγούμε από τη μη αυτόματη προσθήκη ιδιοτήτων στα αντικείμενα, δημιουργούμε προσαρμοσμένες (ή καθορισμένες από το χρήστη) συναρτήσεις. Αρχικά δημιουργούμε μια συνάρτηση κατασκευαστή και στη συνέχεια χρησιμοποιούμε τη «νέα» λέξη-κλειδί για τη λήψη αντικειμένων

function Person(fname, lname) { this.firstName = fname; this.lastName = lname; }

Τώρα, όποτε θέλετε ένα αντικείμενο "Πρόσωπο", απλώς κάντε το:

const personOne = new Person('testFirstNameOne', 'testLastNameOne'); const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');

3. Χρησιμοποιώντας το Object.create () για τη δημιουργία νέων αντικειμένων

Αυτό το μοτίβο είναι πολύ βολικό όταν μας ζητείται να δημιουργήσουμε αντικείμενα από άλλα υπάρχοντα αντικείμενα και να μην χρησιμοποιήσουμε άμεσα τη σύνταξη λέξεων-κλειδιών «νέα». Ας δούμε πώς να χρησιμοποιήσετε αυτό το μοτίβο. Όπως αναφέρεται στο MDN:

Η Object.create()μέθοδος δημιουργεί ένα νέο αντικείμενο, χρησιμοποιώντας ένα υπάρχον αντικείμενο ως πρωτότυπο του νέου αντικειμένου.

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

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

Φανταστείτε ότι έχετε έναν οργανισμό που εκπροσωπείται από orgObject

const orgObject = { company: 'ABC Corp' };

Και θέλετε να δημιουργήσετε υπαλλήλους για αυτόν τον οργανισμό. Σαφώς, θέλετε όλα τα αντικείμενα του υπαλλήλου.

const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } }); console.log(employee); // { company: "ABC Corp" } console.log(employee.name); // "EmployeeOne"

4. Χρησιμοποιώντας το Object.assign () για τη δημιουργία νέων αντικειμένων

Τι γίνεται αν θέλουμε να δημιουργήσουμε ένα αντικείμενο που πρέπει να έχει ιδιότητες από περισσότερα από ένα αντικείμενα; Object.assign()έρχεται στη βοήθειά μας.

Όπως αναφέρεται στο MDN:

Η μέθοδος χρησιμοποιείται για την αντιγραφή των τιμών όλων των μετρήσιμων ιδιοτήτων από ένα ή περισσότερα αντικείμενα προέλευσης σε ένα αντικείμενο προορισμού. Θα επιστρέψει το αντικείμενο προορισμού. Object.assign()

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

Ας υποθέσουμε ότι έχετε δύο αντικείμενα όπως παρακάτω:

const orgObject = { company: 'ABC Corp' } const carObject = { carName: 'Ford' }

Τώρα, θέλετε ένα αντικείμενο υπαλλήλου της «ABC Corp» που οδηγεί ένα αυτοκίνητο «Ford». Μπορείτε να το κάνετε με τη βοήθεια των Object.assignπαρακάτω:

const employee = Object.assign({}, orgObject, carObject);

Τώρα, λαμβάνετε ένα employeeαντικείμενο που έχει companyκαι carNameως ιδιοκτησία του.

console.log(employee); // { carName: "Ford", company: "ABC Corp" }

5. Χρήση τάξεων ES6 για τη δημιουργία αντικειμένων

Θα παρατηρήσετε ότι αυτή η μέθοδος είναι παρόμοια με τη χρήση του «νέου» με τη συνάρτηση κατασκευαστή που ορίζεται από το χρήστη. Οι συναρτήσεις του κατασκευαστή αντικαθίστανται τώρα από κλάσεις καθώς υποστηρίζονται μέσω προδιαγραφών ES6. Ας δούμε τον κωδικό τώρα.

class Person { constructor(fname, lname) { this.firstName = fname; this.lastName = lname; } } const person = new Person('testFirstName', 'testLastName'); console.log(person.firstName); // testFirstName console.log(person.lastName); // testLastName 

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

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