Oggetti JavaScript negli esempi

Gli oggetti sono la pietra angolare di javascript. Molti tipi di dati incorporati sono rappresentati come oggetti. Per essere uno sviluppatore JavaScript di successo, è necessario avere una chiara idea di come funzionano. I blocchi costitutivi di un oggetto sono detti campi o proprietà dell'oggetto JavaScript. Sono usati per descrivere qualsiasi aspetto di un oggetto. La proprietà può descrivere la lunghezza della lista, il colore del cielo o la data di nascita della persona. La creazione di oggetti è un processo semplice. Il linguaggio fornisce una sintassi nota come letterali dell'oggetto, che sono indicati da parentesi graffe.

Accesso alle proprietà

La lingua fornisce due voci per l'accesso alle proprietà. Il primo e più comune è noto come notazione a punti. Nella notazione puntata, l'accesso a una risorsa può essere ottenuto specificando il nome dell'oggetto host, seguito dal punto e dal nome della proprietà. Ad esempio, quando a object.foo è stato inizialmente assegnato il valore di uno, il suo valore diventerà 2 dopo l'esecuzione dell'operatore JavaScript degli oggetti.

La sintassi alternativa per l'accesso è nota come parentesi. Nella notazione, il nome dell'oggetto è seguito da un insieme di parentesi quadre. In essi, il nome della proprietà è specificato come una stringa:

object ["foo"] = object ["foo"] + 1.

È più espressivo della notazione a punti perché consente a una variabile di indicare tutto o parte del nome di una proprietà. Ciò è possibile perché l'interprete di oggetti JavaScript converte automaticamente questa espressione in una stringa e quindi ottiene la proprietà corrispondente. I nomi delle proprietà vengono creati al volo concatenando il contenuto della variabile f con la stringa "oo":

var f = "f";

oggetto [f + "oo"] = "bar".

Le parentesi graffe consentono ai nomi delle proprietà di contenere caratteri non consentiti nella notazione puntata. Ad esempio, la seguente frase è completamente legale tra parentesi. Tuttavia, se un utente tenta di creare lo stesso nome di proprietà in notazione puntata, incontrerà un errore di sintassi:

object ["! @ # $% & * ()."] = true.

L'accesso alle proprietà degli oggetti JavaScript nidificati può essere ottenuto collegando punti e / o parentesi. Ad esempio, il seguente oggetto contiene un oggetto incorporato denominato baz che contiene un altro oggetto denominato foo, che ha una proprietà denominata barra contenente il valore cinque:

var object = {baz: {pippo: {bar: 5}}}.

Le seguenti espressioni accedono alla proprietà della barra collegata. La prima espressione usa la notazione a punti, mentre la seconda espressione usa la notazione quadrata. La terza espressione combina entrambe le voci per ottenere lo stesso risultato:

• object.baz.foo.bar;
• object ["baz"] ["foo"] ["bar"];
• oggetto ["baz"]. foo ["barra"].

Espressioni come quelle mostrate nell'esempio precedente possono comportare prestazioni scadenti se utilizzate in modo improprio e disabilitare l'oggetto JavaScript. La valutazione di ogni espressione di punto o parentesi richiede tempo. Se la stessa proprietà viene utilizzata più volte, allora ha senso accedere alla proprietà una volta e quindi memorizzare il valore in una variabile locale per tutti gli scopi futuri.

Funziona come un metodo

Quando una funzione viene utilizzata come proprietà di un oggetto, viene chiamata metodo. Come le proprietà, sono specificate nella notazione letterale dell'oggetto. Ad esempio:

var object = {sum: function (foo, bar) {return foo + bar; }}.

I metodi degli oggetti JavaScript possono essere richiamati usando etichette e parentesi. L'esempio seguente chiama il metodo sum () dell'esempio precedente, utilizzando entrambe le voci:

• oggetto.sum (1, 2);
• oggetto ["somma"] (1, 2).

La denominazione di un oggetto letterale è utile per la creazione di nuovi oggetti, ma non può aggiungere proprietà o metodi a quelli esistenti. Fortunatamente, aggiungere nuovi dati è facile come creare una dichiarazione di assegnazione. Viene creato un oggetto vuoto. Quindi, utilizzando gli operatori di assegnazione, vengono aggiunte due proprietà, foo e bar, anche il metodo baz:

• var object = {};
• object.foo = 1;
• object.bar = null;
• object.baz = function () {return "ciao da baz ()"; }.

Programma di incapsulamento

L'idea principale della programmazione orientata agli oggetti è quella di dividere il programma in parti più piccole e rendere ciascuno responsabile della gestione del proprio stato. Quindi, una certa conoscenza di come una parte di un programma funziona può essere locale a quella parte. Qualcuno che lavora sul resto del programma non dovrebbe ricordare o nemmeno saperlo. Ogni volta che i dati locali cambiano, è necessario aggiornare solo il codice immediatamente circostante.

Le varie parti di tale programma interagiscono tra loro attraverso interfacce, serie limitate di funzioni o collegamenti, che forniscono funzionalità utili a un livello più astratto, nascondendo la loro esatta implementazione. Tali parti del programma sono modellate usando oggetti. La loro interfaccia consiste in un insieme specifico di metodi e proprietà. Le proprietà che fanno parte di un'interfaccia sono chiamate public. Il resto, che non dovrebbe toccare il codice esterno, è chiamato privato.

Molte lingue offrono la possibilità di distinguere tra proprietà pubbliche e private e non consentono al codice esterno di accedere a quelle private. JavaScript, sempre con l'approccio minimalista, non è ancora stato raggiunto. Attualmente, il lavoro è in corso per aggiungere questa lingua. Pertanto, i programmatori JavaScript useranno con successo questa idea. Di norma, l'interfaccia disponibile è descritta nella documentazione o nei commenti. È anche consuetudine posizionare un carattere di sottolineatura (_) all'inizio dei nomi delle proprietà per indicare che queste proprietà sono private. Separare l'interfaccia dall'implementazione è una grande idea. Di solito è chiamato incapsulamento.

proprietà

Un oggetto con parentesi {...} è chiamato oggetto letterale. È possibile inserire immediatamente alcune proprietà in tali parentesi {...}. Ad esempio, coppie "chiave: valore e così via":

consenti all'utente = {// un nome oggetto: "Giovanni", // per chiave "nome" valore negozio "Giovanni" età: 30 // per chiave "età" valore negozio 30}.

La proprietà ha una chiave (conosciuta anche come "nome" o "identificatore") prima dei due punti ":" e il valore alla sua destra. Ci sono due proprietà in un oggetto utente. L'oggetto JavaScript utente risultante con due file firmati con le parole "nome" ed "età". È possibile aggiungere, eliminare e leggere i file da esso in qualsiasi momento. I valori delle proprietà sono disponibili usando la notazione dei punti. Può essere di qualsiasi tipo È possibile aggiungere un valore booleano. Per cancellare una proprietà, usa delete nel caso di un oggetto JavaScript Error.

Tutti gli oggetti di errore JavaScript sono discendenti dell'oggetto Error o di un oggetto ereditato:

1. L'oggetto Errore di sintassi viene ereditato dall'oggetto Errore.
2. JSON Errore di errore di un certo tipo di oggetto Errore di sintassi.

Per comprendere ancora meglio come le applicazioni gestiscono gli errori JavaScript, è meglio familiarizzare con Airbrake JavaScript: uno strumento di tracciamento dei bug per avvisi in tempo reale e una comprensione immediata di cosa è andato storto con il codice JavaScript.

Messaggi di errore che l'utente può ricevere prima di rimuovere l'oggetto JavaScript:

1. Carattere di controllo errato nella stringa letterale.
2. Cattivo carattere in stringa letterale.
3. Uscita Unicode errata.
4. Cattivo personaggio di fuga.
5. Stringa non terminata.
6. Codice non numerico imprevisto.
7. Cifre mancanti dopo il punto decimale.
8. Numero frazionario non terminato.
9. Nessun numero dopo l'indicatore di laurea.
10. Cifre mancanti dopo il segno esponente.
11. La parte esponenziale non ha numero.
12. Fine dei dati inaspettata.
13. Parola chiave imprevista.
14. Personaggio inaspettato
15. Fine dei dati durante la lettura dei contenuti di un oggetto.
16. Nome della proprietà prevista o "}".

Proprietà computazionali

Puoi usare parentesi quadre nel letterale dell'oggetto. Questo è chiamato proprietà calcolate. Di seguito è riportato un esempio.

Il valore di una proprietà computabile è semplice: [frutto] significa che il nome della proprietà deve essere preso dalla frutta. Quindi, se il visitatore entra in "apple", il sacchetto diventerà {apple: 5}. Puoi usare espressioni più complesse tra parentesi quadre:

lascia frutto = 'mela';

lascia bag = {

[fruit + 'Computers']: 5 // bag.appleComputers = 5

};

Le parentesi sono molto più potenti dei simboli di punti. Consentono nomi e variabili di proprietà. Ma sono anche più ingombranti da scrivere. Pertanto, la maggior parte delle volte in cui i nomi delle proprietà sono noti e semplici, viene utilizzato un punto. E se hai bisogno di qualcosa di più complicato, passa a parentesi quadre.

Prenotazioni di parole

Una variabile non può avere un nome uguale a una delle parole riservate, come "for", "let", "return", ecc. Ma non esiste una tale limitazione quando si ordinano oggetti JavaScript.

In linea di principio, qualsiasi nome è permesso, ma ce n'è uno speciale: "__proto__" riceve un appello speciale per ragioni storiche. Ad esempio, non puoi impostarlo per un valore diverso da un oggetto:

let obj = {};

obj .__ proto__ = 5;

alert (obj .__ proto__); // [oggetto oggetto], non ha funzionato come previsto

Come si può vedere dal codice, l'assegnazione del primitivo 5 viene ignorata. Questo può essere una fonte di errori e anche di vulnerabilità se l'operatore intende archiviare coppie arbitrarie di valori-chiave nell'oggetto e consentire al visitatore di specificare le chiavi. In questo caso, il visitatore può selezionare "proto" come chiave e aggiungere JavaScript all'oggetto. C'è un modo per rendere gli oggetti elaborati da __proto__ come una proprietà normale. C'è anche un'altra mappa della struttura dei dati che supporta chiavi arbitrarie.

Proprietà integer

Il termine "proprietà intero" indica una stringa che può essere convertita da un intero senza modifiche. Quindi, ad esempio, "49" è un nome di proprietà intero, perché quando viene convertito in un numero intero e viceversa, è sempre lo stesso. Ma "+49" e "1.2" non lo sono. D'altra parte, se le chiavi non sono numeri interi, sono elencate nell'ordine di creazione. Un esempio qui sotto.

Per correggere il problema con l'aiuto dei codici telefonici, è possibile "imbrogliare" rendendo i codici non interi. Aggiungere un "+" (segno più) prima di ogni codice è sufficiente. Ora funzionerà come previsto.

La differenza tra oggetti e primitive è che sono memorizzati e copiati "per riferimento". I valori primitivi vengono assegnati e copiati "come un valore intero". La variabile memorizza "l'indirizzo in memoria", non l'oggetto stesso o il "link" ad esso. È possibile utilizzare qualsiasi variabile per accedere e modificare il suo contenuto.

L'esempio sopra mostra che c'è un solo oggetto e admin per inserirlo. Quindi, se un altro tasto (utente) viene utilizzato in seguito, l'utente rileverà le modifiche.

Operatori di uguaglianza == e uguaglianza rigorosa === funzionano per gli oggetti allo stesso modo. Due oggetti sono uguali solo se sono lo stesso oggetto. Per confronti come obj1> obj2 o per il confronto con il primitivo obj == 5, gli oggetti vengono convertiti in primitivi. Per essere onesti, tali confronti sono raramente necessari e di solito sono il risultato di un errore di codifica.

Validazione di oggetti JavaScript

Gli oggetti hanno accesso a qualsiasi proprietà. Tuttavia, se non esiste affatto, non sarà un errore. Solo l'accesso a una proprietà inesistente restituisce undefined. Fornisce un modo molto comune per testare una proprietà e confrontarla con quella indefinita. Di seguito è un esempio.

Usa "in" per le proprietà che vengono memorizzate indefinite. Di solito il rigoroso controllo di confronto "=== undefined" funziona bene. C'è un caso speciale quando fallisce e "in" funziona correttamente. Questo è quando esiste una proprietà di un oggetto, ma salva non definito.

Nel codice precedente, la proprietà obj.test esiste tecnicamente. Pertanto, l'operatore in funziona correttamente. Tali situazioni si verificano molto raramente, perché di solito non vengono definiti i non definiti. Per lo più vengono utilizzati valori "sconosciuti" o "vuoti". Pertanto, l'istruzione in è, di fatto, l'ospite nel codice.

Ciclo "For..in"

Per navigare attraverso tutte le chiavi da un oggetto a un oggetto, esiste una forma speciale del ciclo: for..in. Questa è una cosa completamente diversa dalla (per;) costruzione.

Di seguito è un esempio.

Va notato che tutti i costruttori consentono di dichiarare le variabili di loop all'interno del loop come let key. In alternativa, puoi usare un altro nome di variabile chiave.

Ad esempio, per (lascia prop in obj) è anche ampiamente usato.

Esiste un'alternativa "parentesi quadra" che funziona con qualsiasi stringa.

In questo caso, il punto richiede che le chiavi dell'oggetto JavaScript siano un identificatore di variabile valido, cioè non ci sono spazi e altre restrizioni. È necessario prestare attenzione per garantire che la stringa all'interno delle parentesi sia correttamente citata. I brackets forniscono anche un modo per ottenere il nome di una proprietà come risultato di qualsiasi espressione, al contrario di una stringa letterale, da una variabile:

let key = "likes birds";

// come utente ["likes birds"] = true;

utente [chiave] = vero.

Qui, la variabile chiave può essere calcolata in fase di esecuzione e dipende dall'input dell'utente, e quindi verrà utilizzata per accedere alla proprietà. Ciò offre ai programmatori una maggiore flessibilità. La notazione punteggiata non può essere utilizzata in modo simile, poiché ci sarà un'iterazione dell'oggetto JavaScript. Di seguito è un esempio.

Oggetto Const

L'oggetto const dichiarato può essere modificato. Di seguito è riportato un esempio.

Potrebbe sembrare che l'oggetto JavaScript nella stringa (*) causi un errore, ma non lo è. Questo perché const acquisisce il valore dell'utente stesso. E qui l'utente mantiene sempre un collegamento allo stesso oggetto. La linea (*) va all'interno dell'oggetto, non viene riassegnata all'utente. Const darà un errore se si tenta di installare l'utente e qualcos'altro. Clonando e unendo, Object.assign crea un altro link allo stesso oggetto se vuoi duplicarlo. Anche questo è fattibile, ma un po 'più complicato, perché JavaScript non ha un metodo integrato. In realtà, questo è raramente necessario. La copia per riferimento viene utilizzata nella maggior parte dei casi. Ma se davvero ne hai bisogno, devi creare un oggetto JavaScript e replicare la struttura di uno esistente copiando le sue proprietà a un livello primitivo. Di seguito è un esempio.

E puoi anche usare il metodo Object.assign per questo. Gli argomenti dest e src1, ..., srcN sono oggetti. Copia le proprietà di tutti src1, ..., srcNINTO dest. In altre parole, le proprietà di tutti gli argomenti, a partire dal secondo, vengono copiate nella 1a. Quindi torna a dest. Ad esempio, puoi usarlo per combinare diversi oggetti in uno solo.

E puoi anche usare Object.assign per sostituire il semplice loop clone. Copia tutte le proprietà dell'utente su un oggetto vuoto e lo restituisce, proprio come un loop, ma in breve. Fino ad ora, si supponeva che tutte le proprietà dell'utente fossero primitive. Ma le proprietà possono essere riferimenti ad altri oggetti.

Per risolvere questo problema, è necessario utilizzare un ciclo di clonazione, che verifica ogni valore di utente [chiave] e, se si tratta di un oggetto, quindi replica la sua struttura. Questo è chiamato "deep cloning".

Esiste un algoritmo di clonazione profonda standard che gestisce il caso di cui sopra e casi più complessi, chiamato algoritmo di clonazione strutturata. Per non reinventare la ruota, è possibile utilizzare l'implementazione di lavoro dalla libreria JavaScript di lodash, un metodo chiamato _.cloneDeep (obj).

Metodi avanzati

Se il programmatore esegue il loop sull'oggetto e cerca di ottenere tutte le proprietà nello stesso ordine in cui sono state aggiunte, può fare affidamento su "ordinare in modo speciale" quando le proprietà di interi vengono ordinate e altre sono formate nell'ordine di creazione dell'oggetto JavaScript.

I metodi avanzati degli oggetti trattano concetti che sono raramente usati in JavaScripting. Ciò è dovuto al fatto che in scenari normali queste potenti funzioni non sono necessarie. Alcuni di questi metodi potrebbero non funzionare con i browser più vecchi, come le prime versioni di Netscape 4.

È possibile applicare un prototipo per creare oggetti JavaScript e tutti i metodi mycircle, non solo nuovi. Questo dà un carico prestazionale misto. Non è necessario archiviare copie separate dei metodi per ciascuna istanza di oggetto, quindi potrebbe richiedere meno memoria per funzionare, ma il browser deve cercare le aree correnti e padre per trovarle. Ciò potrebbe causare un ritardo massimo. In genere, l'utente deve utilizzare ciò che è appropriato per il codice e non basare questa decisione sul rendimento, a meno che non si tratti di un ambiente controllato molto specifico.

Restituire vero

In alcuni casi potrebbe essere necessario che la proprietà dell'oggetto sia legata all'oggetto stesso o da qualche parte nella catena del prototipo. In JavaScript, tutti gli oggetti utilizzano il metodo hasOwnProperty, che restituisce true se questa proprietà è associata a un'istanza di un singolo oggetto. In questo caso, è possibile verificare se il costruttore di oggetti ha la stessa proprietà con lo stesso valore dell'istanza dell'oggetto stesso. Questo può dare un risultato errato se ci sono proprietà separate di un oggetto JavaScript con lo stesso valore per l'istanza dell'oggetto e la catena del prototipo. Il metodo hasOwnProperty accetta un singolo parametro, il nome della proprietà come una stringa.

Allo stesso modo, puoi creare metodi privati. È semplicemente una funzione creata all'interno di una funzione di costruzione. Ad alcuni può sembrare confuso, ma è così che funziona. Una funzione privata può essere chiamata solo dal costruttore stesso o dai metodi definiti nella stringa. Possono essere utilizzati come metodi pubblici se sono assegnati a un costruttore pubblico e sono accessibili utilizzando i metodi pubblici degli oggetti Javascript.

function myob () {function cantBeSeen () {alert (secretValue);

} var secretValue = '';

this.method1 = function () {secretValue = 'no sorprese';

cantBeSeen ();

};

this.method2 = cantBeSeen;

} var oneOb = new myob ();

oneOb.method1 ();

// avvisa 'no sorprese' oneOb.method2 ();

// avvisi 'nessuna sorpresa'.

Modello di comando

Gli oggetti di comando consentono i sistemi con accoppiamento lento separando quelli che effettuano richieste da oggetti e, di fatto, elaborano la richiesta. Queste richieste sono chiamate eventi e il codice che gestisce le richieste è chiamato gestore di eventi.

Supponiamo che vengano create applicazioni che supportano le azioni degli appunti Taglia, Copia e Incolla. Queste azioni possono essere avviate in diversi modi nell'intera applicazione: il sistema di menu, il menu di scelta rapida, ad esempio, facendo clic con il pulsante destro del mouse sul campo di testo o utilizzando una scorciatoia. Gli oggetti di comando consentono di centralizzare l'elaborazione di queste azioni, una per ciascuna operazione quando è necessario un solo comando per elaborare tutte le richieste di taglio, una per tutte le richieste di copia e una per tutte le richieste di Incolla.

Poiché i comandi centralizzano tutte le elaborazioni, spesso partecipano anche all'elaborazione delle funzioni di annullamento per l'intera applicazione. Miglioramenti significativi possono essere ottenuti attraverso l'uso di moderni metodi JavaScript, che portano alla creazione di applicazioni più efficienti, affidabili e supportate.

Per informazioni su come eseguire questa operazione, puoi utilizzare i modelli JavaScript + jQuery. Questo pacchetto unico include JavaScript ottimizzato per tutti i modelli GoF che utilizzano funzionalità più avanzate come spazi dei nomi, prototipi, moduli, oggetti funzionali, chiusure, funzioni anonime e altro. Se gli utenti necessitano degli strumenti e dei metodi più recenti per i modelli JavaScript, i modelli jQuery e le architetture dei modelli, questo è il caso d'uso migliore. Questo pacchetto contiene informazioni preziose e aggiornate per gli sviluppatori JavaScript. Ecco cosa è incluso:

1. Modelli GoF ottimizzati per JavaScript.
2. Modelli di design JavaScript moderni.
3. Modelli di design modello-vista.
4. Modelli di design JQuery.
5. Modelli architettonici idiomi JavaScript.
6. Esempi di applicazione (MVC, SPA, ecc.)

I principi di sintassi proposti per gli oggetti JavaScript sono molto importanti per i programmatori principianti. Devi prima capire gli oggetti, poi ci sarà la conoscenza della programmazione orientata agli oggetti. È estremamente importante avere una conoscenza approfondita di questo materiale, poiché questo serve da base per il resto del linguaggio JavaScript.