Εισαγωγή στο πεδίο εφαρμογής σε JavaScript

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

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

Παγκόσμιο πεδίο εφαρμογής

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

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

 let GLOBAL_DATA = { value : 1};  console.log(GLOBAL_DATA);

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

Οι καθολικές μεταβλητές είναι διαθέσιμες για τη διάρκεια ζωής της εφαρμογής.

Ένας άλλος τρόπος για τη δημιουργία μιας καθολικής μεταβλητής είναι να χρησιμοποιήσετε το windowκαθολικό αντικείμενο οπουδήποτε στην εφαρμογή:

window.GLOBAL_DATA = { value: 1 };

Σε αυτό το σημείο, η GLOBAL_DATAμεταβλητή είναι ορατή παντού.

console.log(GLOBAL_DATA)

Όπως μπορείτε να φανταστείτε αυτές οι πρακτικές είναι κακές πρακτικές.

Πεδίο ενότητας

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

Η εξαγωγή καθιστά μια λειτουργία ή αντικείμενο διαθέσιμο σε άλλες ενότητες. Στο επόμενο παράδειγμα, εξάγω μια συνάρτηση από το sequence.jsαρχείο λειτουργικής μονάδας:

// in sequence.js export { sequence, toList, take };

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

import { sequence, toList, toList } from "./sequence";

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

Πεδίο λειτουργίας

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

Εξετάστε την επόμενη συνάρτηση που εκτελείται αυτόματα, που ονομάζεται IIFE.

(function autoexecute() { let x = 1; })(); console.log(x); //Uncaught ReferenceError: x is not defined

IIFE σημαίνει Άμεση επίκληση της έκφρασης συνάρτησης και είναι μια συνάρτηση που εκτελείται αμέσως μετά τον ορισμό της.

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

function doSomething(){ console.log(x); var x = 1; } doSomething(); //undefined

Αυτό δεν συμβαίνει για let. Μια μεταβλητή που δηλώνεται με letμπορεί να προσεγγιστεί μόνο μετά τον ορισμό της.

function doSomething(){ console.log(x); let x = 1; } doSomething(); //Uncaught ReferenceError: x is not defined

Μια μεταβλητή που δηλώνεται με varμπορεί να επαναδηλωθεί πολλές φορές στο ίδιο πεδίο. Ο παρακάτω κώδικας είναι εντάξει:

function doSomething(){ var x = 1 var x = 2; console.log(x); } doSomething();

Οι μεταβλητές που δηλώνονται με letή constδεν μπορούν να δηλωθούν ξανά στο ίδιο πεδίο:

function doSomething(){ let x = 1 let x = 2; } //Uncaught SyntaxError: Identifier 'x' has already been declared

Ίσως δεν χρειάζεται καν να νοιαζόμαστε γι 'αυτό, καθώς varέχει αρχίσει να είναι ξεπερασμένο.

Πεδίο αποκλεισμού

Το πεδίο μπλοκ ορίζεται με σγουρά τιράντες. Διαχωρίζεται από {και }.

Οι μεταβλητές δηλώνονται με letκαι constμπορούν να έχουν πεδίο αποκλεισμού. Μπορούν να έχουν πρόσβαση μόνο στο μπλοκ στο οποίο έχουν οριστεί.

Εξετάστε τον επόμενο κώδικα που δίνει έμφαση στο letπεδίο αποκλεισμού:

let x = 1; { let x = 2; } console.log(x); //1

Αντιθέτως, η varδήλωση δεν έχει πεδίο αποκλεισμού:

var x = 1; { var x = 2; } console.log(x); //2

Ένα άλλο κοινό πρόβλημα με το να μην υπάρχει πεδίο αποκλεισμού είναι η χρήση μιας ασύγχρονης λειτουργίας όπως setTimeout()σε ένα βρόχο. Ο κωδικός βρόχου ροής εμφανίζει τον αριθμό 5, πέντε φορές.

(function run(){ for(var i=0; i<5; i++){ setTimeout(function logValue(){ console.log(i); //5 }, 100); } })();

Η forδήλωση βρόχου, με τη letδήλωση, δημιουργεί μια νέα μεταβλητή τοποθεσία στο πεδίο αποκλεισμού, για κάθε επανάληψη. Εμφανίζεται ο επόμενος κωδικός βρόχου 0 1 2 3 4 5.

(function run(){ for(let i=0; i<5; i++){ setTimeout(function log(){ console.log(i); //0 1 2 3 4 }, 100); } })();

Λεξικό πεδίο εφαρμογής

Λεξικό εύρος είναι η ικανότητα της εσωτερικής λειτουργίας να έχει πρόσβαση στο εξωτερικό πεδίο στο οποίο ορίζεται.

Εξετάστε τον επόμενο κωδικό:

(function autorun(){ let x = 1; function log(){ console.log(x); }; function run(fn){ let x = 100; fn(); } run(log);//1 })();

Η logσυνάρτηση είναι κλείσιμο. Παραπέμπει τη xμεταβλητή από τη γονική της συνάρτηση autorun()και όχι τη run()συνάρτηση.

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

The local function scope of autorun() is the lexical scope of the log() function.

Scope chain

Every scope has a link to the parent scope. When a variable is used, JavaScript looks down the scope chain until it either finds the requested variable or until it reaches the global scope, which is the end of the scope chain.

Look at the next example:

let x0 = 0; (function autorun1(){ let x1 = 1; (function autorun2(){ let x2 = 2; (function autorun3(){ let x3 = 3; console.log(x0 + " " + x1 + " " + x2 + " " + x3);//0 1 2 3 })(); })(); })();

The autorun3() inner function has access to the local x3 variable. It has also access to the x1 and x2 variables from the outer functions and the x0 global variable.

If it cannot find the variable, it will return an error in strict mode.

"use strict"; x = 1; console.log(x) //Uncaught ReferenceError: x is not defined

In non-strict mode, referred to as “sloppy mode”, it will do a bad thing and create a global variable.

x = 1; console.log(x); //1

Conclusion

Variables defined in global scope are available everywhere in the application.

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

Το εύρος της λειτουργίας σημαίνει ότι οι παράμετροι και οι μεταβλητές που ορίζονται σε μια συνάρτηση είναι ορατές παντού μέσα στη συνάρτηση

Οι μεταβλητές δηλώνονται με letκαι constέχουν πεδίο αποκλεισμού. varδεν έχει πεδίο αποκλεισμού.

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

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

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

Ακολουθήστε στο Twitter