Μάθετε ES6 The Dope Way Μέρος II: Λειτουργίες βέλους και η λέξη-κλειδί «αυτό»

Καλώς ορίσατε στο Μέρος II του Learn ES6 The Dope Way, μια σειρά που δημιουργήθηκε για να σας βοηθήσει να κατανοήσετε εύκολα το ES6 (ECMAScript 6)!

Λοιπόν, τι είναι το διάολο => ; ;

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

Μαζί, ας καλύψουμε τρία θέματα στο Learn ES6 The Dope Way Part II:

  • Πώς σχετίζεται η λέξη-κλειδί " αυτό " => .
  • Τρόπος μετεγκατάστασης συναρτήσεων από ES5 σε ES6.
  • Σημαντικά χαρακτηριστικά που πρέπει να γνωρίζετε όταν χρησιμοποιείτε => .

Λειτουργίες βέλους

Οι λειτουργίες βέλους δημιουργήθηκαν για να απλοποιήσουν το εύρος των λειτουργιών και να κάνουν τη χρήση της λέξης-κλειδιού « αυτή » πολύ πιο απλή. Χρησιμοποιούν το = & gt; σύνταξη, που μοιάζει με βέλος. Παρόλο που δεν νομίζω ότι πρέπει να κάνει δίαιτα, οι άνθρωποι αποκαλούν «το λίπος » (και οι λάτρεις της Ruby μπορεί να το γνωρίζουν καλύτερα ως «hash rock et») - κάτι που πρέπει να γνωρίζετε.

Πώς σχετίζεται η λέξη-κλειδί «με» τις λειτουργίες Arrow

Πριν βυθίσουμε βαθύτερα τις λειτουργίες βέλους ES6, είναι σημαντικό να έχουμε πρώτα μια σαφή εικόνα για το τι " αυτό " συνδέεται στον κώδικα ES5.

Εάν η λέξη-κλειδί « αυτό » ήταν μέσα στη μέθοδο ενός αντικειμένου (μια συνάρτηση που ανήκει σε ένα αντικείμενο), σε τι θα αναφέρεται;

// Test it here: //jsfiddle.net/maasha/x7wz1686/ var bunny = { name: 'Usagi', showName: function() { alert(this.name); } }; bunny.showName(); // Usagi

Σωστός! Θα αναφέρεται στο αντικείμενο. Θα καταλάβουμε γιατί αργότερα.

Τώρα τι γίνεται αν η λέξη-κλειδί « αυτό » ήταν μέσα στη λειτουργία της μεθόδου;

// Test it here: //jsfiddle.net/maasha/z65c1znn/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks: function() { this.tasks.forEach(function(task) { alert(this.name + " wants to " + task); }); } }; bunny.showTasks(); // [object Window] wants to transform // [object Window] wants to eat cake // [object Window] wants to blow kisses // please note, in jsfiddle the [object Window] is named 'result' within inner functions of methods. 

Τι πήρες? Περιμένετε, τι συνέβη με το λαγουδάκι μας…;

Α, νομίζατε ότι « αυτό » αναφέρεται στην εσωτερική λειτουργία της μεθόδου;

Ίσως το ίδιο το αντικείμενο;

Σοφείτε να το σκέφτεστε, αλλά δεν είναι έτσι. Επιτρέψτε μου να σας διδάξω τι μου είχαν διδάξει οι πρεσβύτεροι κωδικοποίησης:

Κωδικοποίηση Γέροντας : « Α ναι, τ ο κωδικός είναι ισχυρή με αυτό. Είναι πράγματι πρακτικό να πιστεύουμε ότι η λέξη-κλειδί «αυτή» συνδέεται με τη λειτουργία, αλλά η αλήθεια είναι ότι «αυτό» έχει πλέον πέσει εκτός… Ανήκει τώρα σε… », σταματά σαν να βιώνει εσωτερική αναταραχή ,« το αντικείμενο παραθύρου . "

Σωστά. Αυτό ακριβώς συνέβη.

Γιατί το " αυτό " συνδέεται με το αντικείμενο του παραθύρου; Επειδή " αυτό ", αναφέρεται πάντα ο κάτοχος της συνάρτησης στην οποία βρίσκεται, για αυτήν την περίπτωση - δεδομένου ότι είναι πλέον εκτός πεδίου - το παράθυρο / το καθολικό αντικείμενο.

Όταν βρίσκεται μέσα στη μέθοδο ενός αντικειμένου - ο κάτοχος της συνάρτησης είναι το αντικείμενο. Έτσι, η λέξη-κλειδί « αυτό » συνδέεται με το αντικείμενο. Ωστόσο, όταν βρίσκεται μέσα σε μια συνάρτηση, είτε αυτόνομη είτε μέσα σε μια άλλη μέθοδο, θα αναφέρεται πάντα στο παράθυρο / καθολικό αντικείμενο

// Test it here: //jsfiddle.net/maasha/g278gjtn/ var standAloneFunc = function(){ alert(this); } standAloneFunc(); // [object Window]

Μα γιατί…?

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

Πριν συνεχίσουμε, είναι σημαντικό να γνωρίζετε δύο έξυπνους τρόπους με τους οποίους οι προγραμματιστές επιλύουν το πρόβλημα « αυτό » εντός του κώδικα ES5, ειδικά επειδή θα συνεχίσετε να αντιμετωπίζετε ES5 για λίγο (δεν έχει ακόμα μετανάστευσε πλήρως το πρόγραμμα περιήγησης στο ES6):

# 1 Δημιουργήστε μια μεταβλητή εκτός της εσωτερικής λειτουργίας της μεθόδου. Τώρα η μέθοδος "forEach" αποκτά πρόσβαση σε " αυτό " και έτσι οι ιδιότητες του αντικειμένου και οι τιμές τους. Αυτό συμβαίνει επειδή το " αυτό " αποθηκεύεται σε μια μεταβλητή ενώ εξακολουθεί να βρίσκεται εντός του πεδίου της άμεσης μεθόδου του αντικειμένου "showTasks".

// Test it here: //jsfiddle.net/maasha/3mu5r6vg/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks: function() { var _this = this; this.tasks.forEach(function(task) { alert(_this.name + " wants to " + task); }); } }; bunny.showTasks(); // Usagi wants to transform // Usagi wants to eat cake // Usagi wants to blow kisses

# 2 Χρησιμοποιήστε το bind για να επισυνάψετε τη λέξη-κλειδί « αυτό » που αναφέρεται στη μέθοδο στην εσωτερική λειτουργία της μεθόδου.

// Test it here: //jsfiddle.net/maasha/u8ybgwd5/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks: function() { this.tasks.forEach(function(task) { alert(this.name + " wants to " + task); }.bind(this)); } }; bunny.showTasks(); // Usagi wants to transform // Usagi wants to eat cake // Usagi wants to blow kisses

Και τώρα παρουσιάζουμε… Λειτουργίες βέλους! Η αντιμετώπιση αυτού του ζητήματος δεν ήταν ποτέ πιο εύκολη και απλή! Η απλή λύση ES6:

// Test it here: //jsfiddle.net/maasha/che8m4c1/ var bunny = { name: 'Usagi', tasks: ['transform', 'eat cake', 'blow kisses'], showTasks() { this.tasks.forEach((task) => { alert(this.name + " wants to " + task); }); } }; bunny.showTasks(); // Usagi wants to transform // Usagi wants to eat cake // Usagi wants to blow kisses

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

Τρόπος μετεγκατάστασης συναρτήσεων από ES5 σε ES6.

// Before let bunny = function(name) { console.log("Usagi"); } // After let bunny = (name) => console.log("Usagi") // Step 1: Remove the word ‘function’. let bunny = (name) { console.log("Usagi"); } // Step 2: If your code is less than a line, remove brackets and place on one line. let bunny = (name) console.log("Usagi"); // Step 3. Add the hash rocket. let bunny = (name) => console.log("Usagi");

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

// #1 ES6: if passing one argument you don't need to include parenthesis around parameter. var kitty = name => name; // same as ES5: var kitty = function(name) { return name; }; // #2 ES6: no parameters example. var add = () => 3 + 2; // same as ES5: var add = function() { return 3 + 2; }; // #3 ES6: if function consists of more than one line or is an object, include braces. var objLiteral = age => ({ name: "Usagi", age: age }); // same as ES5: var objLiteral = function(age) { return { name: "Usagi", age: age }; }; // #4 ES6: promises and callbacks. asyncfn1().then(() => asyncfn2()).then(() => asyncfn3()).then(() => done()); // same as ES5: asyncfn1().then(function() { asyncfn2(); }).then(function() { asyncfn3(); }).done(function() { done(); });

Σημαντικά χαρακτηριστικά που πρέπει να γνωρίζετε όταν χρησιμοποιείτε τις λειτουργίες Arrow

Εάν χρησιμοποιήσετε τη «νέα» λέξη-κλειδί με => συναρτήσεις, θα εμφανιστεί σφάλμα. Οι λειτουργίες βέλους δεν μπορούν να χρησιμοποιηθούν ως κατασκευαστής - οι κανονικές λειτουργίες υποστηρίζουν το «νέο» μέσω του πρωτοτύπου ιδιοκτησίας και της εσωτερικής μεθόδου [[Κατασκευή]]. Οι λειτουργίες βέλους δεν χρησιμοποιούν ούτε, έτσι το νέο (() => {}) ρίχνει ένα σφάλμα.

Περαιτέρω ιδιορρυθμίες που πρέπει να λάβετε υπόψη:

// Line breaks are not allowed and will throw a syntax error let func1 = (x, y) => { return x + y; }; // SyntaxError // But line breaks inside of a parameter definition is ok let func6 = ( x, y ) => { return x + y; }; // Works! // If an expression is the body of an arrow function, you don’t need braces: asyncFunc.then(x => console.log(x)); // However, statements have to be put in braces: asyncFunc.catch(x => { throw x }); // Arrow functions are always anonymous which means you can’t just declare them as in ES5: function squirrelLife() { // play with squirrels, burrow for food, etc. } // Must be inside of a variable or object property to work properly: let squirrelLife = () => { // play with squirrels, burrow for food, etc. // another super squirrel action. }

Συγχαρητήρια! Το έχετε καταφέρει μέσω του Learn ES6 The Dope Way Part II και τώρα έχετε μια βάση για τη γνώση της λειτουργίας βέλους, τα λεξικά οφέλη που δίνει σε αυτό "και επίσης έχετε εμπλακεί κάποιες δεξιότητες quark JavaScript! :)

Διατηρήστε τη σοφία σας ενημερωμένη αρέσει και ακολουθώντας ως περισσότερα Μάθετε ES6 Ο Dope Way έρχεται σύντομα στο Medium!

Μέρος I: const, let & var

Μέρος II: (Arrow) => συναρτήσεις και «αυτή» λέξη-κλειδί

Μέρος ΙΙΙ: Πρότυπα λογοτεχνικά, Διαχειριστές και γεννήτριες!

Μέρος IV: Προεπιλεγμένες παράμετροι, εκχώρηση καταστροφής και νέα μέθοδος ES6!

Μέρος V: Μαθήματα, Μεταφορά κώδικα ES6 και περισσότεροι πόροι!

Μπορείτε επίσης να με βρείτε στο github ❤ //github.com/Mashadim