Τι συμβαίνει όταν παγώνετε ένα πρωτότυπο σε JavaScript

Έχετε αναρωτηθεί τι συμβαίνει όταν παγώνετε το πρωτότυπο ενός αντικειμένου; Ας μάθουμε μαζί.

Αντικείμενα

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

const counter = { count: 0, increment(){ this.count += 1; return this.count; }, decrement(){ this.count -= 1; return this.count } } console.log(counter.increment())

counter είναι ένα αντικείμενο με πεδίο και δύο μέθοδοι λειτουργούν σε αυτό.

Πρωτότυπα

Τα αντικείμενα μπορούν να κληρονομήσουν ιδιότητες από πρωτότυπα. Στην πραγματικότητα, το counterαντικείμενο κληρονομεί ήδη από το Object.prototypeαντικείμενο.

Για παράδειγμα μπορούμε να καλέσουμε τη toString()μέθοδο στο counterαντικείμενο ακόμα κι αν δεν την έχουμε ορίσει.

counter.toString();

Ο καλύτερος τρόπος για να εργαστείτε με πρωτότυπα είναι να εξαγάγετε τις μεθόδους στο πρωτότυπο και στη συνέχεια να τις μοιραστείτε μεταξύ όλων των αντικειμένων που έχουν την ίδια συμπεριφορά. Ας το κάνουμε χρησιμοποιώντας το Object.create ().

const counterPrototype = { increment(){ this.count += 1; return this.count; }, decrement(){ this.count -= 1; return this.count } } const counter = Object.create(counterPrototype); counter.count = 0; console.log(counter.increment()) //1

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

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

Για παράδειγμα, μπορούμε να επαναπροσδιορίσουμε την υλοποίηση του increment()αντικειμένου στο counterαντικείμενο.

const counter = Object.create(counterPrototype); counter.count = 0; counter.increment = function(){ console.log('increment') } console.log(counter.increment()); //"increment"

Πρωτότυπα κατάψυξης

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

const counterPrototype = Object.freeze({ increment(){ this.count += 1; return this.count; }, decrement(){ this.count -= 1; return this.count } }); counterPrototype.increment = function(){ console.log('increment') } //Cannot assign to read only property 'increment' of object '#'

Το Object.freeze()παγώνει ένα αντικείμενο. Ένα παγωμένο αντικείμενο δεν μπορεί πλέον να αλλάξει. Δεν μπορούμε να προσθέσουμε, να επεξεργαστούμε ή να αφαιρέσουμε ιδιότητες από αυτό.

Τώρα ρίξτε μια ματιά στο τι συμβαίνει όταν προσπαθείτε να αλλάξετε τη μέθοδο στο counterαντικείμενο που κληρονομεί counterPrototype.

const counter = Object.create(counterPrototype); counter.count = 0; counter.increment = function(){ console.log('increment') } //Cannot assign to read only property 'increment' of object console.log(counter.increment()); //1

Όπως μπορείτε να δείτε τώρα ότι το πρωτότυπο είναι παγωμένο, δεν μπορούμε να αλλάξουμε τη increment()μέθοδο στο counterαντικείμενο.

ανακεφαλαιώσουμε

Τα αντικείμενα έχουν μια κρυφή ιδιότητα που αναφέρεται στο πρωτότυπο τους.

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

Το πάγωμα του πρωτοτύπου δεν μας επιτρέπει να αλλάξουμε αυτές τις ιδιότητες στα αντικείμενα που κληρονομούν από αυτό το πρωτότυπο. Οι άλλες ιδιότητες μπορούν να αλλάξουν.

Το Discover Functional JavaScript ονομάστηκε ένα από τακαλύτερα βιβλία λειτουργικού προγραμματισμού από το BookAuthority!

Για περισσότερα σχετικά με την εφαρμογή τεχνικών λειτουργικού προγραμματισμού στο React ρίξτε μια ματιά στο Functional React.

Μάθετε λειτουργικό React , με βάση ένα έργο, με τη λειτουργική αρχιτεκτονική με το React και το Redux .