Un saluto a tutti coloro che leggono questa pubblicazione. Oggi voglio guidarti attraverso uno strumento linguistico chiave: gli oggetti JavaScript. Lascia che ti ricordi che js è cross-browser e funziona in tutti i sistemi operativi (Windows, mac os, ecc.). A differenza dei linguaggi di programmazione orientati agli oggetti, in js, l'implementazione degli oggetti è significativamente diversa dalle solite funzionalità e variazioni dell'utilizzo delle istanze, ad esempio in C #.

Pertanto, dopo aver letto l'articolo corrente, imparerai le principali caratteristiche distintive degli oggetti con script, imparerai come crearli, aggiornarli ed eliminarli. Toccherò anche l'argomento delle proprietà, dei metodi e dei costruttori, parlerò di comandi utili e, naturalmente, un po' di ereditarietà. Penso che sia ora di iniziare a imparare!

Che cos'è un oggetto in JavaScript e quali caratteristiche ha?

In js, gli oggetti sono semplici array associativi (chiamati anche hash).

Che cos'è un array associativo?

È una struttura di dati che memorizza una certa quantità di informazioni relative e descriventi un elemento specifico. Tutti i dati sono strutturati e collegati come "chiave => valore".

Ad esempio, devi descrivere le auto. Quindi crei un oggetto avto e descrivi le sue caratteristiche in un array. Ho deciso di descrivere la marca dell'auto (nome), il suo colore (colore) e il costo (prezzo). Di seguito ho allegato il codice di implementazione per l'attività descritta.

1 2 3 4 5

var avto = (nome: "BMW 116i", colore: "nero", prezzo: 588000);

var avto = (nome: "BMW 116i", colore: "nero", prezzo: 588000);

Qui puoi vedere uno dei modi per creare un oggetto chiamato "avto". Nome, colore e prezzo sono i tasti a cui è possibile accedere durante la scrittura dell'applicazione.

Con questo esempio, sono andato avanti, quindi ora analizzeremo tutto in ordine.

Esistono diversi modi per creare un oggetto:

var avto = (); o var avto = new Object ();

In entrambi i casi viene creato un oggetto vuoto con un nome noto, ma la prima opzione viene utilizzata molto più spesso, poiché è più breve e più comoda da scrivere.

Tutto sulle proprietà

Ora dobbiamo riempire l'oggetto vuoto con i parametri. Per fare ciò, è necessario aggiungere proprietà, che ho anche chiamato chiavi sopra. Di nuovo, ci sono due modi per dichiarare le proprietà.

Voglio sottolineare che JavaScript non ha un framework rigoroso per la creazione e l'inizializzazione di tali parametri. Nuove proprietà possono apparire in tutto il codice, così come possono essere eliminate e aggiornate.

Pertanto, puoi creare tutte le chiavi contemporaneamente o dichiararle non appena diventano disponibili. E anche se durante la scrittura di un programma si fa riferimento a chiavi inesistenti, non ci saranno errori. In questo caso, verrà restituito "undefined".

Il primo modo.

Creazione e accesso alle proprietà tramite un punto. Per implementare questa opzione, è necessario scrivere il nome dell'oggetto, quindi assegnargli il nome della chiave tramite un punto e quindi assegnare un valore tramite il segno di uguale:

avto.name = “BMW 116i”

Ma in questo modo aggiungi un elemento in più alle chiavi esistenti:

Questo metodo viene utilizzato quando il nome della proprietà è già noto ed è necessario eseguire determinate azioni con i valori.

Secondo modo.

Niente di diverso dal primo, se si confronta il loro scopo. Tuttavia, questo metodo ha un leggero vantaggio. Per questa opzione vengono utilizzate parentesi quadre:

avto ["nome"] = "BMW 116i"

Una bella aggiunta è la possibilità di creare nomi di proprietà sotto forma di qualsiasi stringa. Per esempio,

avto [“nome dell'auto”] = “BMW 116i”

Il lavoro con le chiavi tra parentesi quadre viene utilizzato quando alcuni parametri vengono inseriti dall'utente e memorizzati in variabili o quando i nomi delle proprietà non sono noti in anticipo. Ad esempio, l'utente chiede il costo dell'auto selezionata. L'elemento che è stato chiamato viene scritto nella variabile e il prezzo viene passato in risposta:

var avto = (); avto.name = "BMW_116i"; avto.price = 588000; var chiave = "prezzo"; // il prezzo dell'auto è stato richiesto alert (avto);

Passiamo ora alla rimozione delle proprietà. Tutto è molto semplice qui. Per eliminare, usa il comando eliminare... Quindi, se aggiungi le seguenti 2 righe all'ultimo esempio di seguito:

eliminare avto.price;

avviso (avto);

Quindi, quando l'avviso viene chiamato una seconda volta, la finestra di dialogo ritornerà "non definita".

Qualche parola sulla compattezza

Nella fase attuale, ti ho spiegato come creare un oggetto e descriverne le proprietà. A questo ho allegato dei casi di test, ma i più attenti di voi, cari lettori, hanno notato che il codice del primo programma è un po' diverso da tutti gli altri.

E tutto perché utilizza una rappresentazione compatta dei dati. Questo è un metodo molto popolare per dichiarare le chiavi perché è più breve da scrivere e più facile da leggere visivamente.

Ripetiamo le nostre proprietà

In JavaScript, puoi scorrere rapidamente le proprietà generate. Per questo è stato previsto un meccanismo speciale, meglio conosciuto come ciclo.

Se hai familiarità con altri linguaggi di programmazione, allora sai che molto spesso i loop vengono creati usando la parola per, quindi tra parentesi viene scritta la condizione per l'enumerazione degli elementi.

In js, sembra un ciclo per ciascuno dal linguaggio C#. Guarda la vista generale della struttura:

for (var obj nell'oggetto) (// itera sopra)

dove obj è responsabile del nome delle chiavi enumerate,

oggetto - per i loro valori.

E ora ecco un esempio concreto per te.

1 2 3 4 5 6 7 8

var avto = (nome: "BMW 116i", colore: "nero", prezzo: 588000); for (var obj in object) (alert (obj + ":" + object))

var avto = (nome: "BMW 116i", colore: "nero", prezzo: 588000); for (var obj in object) (alert (obj + ":" + object))

È tempo di familiarizzare con i metodi

Il linguaggio di scripting prevede la creazione di metodi. Si tratta di un meccanismo assolutamente semplice mediante il quale in qualsiasi momento è possibile aggiungere uno o più metodi a qualsiasi oggetto che estendano le capacità degli array associativi creati. Sono anche chiamate proprietà delle funzioni.

Js stesso è molto dinamico e fantastico in una certa misura. In questo modo puoi creare elementi di diverso tipo. Quando impari questa lingua, non è necessario memorizzare costruzioni complesse, poiché molti annunci sono molto simili tra loro.

Quindi, per creare un metodo, è necessario dichiarare un oggetto e quindi iniziare a scrivere un comando che è esattamente come creare proprietà. Tuttavia, dopo il "=", non è più il valore che viene scritto, ma la parola chiave funzione (variabile). E poi tra parentesi graffe c'è un elenco di azioni.

Ecco l'implementazione di questo meccanismo:

var avto = () avto.name = “BMV” avto.year = 1999 avto.drive = funzione (k) (avviso ("Veicolo passato" + n + "km")) avto.drive (300) avto.drive ( 450)

Come puoi vedere, questo esempio contiene proprietà e metodi, le cui chiamate sono inizialmente identiche.

JS ha anche costruttori?

Si signore! In questa lingua, tutto ciò che utilizza la parola chiave " nuovo", diventa automaticamente un costruttore. Quindi, sopra hai visto la dichiarazione di un oggetto vuoto nella forma: avto = new Object () ;. Questo è il costruttore.

Per chiarezza, considera le righe sottostanti.

var bob = nuovo oggetto ();

bob.name = "Bob Smith";

Tuttavia, questo non è l'intero arsenale di possibilità. In js, puoi creare i tuoi costruttori e quindi usarli per dichiarare nuovi oggetti.

Quindi, voglio "fare" un costruttore personalizzato per auto già native. Notare che il nome deve essere in maiuscolo. Questo è il segno distintivo delle funzioni. Per fare ciò, scrivo la seguente implementazione del software:

funzione Avto (nome, prezzo) (

this.name = nome;

questo.prezzo = prezzo;

Ora, quando crei un numero illimitato di oggetti e applichi loro questo costruttore, apparterranno tutti alla stessa classe. Ad esempio:

var car1 = nuovo Avto ("BMW", 650000);

var car2 = nuovo Avto ("Audi", 520000);

Inoltre, i metodi possono essere creati all'interno del costruttore.

Funzionalità di ereditarietà in JavaScript

In genere, in molte lingue, l'ereditarietà si basa su classi che possono ereditarsi l'una dall'altra. Quindi puoi ascoltare espressioni come "classe antenata", "classe figlia", ecc.

Tuttavia, tutto è diverso in js. Gli oggetti vengono ereditati qui.

Tutta l'ereditarietà si basa su un riferimento interno tra gli oggetti, noto come "prototipo". Se assegni ".prototype" al metodo tramite un punto e poi scrivi il nome del prototipo, tutti gli oggetti del metodo selezionato erediteranno da questo prototipo.

Passiamo a un esempio.

function Transport (name) (this.name = name this.canDrive = true) var transport = new Transport ("avto") // ha creato un oggetto di trasporto function Bike (name) (this.name = name) Bike.prototype = transport // indichiamo che tutti i nuovi oggetti di questa classe utilizzeranno transport bike1 = new Bike ("for_sport") bike2 = new Bike ("for_child") console.log (bike1.name) console.log (bike2.name) console . registro (bike1.canDrive)

A questo punto probabilmente finirò. Vi ho parlato degli aspetti fondamentali del linguaggio di scripting. Tuttavia, questa è solo una conoscenza superficiale. Più avanti andremo più in profondità. Nel frattempo, non dimenticare di unirti ai ranghi dei miei abbonati e condividere il link all'articolo con i tuoi amici. Buona fortuna!

Ciao ciao!

Cordiali saluti, Roman Chueshov

Leggi: 97 volte

Gli oggetti sono la pietra angolare di JavaScript. Molti tipi di dati incorporati sono rappresentati come oggetti. Per essere uno sviluppatore JavaScript di successo, devi avere una chiara comprensione di come funzionano. Gli elementi costitutivi di un oggetto sono chiamati i suoi campi o proprietà dell'oggetto JavaScript. Sono usati per descrivere qualsiasi aspetto di un oggetto. La proprietà può descrivere la lunghezza dell'elenco, il colore del cielo o la data di nascita di una persona. La creazione di oggetti è un processo facile. Il linguaggio fornisce una sintassi nota come letterali oggetto, che sono indicati da parentesi graffe.

Accesso alle proprietà

La lingua fornisce due voci per l'accesso alle proprietà. La prima e più comune è nota come notazione a punti. Con la notazione a punti, è possibile accedere a una risorsa 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 uno, il suo valore diventerà 2 dopo l'esecuzione dell'istruzione JavaScript degli oggetti.

Una sintassi alternativa per l'accesso è nota come notazione tra parentesi. In notazione, il nome dell'oggetto è seguito da una serie di parentesi quadre. Specificano il nome della proprietà come una stringa:

oggetto ["pippo"] = oggetto ["pippo"] + 1.

È più espressivo della notazione a punti perché consente a una variabile di specificare 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 recupera la proprietà corrispondente. I nomi delle proprietà vengono creati al volo concatenando il contenuto della variabile f con la stringa "oo":

oggetto = "barra".

La notazione tra parentesi consente ai nomi delle proprietà di contenere caratteri non consentiti nella notazione a punti. Ad esempio, la seguente affermazione è completamente legale tra parentesi. Tuttavia, se l'utente tenta di creare lo stesso nome di proprietà in notazione puntata, incontrerà un errore di sintassi:

oggetto [" [e-mail protetta]# $% & * (). "] = true.

È possibile accedere alle proprietà degli oggetti JavaScript nidificati collegando punti e/o parentesi. Ad esempio, il seguente oggetto contiene un oggetto nidificato denominato baz contenente un altro oggetto denominato foo che ha una proprietà denominata bar contenente il valore cinque:

var oggetto = (baz: (foo: (bar: 5))).

Le seguenti espressioni accedono alla barra delle proprietà nidificata. 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:

• oggetto.baz.foo.bar;
• oggetto ["baz"] ["pippo"] ["bar"];
• oggetto ["baz"]. foo ["bar"].

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

Funzione come metodo

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

var oggetto = (somma: funzione (pippo, bar) (return foo + bar;)).

I metodi oggetto JavaScript possono essere chiamati utilizzando etichette e parentesi. L'esempio seguente chiama il metodo sum() dell'esempio precedente utilizzando entrambe le notazioni:

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

La notazione letterale dell'oggetto è utile per creare 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 le istruzioni di assegnazione, vengono aggiunte due proprietà, foo e bar, oltre al metodo baz:

• oggetto var = ();
• oggetto.pippo = 1;
• oggetto.bar = nullo;
• oggetto.baz = funzione () (restituisce "ciao da baz ()";).

Programmi di incapsulamento

L'idea alla base della programmazione orientata agli oggetti è quella di dividere i programmi in parti più piccole e rendere ciascuno responsabile della gestione del proprio stato. Pertanto, una certa conoscenza di come funziona una parte di un programma può essere locale per quella parte. Qualcuno che lavora al resto del programma non ha bisogno di ricordarlo o addirittura di saperlo. Ogni volta che questi dati locali cambiano, solo il codice immediatamente circostante deve essere aggiornato.

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

Molti linguaggi offrono la possibilità di distinguere tra proprietà pubbliche e private e non consentono a codice esterno di accedere a proprietà private. JavaScript, ancora una volta con un approccio minimalista, deve ancora essere raggiunto. Attualmente sono in corso i lavori per aggiungere questa lingua. Pertanto, i programmatori JavaScript utilizzeranno questa idea con successo. Di norma, l'interfaccia disponibile è descritta nella documentazione o nei commenti. È anche comune inserire un carattere di sottolineatura (_) all'inizio dei nomi delle proprietà per indicare che le proprietà sono private. Separare l'interfaccia dall'implementazione è un'ottima idea. Viene comunemente chiamato incapsulamento.

Proprietà

Un oggetto tra parentesi (...) è detto oggetto letterale. Puoi mettere immediatamente alcune proprietà tra tali parentesi (...). Ad esempio, coppie "chiave: valore e così via":

let user = (// un nome oggetto: "John", // per chiave "name" store value "(! LANG: John" age: 30 // by key "age" store value 30 }.!}

La proprietà ha una chiave (nota anche come "nome" o "identificatore") prima dei due punti ":" e un valore alla sua destra. L'oggetto utente ha due proprietà. L'oggetto JavaScript dell'utente risultante con due file firmati etichettati "nome" e "età". Puoi aggiungere, eliminare e leggere file da esso in qualsiasi momento. I valori delle proprietà sono disponibili utilizzando la notazione a punti. Può essere di qualsiasi tipo. Booleano può essere aggiunto. Per eliminare una proprietà, utilizzare delete nel caso di errore di un oggetto JavaScript.

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

1. L'oggetto Errore di sintassi eredita dall'oggetto Errore.
2. Errore di analisi JSON di un tipo specifico di oggetto Errore di sintassi.

Per approfondire ulteriormente il modo in cui le applicazioni gestiscono gli errori JavaScript, dai un'occhiata più da vicino a 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 un utente potrebbe ricevere prima di eliminare un oggetto JavaScript:

1. Carattere di controllo errato nella stringa letterale.
2. Carattere non valido in una stringa letterale.
3. Output Unicode errato.
4. Personaggio di fuga pessimo.
5. Stringa non terminata.
6. Codice non numerico imprevisto.
7. Non ci sono cifre dopo la virgola.
8. Numero frazionario non terminato.
9. Non ci sono numeri dopo l'indicatore dei gradi.
10. Non ci sono cifre dopo il segno dell'esponente.
11. La parte esponenziale non ha numero.
12. Fine imprevista dei dati.
13. Una parola chiave inaspettata.
14. Un simbolo inaspettato.
15. Fine dei dati durante la lettura del contenuto dell'oggetto.
16. Il nome della proprietà prevista o ")".

Proprietà computazionali

Puoi usare le parentesi quadre in un letterale oggetto. Questo è chiamato proprietà calcolate. Di seguito è mostrato un esempio.

Il valore della proprietà calcolato è semplice: significa che il nome della proprietà deve essere preso da fruit. Quindi, se un visitatore digita "mela", borsa diventa (mela: 5). Puoi usare espressioni più complesse tra parentesi quadre:

let fruit = "mela";

: 5 // bag.appleComputers = 5

Le parentesi quadre sono molto più potenti della notazione a punti. Accettano nomi di proprietà e variabili. Ma sono anche più ingombranti da scrivere. Pertanto, la maggior parte delle volte, quando i nomi delle proprietà sono noti e semplici, viene utilizzato un punto. E se hai bisogno di qualcosa di più complesso, passa alle parentesi quadre.

Prenotazione di parole

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

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

obj .__ proto__ = 5;

avviso (oggetto .__ proto__); //, "non ha funzionato come previsto

Come si vede dal codice, l'assegnazione della primitiva 5 viene ignorata. Ciò può diventare fonte di errori e persino vulnerabilità se l'operatore intende memorizzare coppie chiave-valore arbitrarie nell'oggetto e consentire al visitatore di specificare le chiavi. In questo caso, il visitatore può scegliere "proto" come chiave e aggiungerla all'oggetto JavaScript. C'è un modo per rendere gli oggetti trattati con __proto__ come una normale proprietà. C'è anche un'altra mappa di strutture dati che supportano chiavi arbitrarie.

Proprietà intere

Il termine "proprietà intera" qui indica una stringa che può essere convertita da un numero 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 intere, vengono elencate nell'ordine di creazione. Vedi esempio sotto.

Per risolvere il problema con i prefissi, puoi "imbrogliare" rendendo i codici non interi. È sufficiente aggiungere un "+" (segno più) davanti a ciascun codice. Ora funzionerà come previsto.

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

L'esempio sopra mostra che c'è solo un oggetto e un amministratore per accedervi. Quindi, se in seguito utilizza una chiave diversa (utente), l'utente rileverà la modifica.

Gli operatori equality == e strict equality === funzionano allo stesso modo per gli oggetti. Due oggetti sono uguali solo se sono lo stesso oggetto. Per confronti come obj1> obj2, o per confronti con la primitiva obj == 5, gli oggetti vengono convertiti in primitivi. Ad essere onesti, tali confronti sono necessari molto raramente e di solito sono il risultato di un errore di codifica.

Convalida dell'oggetto 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 controllare una proprietà e confrontarla con una non definita. Di seguito è riportato un esempio.

Utilizzo di "in" per le proprietà che memorizzano undefined. Di solito il controllo di confronto rigoroso "=== non definito" funziona bene. C'è un caso speciale in cui fallisce e "in" funziona correttamente. Questo è quando una proprietà di un oggetto esiste ma rimane indefinita.

Nel codice sopra, tecnicamente esiste la proprietà obj.test. Pertanto, l'operatore in funziona correttamente. Situazioni come questa sono molto rare perché di solito non viene assegnato undefined. Per lo più vengono utilizzati valori "sconosciuti" o "vuoti" nulli. Pertanto, l'operatore in è, di fatto, un ospite nel codice.

Ciclo "per..in"

Per eseguire il ciclo di tutte le chiavi da un oggetto all'altro, esiste una forma speciale di ciclo: for..in. Questa è una cosa completamente diversa dal costrutto for (;;).

Di seguito è riportato un esempio.

Va notato che tutti i costruttori "for" consentono di dichiarare la variabile di ciclo all'interno del ciclo come chiave let. In alternativa, è possibile utilizzare invece una chiave di nome variabile diversa.

Ad esempio, anche for (let prop in obj) è ampiamente utilizzato.

Esiste una "parentesi quadra" alternativa che funziona su qualsiasi stringa.

Detto questo, il punto richiede che le chiavi dell'oggetto JavaScript siano un identificatore di variabile valido, ovvero non ci siano spazi o altre restrizioni. È necessario prestare attenzione che la riga all'interno delle parentesi sia quotata correttamente. Le parentesi quadre forniscono anche un modo per ottenere un nome di proprietà da qualsiasi espressione, al contrario di una stringa letterale da una variabile:

let key = "ama gli uccelli";

// come utente ["mi piacciono gli uccelli"] = vero;

utente = vero.

Qui la chiave variabile può essere calcolata in fase di esecuzione e dipende dall'input dell'utente e quindi utilizzata per accedere alla proprietà. Questo offre ai programmatori molta flessibilità. La notazione a punti non può essere utilizzata in modo simile, poiché itera sull'oggetto JavaScript. Di seguito è riportato un esempio.

Const oggetto

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

Potrebbe sembrare che un oggetto JavaScript in linea (*) generi un errore, ma non lo farà. Questo perché const cattura il valore dell'utente stesso. E qui l'utente mantiene sempre un riferimento allo stesso oggetto. La riga (*) va all'interno dell'oggetto, non viene riassegnata dall'utente. Const darà un errore se provi a impostare l'utente e qualcos'altro. Clonando e unendo, Object.assign crea un altro riferimento allo stesso oggetto nel caso in cui debba essere duplicato. Anche questo è fattibile, ma un po' più complicato perché non esiste un metodo integrato in JavaScript. In realtà, questo è raramente necessario. Nella maggior parte dei casi viene utilizzata la copia per riferimento. Ma se ne hai davvero bisogno, allora devi creare un oggetto JavaScript e replicare la struttura di quello esistente, copiandone le proprietà a livello primitivo. Di seguito è riportato 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 gli oggetti src1, ..., srcNINTO dest. In altre parole, le proprietà di tutti gli argomenti a partire dal secondo vengono copiate nel primo. Quindi ritorna a dest. Ad esempio, puoi usarlo per combinare più oggetti in uno.

Ed è anche possibile utilizzare Object.assign per sostituire il semplice ciclo clone. Copia tutte le proprietà dell'utente in un oggetto vuoto e lo restituisce, proprio come un ciclo ma più breve. Finora, si presumeva 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 clone che controlla ogni valore utente e, se si tratta di un oggetto, ne replica la struttura. Questo è chiamato "clonazione profonda".

Esiste un algoritmo di clonazione profondo standard che gestisce il caso precedente e casi più complessi chiamato Algoritmo di clonazione strutturato. Per evitare di reinventare la ruota, puoi utilizzare un'implementazione funzionante dalla libreria JavaScript lodash chiamata _.cloneDeep (obj).

Tecniche avanzate

Se un programmatore esegue il ciclo su un oggetto e cerca di ottenere tutte le proprietà nello stesso ordine in cui sono state aggiunte, può fare affidamento su un "ordinamento speciale" in cui vengono ordinate le proprietà intere e altre vengono formate nell'ordine in cui è stato creato l'oggetto JavaScript .

I metodi oggetto avanzati trattano concetti che vengono usati raramente in JavaScript. Questo perché queste potenti funzionalità non sono necessarie negli scenari normali. Alcuni di questi metodi potrebbero non funzionare nei browser meno recenti come le prime versioni di Netscape 4.

L'uso del prototipo potrebbe essere utilizzato per creare oggetti JavaScript e tutti i metodi mycircle, non solo quelli nuovi. Questo dà un carico di prestazioni misto. Non devono mantenere copie separate dei metodi per ogni istanza dell'oggetto, quindi potrebbero richiedere meno memoria per funzionare, ma il browser deve cercare gli ambiti corrente e padre per trovarli. Questo può portare a una latenza estrema. In genere, l'utente dovrebbe utilizzare ciò che è appropriato per il codice piuttosto che basare tale decisione sulle prestazioni, a meno che non si tratti di un ambiente controllato molto specifico.

Ritorna vero

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

I metodi privati ​​possono essere creati allo stesso modo. È solo una funzione che viene creata all'interno di una funzione di costruzione. Questo può sembrare confuso per alcuni, 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 assegnati a un costruttore pubblico e accessibili utilizzando metodi pubblici di oggetti Javascript.

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

) var secretValue = "";

this.method1 = function () (secretValue = "(! LANG: nessuna sorpresa";!}

this.method2 = cantBeSeen;

) var oneOb = new myob ();

oneOb.method1 ();

// avverte "nessuna sorpresa" oneOb.method2 ();

// avverte "nessuna sorpresa".

Modello di comando

Gli oggetti comando consentono sistemi debolmente accoppiati, separando quelli che emettono la richiesta dagli oggetti e, di fatto, elaborano la richiesta. Queste richieste sono chiamate eventi e il codice che gestisce le richieste è chiamato gestori di eventi.

Supponiamo che tu stia creando applicazioni che supportano le azioni degli Appunti Taglia, Copia e Incolla. Queste azioni possono essere attivate in diversi modi all'interno dell'applicazione: dal sistema di menu, dai menu contestuali, ad esempio, facendo clic con il pulsante destro del mouse su un campo di testo o tramite scorciatoie da tastiera. Gli oggetti comando consentono di centralizzare l'elaborazione di queste azioni, una per ogni operazione quando è necessario un solo comando per elaborare tutte le richieste di taglio, uno per tutte le richieste di copia e uno per tutte le richieste di incolla.

Poiché i comandi centralizzano tutte le elaborazioni, sono spesso coinvolti anche nell'elaborazione delle funzioni di cancellazione per l'intera applicazione. È possibile ottenere miglioramenti significativi applicando le moderne tecniche JavaScript, che si traducono in applicazioni più efficienti, affidabili e manutenibili.

I modelli JavaScript + jQuery possono essere utilizzati per vedere come farlo. Questo pacchetto unico include JavaScript ottimizzato per tutti i modelli GoF utilizzando funzionalità più avanzate come spazi dei nomi, prototipi, moduli, oggetti funzione, chiusure, funzioni anonime e altro. Se gli utenti desiderano gli strumenti e le tecniche più recenti per i modelli JavaScript, i modelli jQuery e le architetture di modelli, questo è il miglior caso d'uso. Questo pacchetto contiene informazioni preziose e aggiornate per gli sviluppatori JavaScript. Ecco cosa è incluso:

1. Modelli GoF ottimizzati per JavaScript.
2. Moderni modelli di progettazione JavaScript.
3. Modelli di progettazione Model-View.
4. Modelli di progettazione JQuery.
5. Motivi architettonici Idiomi JavaScript.
6. Esempi di applicazioni (MVC, SPA, ecc.)

Le basi suggerite della sintassi degli oggetti JavaScript sono molto importanti per i programmatori alle prime armi. Devi prima capire gli oggetti, poi ci sarà la conoscenza della programmazione orientata agli oggetti. È indispensabile avere una profonda comprensione di questo materiale poiché funge da base per il resto del linguaggio JavaScript.

Gli oggetti sono uno dei concetti fondamentali in JavaScript. Quando ho iniziato a studiarli, mi sembravano abbastanza semplici: solo coppie di chiavi e valori, come descritto in teoria.

È stato solo dopo un po' che ho cominciato a capire che l'argomento è molto più complicato di quanto pensassi. E poi ho iniziato a studiare informazioni da varie fonti. Alcuni di loro hanno dato una buona idea del soggetto, ma non sono riuscito a vedere l'intera immagine in una volta.

In questo post, ho cercato di coprire tutti gli aspetti del lavoro con gli oggetti in JS, senza approfondire i singoli dettagli, ma anche senza perdere dettagli importanti che ti aiuteranno a capire l'argomento e a sentirti più sicuro mentre lo esplori ulteriormente.

Quindi iniziamo con le basi.

Un oggetto

Un oggetto in JavaScript è semplicemente una raccolta di proprietà, ognuna delle quali è una coppia chiave-valore.È possibile fare riferimento ai tasti utilizzando il punto ( obj.a) o notazione tra parentesi ( obj ["un"]).

Ricorda che le parentesi dovrebbero essere usate se la chiave è:

• non è un identificatore JavaScript valido (contiene uno spazio, un trattino, inizia con un numero...)
• è una variabile.

Viene chiamata una delle proprietà che gli oggetti in JS ottengono quando vengono creati Prototipo e questo è un concetto molto importante.

Prototipo

Ogni oggetto in JavaScript ha una proprietà interna chiamata Prototipo... Nella maggior parte dei browser, puoi fare riferimento ad esso con la notazione __proto__.

Prototipoè un modo per fornire l'ereditarietà delle proprietà in JavaScript. In questo modo puoi condividere le funzionalità senza duplicare il codice in memoria. Il metodo funziona creando un collegamento tra due oggetti.

In poche parole, Prototype crea un puntatore da un oggetto a un altro.

Catena di prototipi

Ogni volta che JS cerca una proprietà in un oggetto e non la trova direttamente sull'oggetto stesso, verifica la presenza della proprietà nell'oggetto prototipo. Se non è presente alcuna proprietà, JS continuerà a cercare nel prototipo l'oggetto correlato. Ciò continuerà finché JS non troverà una proprietà adatta o raggiungerà la fine della catena.

Facciamo un esempio:

Var cons = function() (this.a = 1; this.b = 2;) var obj = new cons (); cons.prototipo.b = 3; cons.prototipo.c = 4;
controè un costruttore (solo una funzione che può essere chiamata usando l'operatore nuovo).

Sulla quinta riga, creiamo un nuovo oggetto: una nuova copia contro... Subito dopo la creazione obj ottiene anche la proprietà prototipo.

E ora aggiungiamo le proprietà ( "avanti Cristo") oggetto prototipo contro.
Tenere conto obj:

obj.a // 1- tutto è uguale qui, obj.aè ancora 1.
obj.c?- in obj nessuna proprietà C! Tuttavia, come accennato in precedenza, JS ora lo cercherà nel prototipo obj e restituirà il valore 4.

Ora pensiamo al significato obj.b e come sarà quando rimuoveremo obj.b?

Obj.b uguale a 2. Abbiamo assegnato la proprietà B ma l'abbiamo fatto per il prototipo contro quindi quando controlliamo obj.b, quindi otteniamo ancora 2. Tuttavia, subito dopo aver rimosso obj.b JS non riesce più a trovare B alle ore bj, e quindi continuerà a cercare nel prototipo e restituirà il valore 3.

Creazione di oggetti

Letterale oggetto: sia obj = (a: 1);
Abbiamo creato un oggetto con la seguente catena di prototipi: obj ---> Object.prototype ---> null
Come puoi immaginare, oggetto.prototipoè il prototipo dell'oggetto così come la fine della catena di prototipi.

Oggetto.crea ():var newObj = Object.create (obj);
Ho nuovoOggetto ci sarà la seguente catena prototipo: newObj ---> obj ---> Object.prototype ---> null

Costruttore. Come nell'esempio sopra, un costruttore è semplicemente una funzione JS che ci permette di sfruttare l'operatore nuovo per crearne nuove istanze.

Classi ES6:

Class rettangolo (costruttore (altezza, larghezza) (this.height = altezza; this.width = larghezza;) getArea () (restituisce this.height * this.width;)) let quadrato = nuovo rettangolo (2, 2);
Piazza- istanza costruttore rettangolo e così possiamo chiamare square.getArea() // 4, larghezza.quadrata e anche tutte le funzioni ereditate da oggetto.prototipo.

Qual è il modo migliore? Se prevedi di creare più istanze, puoi utilizzare ES6 o il costruttore. Se prevedi di creare l'oggetto una volta, è meglio specificare un letterale, poiché questo è il modo più semplice.

E ora che abbiamo appreso di prototipo e familiarizzato con tutti i modi per creare nuovi oggetti, possiamo passare a discutere uno dei momenti più confusi associati agli oggetti.

Confronto e modifica di oggetti

In JavaScript, gli oggetti sono di tipo riferimento

Quando creiamo un oggetto sia obj = (a: 1);, variabile obj ottiene l'indirizzo di memoria dell'oggetto, ma non il suo valore! È imperativo comprendere questa differenza, altrimenti potrebbero verificarsi errori. Quando creiamo un altro oggetto let newObj = obj, in realtà creiamo puntatore a una certa area della memoria obj piuttosto che un oggetto completamente nuovo.

Ciò significa che facendo nuovoOggetto.a = 2, in realtà cambiamo obj così che obj.a diventa uguale a 2!

Questo approccio porta facilmente a bug, motivo per cui molte aziende lavorano con oggetti immutabili. Invece di modificare un oggetto già creato, dovrai creare nuovamente un nuovo oggetto (una copia dell'originale) e apportare modifiche già al suo interno. Ecco come funzionano le librerie importanti come Redux, e in generale è uno dei concetti fondamentali della programmazione funzionale. Puoi leggere di più a riguardo.

Uguaglianza

Ne consegue anche da quanto sopra che due oggetti non possono mai essere uguali, anche se hanno le stesse proprietà. Ciò è dovuto al fatto che JS confronta effettivamente la posizione degli oggetti in memoria e due oggetti non si trovano mai nella stessa posizione di memoria.

// Due oggetti distinti con le stesse proprietà non sono uguali var fruit = (name: "apple"); var fruitbear = (nome: "mela"); frutta === orso di frutta; // return false // qui fruit e fruitbear puntano allo stesso oggetto var fruit = (name: "apple"); var orso fruttifero = frutto; frutta === orso di frutta; // restituisce vero
Quindi, molto probabilmente ti sarai già chiesto come puoi confrontare gli oggetti o come eseguire varie manipolazioni con gli oggetti, dato il requisito della loro immutabilità.

Consideriamo diverse possibilità.

Cambiare un oggetto

Diciamo che è chiaro che non dobbiamo cambiare gli oggetti in modo amichevole, quindi vogliamo creare una copia dell'oggetto corrispondente e cambiarne le proprietà. Viene in soccorso Oggetto.assegna ().

Var obj = (a: 1, b: 2); var newObj = Object.assign ((), obj, (a: 2)) // (a: 2, b: 2)
Se vogliamo cambiare il valore della proprietà un oggetto obj, Puoi usare oggetto.assegnare per creare una copia obj e le sue modifiche.

Nell'esempio, puoi vedere che prima creiamo un oggetto vuoto, quindi copiamo i valori obj e apportare le nostre modifiche, ottenendo eventualmente un oggetto nuovo e pronto all'uso.

Si prega di notare che questo metodo non funzionerà per la copia profonda. Quando parliamo di deep copying, intendiamo che è necessario copiare un oggetto con una o più proprietà.

Const obj = (a: 1, b: (a: 1)); // la proprietà b è un oggetto
Oggetto.assegna () copia le proprietà di un oggetto, quindi se il valore della proprietà è un puntatore a un oggetto, viene copiato solo il puntatore.

Una copia profonda richiede un'operazione ricorsiva. Qui puoi scrivere una funzione o semplicemente usare il metodo _.cloneDeep dalla biblioteca Lodash.

Confronto di oggetti

Un bel trucco per lavorare con gli oggetti è la conversione delle stringhe. Nell'esempio seguente, convertiamo entrambi gli oggetti in stringhe e li confrontiamo:

JSON.stringify (obj1) === JSON.stringify (obj2)
Questo approccio è giustificato, perché alla fine stiamo confrontando stringhe che rappresentano un puntatore a un tipo di valore. La cattiva notizia è che non sempre funziona, principalmente perché l'ordine delle proprietà dell'oggetto non è garantito.

Un'altra buona soluzione è usare il metodo _.è uguale da Lodash facendo un confronto profondo di oggetti.

E prima di chiudere, esaminiamo alcune domande frequenti sugli oggetti. Questo aiuterà ad approfondire l'argomento e ad applicare le conoscenze acquisite nella pratica.

Prova a pensare tu stesso alla soluzione prima di leggere la risposta.

Come faccio a conoscere la lunghezza di un oggetto?

Per ottenere una risposta, è necessario scorrere tutte le proprietà dell'oggetto una per una e contarle. Esistono diversi modi per eseguire questa iterazione:

• per in... Questo metodo copre tutte le proprietà numerabili di un oggetto e le sue catene di prototipi. Abbiamo avuto modo di conoscere il prototipo (e speriamo di aver appreso il materiale), quindi dovrebbe essere chiaro che l'applicazione per in non sarà sempre corretto ottenere le proprietà di un oggetto.
• Chiavi.oggetto... Questo metodo restituisce un array con le chiavi di all possedere(appartenente all'oggetto specificato) conteggio proprietà. Questo approccio è migliore, poiché lavoriamo solo sulle proprietà dell'oggetto, non facendo riferimento alle proprietà. prototipo... Ci sono, tuttavia, situazioni in cui hai assegnato un attributo enumerabile alcune proprietà su false, e chiavi.oggetto di conseguenza, lo salta e ottieni un risultato errato. Questo accade raramente, ma in questi casi tornerà utile getOwnPropertyNames.
• getOwnPropertyNames restituisce un array contenente all possedere chiavi oggetto (sia numerabili che non numerabili).

Da segnalare anche:

• Valori.oggetto itera sulle proprie proprietà numerabili e restituisce un array con corrispondenza i valori.
• Voci.oggetto itera sulle proprie proprietà numerabili e restituisce un array con le chiavi e i loro valori.

Penso che tu abbia notato che la maggior parte dei metodi precedenti restituisce un array. Questa è un'opportunità per sfruttare appieno i metodi JavaScript per lavorare con gli array.

Uno di questi metodi è array.lunghezza... Di conseguenza, possiamo semplicemente scrivere

Sia objLength = Object.getOwnPropertyNames (obj) .length;

Come verificare se un oggetto è vuoto?

1. JSON.stringify (myObj) === “()”?. Qui utilizziamo di nuovo lo strumento di conversione delle stringhe per verificare facilmente se un oggetto è vuoto (confrontando le stringhe, non gli oggetti).
2. Object.keys (myobj) .length // true?.? Come ho detto, convertire le chiavi di un oggetto in un array può essere molto utile. Qui usiamo la conveniente proprietà lunghezza ereditato da Array.prototype controllando la lunghezza delle chiavi nell'array con esso. in JS 0 diventa falso, quindi aggiungendo ! lo trasformiamo in vero. Tutti gli altri numeri diventeranno falsi.

Infine

Spero che ora ti senta più sicuro nel creare e lavorare con gli oggetti. Riassumiamo:

• Ricorda che gli oggetti sono di tipo riferimento, il che significa che si consiglia di lavorarci senza modificare gli oggetti originali.
• Fai amicizia con la proprietà prototipo e una catena prototipo.
• Dai un'occhiata agli strumenti di Object Assistant. Ricorda che puoi trasformare gli oggetti in stringhe, ottenere un array con le loro chiavi o semplicemente scorrere le loro proprietà usando l'insieme di metodi che conosciamo.

Buona fortuna nell'apprendimento degli oggetti JavaScript.

In questo articolo, voglio parlare nel modo più completo e coerente possibile di cosa sia un oggetto in JavaScript, quali sono le sue capacità, quali relazioni possono essere costruite tra gli oggetti e quali metodi di ereditarietà "nativa" ne derivano, come tutto ciò influisce prestazioni e cosa fare tutto :)

L'articolo NON dirà una parola su: emulazione del tradizionale paradigma classe-oggetto, zucchero sintattico, wrapper e framework.

La complessità del materiale aumenterà dall'inizio alla fine dell'articolo, quindi per i professionisti le prime parti potrebbero sembrare noiose e banali, ma oltre sarà molto più interessante :)

Oggetti in JavaScript

Molti articoli contengono la frase "In JavaScript, tutto è un oggetto". Tecnicamente non è del tutto vero, ma fa la giusta impressione sui neofiti :)

In effetti, molto in una lingua è un oggetto, e anche ciò che non è un oggetto può avere alcune delle sue capacità.

È importante capire che la parola "oggetto" è usata qui non nel senso di "un oggetto di una certa classe". Un oggetto in JavaScript è principalmente solo una raccolta di proprietà (se è più facile per chiunque, puoi chiamarlo un array associativo o un elenco), costituito da coppie chiave-valore. Inoltre, la chiave può essere solo una stringa (anche per gli elementi dell'array), ma il valore può essere qualsiasi tipo di dati elencato di seguito.

Quindi ce ne sono 6 in JavaScript tipi di base i dati sono Undefined (che non indica alcun valore), Null, Boolean (boolean), String (stringa), Number (numero) e Object (oggetto).
Inoltre, i primi 5 sono primitivo tipi di dati, ma Object no. Inoltre, si può convenzionalmente supporre che il tipo Object abbia "sottotipi": un array (Array), una funzione (Funzione), un'espressione regolare (RegExp) e altri.
Questa è una descrizione un po' semplificata, ma in pratica di solito è sufficiente.

Inoltre, i tipi primitivi String, Number e Boolean sono associati in qualche modo ai "sottotipi" non primitivi di Object: String, Number e Boolean, rispettivamente.
Ciò significa che la stringa "Hello, world", ad esempio, può essere creata sia come valore primitivo che come oggetto di tipo String.
In breve, questo viene fatto in modo che il programmatore possa utilizzare metodi e proprietà quando lavora con valori primitivi come se fossero oggetti. Puoi leggere di più su questo nella sezione corrispondente di questo articolo.

Opera per referenza

Un collegamento è un mezzo per accedere a un oggetto con vari nomi. Il lavoro con qualsiasi oggetto viene eseguito esclusivamente per riferimento.
Dimostriamolo con un esempio:

prova = funzione () (avviso ("Ciao!")) // Crea una funzione (avviso ("Ciao!")) (E la funzione, come ricordiamo, è un oggetto a tutti gli effetti) e fa in modo che la variabile di test vi faccia riferimento
collegamento_prova = prova; // test_link ora si riferisce anche alla nostra funzione
test (); // Ciao!
collegamento_prova (); // Ciao!

Come possiamo vedere, sia il primo collegamento che il secondo danno lo stesso risultato.
È necessario rendersi conto che non abbiamo alcuna funzione denominata test e che la variabile di test non è una sorta di collegamento "principale" o "principale" e "test_link" è minore.

La nostra funzione, come qualsiasi altro oggetto, è solo un'area in memoria e tutti i riferimenti a quest'area sono assolutamente equivalenti. Inoltre, un oggetto potrebbe non avere alcun riferimento - in questo caso si chiama anonimo e può essere utilizzato solo subito dopo la creazione (ad esempio passato a una funzione), altrimenti sarà impossibile accedervi e presto verrà distrutto dal garbage collector (garbage collection), che è ciò che elimina gli oggetti senza riferimenti.

Vediamo perché è così importante capirlo:

prova = (prop: "un testo") // Crea un oggetto con una proprietà prop
collegamento_prova = prova; // Crea un altro collegamento a questo oggetto

Avviso (test.prop); // un testo

// Cambia la proprietà dell'oggetto
test_link.prop = "nuovo testo";

Avviso (test.prop); //nuovotesto
avviso (test_link.prop); //nuovotesto
/ * Si potrebbe dire che la proprietà è cambiata qua e là - ma non è così.
L'oggetto è uno. Quindi la proprietà è cambiata una volta e i collegamenti continuano a puntare dove stanno puntando. * /

// Aggiungi una nuova proprietà e rimuovi quella vecchia
test.new_prop = "ciao";
eliminare test.prop;

Avviso (test_link.prop); // undefined - questa proprietà non esiste più
avviso (test_link.new_prop);

// Rimuovi il collegamento
cancella prova;
avviso (test.new_prop);
/ * A questo punto, lo script genererà un errore, perché test non esiste più e test.new_prop non esiste più * /
avviso (test_link.new_prop); // Ciao
/ * ma qui è tutto in ordine, perché non abbiamo eliminato l'oggetto stesso, ma solo un collegamento ad esso. Ora il nostro oggetto è puntato da un singolo link test_link * /

// Crea un nuovo oggetto
prova = collegamento_prova; // Per prima cosa, crea di nuovo il collegamento di prova
test_link = (prop: "testo") // Ed ecco il nuovo oggetto

Avviso (test_link.prop); // un testo
avviso (test.prop); // non definito
/ * La creazione di un nuovo oggetto interrompe il collegamento e ora test e test_link puntano a oggetti diversi.
In effetti, questo equivale a rimuovere il test_link e ricrearlo, ma già puntando a un altro oggetto * /
avviso (test.new_prop); // ciao - ora test contiene un collegamento al nostro primissimo oggetto

* Questo codice sorgente è stato evidenziato con Source Code Highlighter.

Questo comportamento degli oggetti solleva spesso molte domande per gli sviluppatori alle prime armi, quindi spero che questo testo porti un po' di chiarezza. Se vogliamo creare una copia veramente nuova e indipendente dell'oggetto e non un collegamento, l'unico modo per farlo è creare un nuovo oggetto e copiare lì le proprietà richieste.

Vale anche la pena notare che lavorare con gli oggetti per riferimento, oltre agli effetti divertenti sopra menzionati, fornisce anche un notevole risparmio di memoria, che è importante quando un oggetto è ampiamente utilizzato in vari punti del programma.

valori primitivi

Come accennato in precedenza, i tipi di dati String e Number possono essere sia oggetti che valori primitivi.

obj = new String ("ciao"); // Crea una stringa come oggetto
semplice = "ciao"; // Crea un valore primitivo

Avviso (obiettivo); // Ciao
avviso (semplice); // ciao - finora tutto è prevedibile

Avviso (lunghezza oggetto); // 6 - un oggetto di tipo String ha una proprietà length che memorizza la lunghezza della stringa
alert (semplice.lunghezza); // 6
/ * Sebbene simple non sia un oggetto, possiamo accedere allo stesso insieme di proprietà di un oggetto String. Questo è abbastanza utile * /

Obj.prop = "testo";
simple.prop = "testo";

Avviso (obj.prop); // testo - poiché obj è un oggetto ordinario, possiamo facilmente dargli un'altra proprietà
avviso (semplice.prop); // undefined - ma simple non è un oggetto e questo numero non funzionerà per noi

* Questo codice sorgente è stato evidenziato con Source Code Highlighter.

Lo stesso vale sia per Number che per Boolean (beh, oltre al fatto che non hanno una proprietà di lunghezza, ma ci sono una serie di altre meravigliose proprietà).
L'uso di stringhe e numeri come oggetti non ha alcuna utilità pratica. i valori primitivi sono più convenienti con cui lavorare, ma allo stesso tempo conservano tutte le funzionalità necessarie. Tuttavia, per completezza, è necessario comprendere questo meccanismo.

Non confondere l'uso di valori primitivi con l'uso di letterali - ad esempio, indipendentemente dal fatto che creiamo un array come "test = new Array ()" o come "test =", il risultato sarà sempre lo stesso oggetto . Non otterremo alcun valore primitivo.

Creare e usare oggetti

Quindi, a differenza dei linguaggi in cui è implementato il paradigma classe-oggetto, non è necessario creare prima una classe, quindi creare un oggetto della classe. Possiamo creare immediatamente un oggetto, cosa che faremo nell'esempio seguente:

prova = (
simple_property: "Ciao",
oggetto_proprietà: (
user_1: "Petia",
user_2: "Vasya"
},
proprietà_funzione: funzione (utente) (
avviso (questo .simple_property + "," + questo .object_property);
}
}

Test.function_property ("utente_1"); // Ciao, Petya.

* Questo codice sorgente è stato evidenziato con Source Code Highlighter.

Davanti a noi c'è l'oggetto di prova, che ha 3 proprietà, i cui nomi, spero, parlino da soli. Quello che ci interessa di più è la proprietà function_property, che contiene la funzione. Tale funzione può essere chiamata metodo di un oggetto.

La nostra funzione usa due volte la parola chiave this, che è un puntatore (cioè un riferimento) all'oggetto da cui viene chiamata la funzione. Pertanto, this.simple_property = test.simple_property = "Ciao" e this.object_property = test.object_property = "Peter".

Dovrebbe essere chiaro che questo si riferisce sempre all'oggetto da cui viene chiamata la funzione, e non all'oggetto a cui appartiene. Sebbene questi siano lo stesso oggetto in questo esempio, non è sempre così.

test.function_property ("utente_1"); // Ciao, Petya.

Test2 = nuovo oggetto (); // Un'altra forma di creazione di un nuovo oggetto, simile a test2 = ()

Test.function_property.call (test2, "utente_1"); //errore
/ * Il metodo call ti permette di chiamare una funzione per conto di un altro oggetto. In questo caso, chiamiamo il metodo function_property dell'oggetto test, e questo punta non più all'oggetto test, ma all'oggetto test2. E poiché non ha la proprietà object_property, quindi quando provi a ottenere this.object_property, lo script darà un errore * /

// prova a sistemare la situazione
test2.simple_property = "Buongiorno";
test2.object_property = test.object_property; // In questo caso, useremo specificando l'oggetto per riferimento in modo da non duplicare il codice

Test.function_property.call (test2, "utente_1"); // Buon giorno, Petya.

* Questo codice sorgente è stato evidenziato con Source Code Highlighter.

Dovrebbe anche essere chiaro dall'esempio che non ci sono passaggi chiari per la creazione e l'utilizzo di un oggetto. L'oggetto può essere modificato in qualsiasi modo in qualsiasi momento - prima, dopo e anche durante l'uso. Questa è anche una differenza importante dall'OOP "tradizionale".

Costruttore

Nell'esempio sopra, abbiamo creato 2 oggetti che hanno alcune somiglianze. Erano presenti entrambe le proprietà simple_property e object_property. Ovviamente, quando si scrive codice reale, spesso si pone il compito di creare oggetti identici o semplicemente simili. E, naturalmente, non dobbiamo creare manualmente ogni oggetto del genere.

Un costruttore verrà in nostro aiuto. Un costruttore in JavaScript non fa parte di una classe (perché non ci sono classi), ma solo una funzione a sé stante. La funzione più comune.

make_me = funzione (_nome) (
alert ("sono stato lanciato");
questo .nome = _nome;

}

/ * Vediamo cosa sta succedendo qui. L'interprete vede il nuovo operatore e controlla cosa c'è alla sua destra. Perché make_me è una funzione e può essere utilizzata come costruttore, quindi viene creato un nuovo oggetto in memoria e viene eseguita la funzione make_me, che punta a questo nuovo oggetto. Successivamente, a questo oggetto viene aggiunta la proprietà name, a cui viene assegnato il valore dall'argomento _name, e il metodo show_name. Inoltre (non so in quale momento esatto, ma non importa) la variabile figlio inizia a puntare al nostro nuovo oggetto appena nato * /

Avviso (nome.figlio); //Vasya
figlio.nome_mostra (); //Vasya

child2.show_name (); //Peter

Child2.show_name = funzione () (avviso ( "Non dirò il mio nome");} // Non dimenticare che possiamo cambiare i nostri oggetti in qualsiasi momento
child2.show_name (); // non dirò il mio nome

Child.show_name (); // Vasya - i bambini non si influenzano in alcun modo

* Questo codice sorgente è stato evidenziato con Source Code Highlighter.

Puoi anche confrontare il costruttore con un padre: dà alla luce un bambino, dotandolo di determinate qualità, ma subito dopo la creazione, il bambino diventa completamente indipendente dal genitore e può diventare molto diverso dai suoi fratelli.

Se ricordiamo la descrizione dei tipi di dati all'inizio dell'articolo, diventa chiaro che Object e i suoi sottotipi (Funzione, Array e altri) sono in realtà costruttori che danno all'oggetto creato le capacità di una funzione, un array, ecc.

Quindi questo è molto meglio. Ora abbiamo la possibilità di creare oggetti secondo un certo schema. Tuttavia, non tutto va bene. Innanzitutto, ogni oggetto che creiamo e tutte le sue proprietà e metodi occupano un posto separato nella memoria, sebbene in molti modi vengano ripetuti. In secondo luogo, cosa succede se volessimo preservare la connessione tra genitore e figlio ed essere in grado di modificare tutti gli oggetti figlio contemporaneamente. Un prototipo ci verrà in aiuto.

Prototipo

Proprio come ogni bambino ha un padre e una madre (almeno biologicamente), così fa ogni oggetto in JavaScript. E se il padre, come abbiamo deciso, lavora come designer, allora la madre è solo un prototipo. Vediamo come succede:

make_me = funzione (_nome) (
alert ("sono stato lanciato");
questo .nome = _nome;
questo .show_name = function () (avviso (questo .name);)
}
/*
Vedendo la parola chiave function, l'interprete controlla il codice alla sua destra, e poiché va tutto bene - crea un nuovo oggetto in memoria, che è anche la nostra funzione. Quindi, automaticamente (senza la partecipazione del programmatore) viene creata una proprietà prototipo per questa funzione, che fa riferimento a un oggetto vuoto. Se lo facessimo manualmente, sembrerebbe make_me.prototype = new Object ();

Quindi, anche l'oggetto dato (indicato dalla proprietà prototipo) viene aggiunto automaticamente con una proprietà del costruttore che punta alla funzione. Si scopre che questo è un collegamento circolare.

Ora questo oggetto, che può essere descritto come (costruttore: ... ecco un riferimento alla funzione ...) - è il prototipo della funzione.
*/

// L'oggetto è davvero un oggetto
alert (tipo di make_me.prototype.constructor); // La funzione è la nostra funzione
avviso (make_me.prototype.constructor === make_me); // vero

// Aggiungi un nuovo metodo al prototipo della funzione make_me

Bambino = nuovo make_me ("Vasya"); // mi hanno lanciato
/ * Ora, oltre a quanto descritto nell'esempio precedente, viene creata un'ulteriore proprietà nascosta [] nell'oggetto figlio, che punta allo stesso oggetto di make_me.prototype. Perché la proprietà è nascosta, non possiamo né visualizzarne il valore né modificarla, tuttavia svolge un ruolo importante in ulteriori lavori * /

Avviso (nome.figlio); //Vasya
figlio.nome_mostra (); //Vasya

Child.set_name ("Kolya");
/ * Innanzitutto, l'interprete cerca il metodo set_name sull'oggetto figlio. Poiché non è presente, continua a cercare il bambino.[] Property, lo trova lì e lo esegue. * /
figlio.nome_mostra (); // Kolya - ora il nome di Vasya è Kolya :)

Make_me.prototype.show_name2 = function() (avviso ("Ciao," + questo .name;) //T.k. il prototipo è un oggetto ordinario, possiamo anche cambiarlo al volo

Child2 = nuovo make_me ("Petya");
child2.show_name2 (); // Ciao, Petya
figlio.nome_mostra2 (); // Hello Kolya - i cambiamenti nel prototipo riguardano non solo gli oggetti appena creati, ma anche tutti quelli vecchi

Child2.show_name2 = funzione () (avviso ( "Non dirò il mio nome");} // Possiamo ancora cambiare l'oggetto stesso, mentre il nuovo metodo show_name2 in questo oggetto (e solo in esso) "sovrascriverà" per così dire il vecchio metodo dal prototipo
child2.show_name2 (); // Non dirò il mio nome - perché ora abbiamo il nostro metodo show_name2, quindi viene chiamato e non viene eseguita alcuna ricerca nel prototipo

Child.show_name2 (); // Ciao, Kolya - è ancora tutto qui

Make_me.prototype = (prop: "ciao") // Proviamo a ricreare di nuovo il prototipo

Avviso (child.prop); // non definito
figlio.nome_mostra2 (); //Ciao Kolya
/ * Se ricordi cos'è il lavoro per riferimento, allora tutto è chiaro. La ricreazione del prototipo interrompe la connessione e ora la proprietà [] degli oggetti child e child2 punta a un oggetto (che era il prototipo della funzione make_me) e la proprietà make_me.prototype a un altro oggetto, che è il nuovo prototipo della funzione make_me * /

Child3 = nuovo make_me ("Oleg");
avviso (child3.prop); // ciao - come previsto

* Questo codice sorgente è stato evidenziato con Source Code Highlighter.

Come si può vedere dall'esempio, mentre il padre rimane fedele alla madre (cioè, mentre il prototipo della funzione rimane lo stesso), tutti i bambini dipendono dalla madre e sono sensibili a tutti i cambiamenti in lei. Tuttavia, non appena i genitori divorziano (il designer cambia il prototipo in un altro), i bambini si disperdono immediatamente chi dove e non c'è più connessione con loro.

Un po' di terminologia
Fino a quando non viene interrotta la connessione primaria tra il costruttore e il prototipo, possiamo osservare la seguente immagine:

make_me = funzione (_nome) (
alert ("sono stato lanciato");
questo .nome = _nome;
questo .show_name = function () (avviso (questo .name);)
}

Make_me.prototype.set_name = funzione (_name) (questo .name = _name;)
bambino = nuovo make_me ("Vasya");

Avviso (tipo di make_me.prototype); // oggetto - la funzione ha una proprietà prototipo
alert (tipodi figlio.prototipo); // undefined - l'oggetto creato NON ha proprietà prototipo
alert (child.constructor.prototype === make_me.prototype); // true - ma l'oggetto ha una proprietà di costruzione, che punta alla funzione di costruzione make_me, che, a sua volta, ha una proprietà di prototipo

* Questo codice sorgente è stato evidenziato con Source Code Highlighter.

Come ho notato dopo aver letto numerosi forum su questo argomento, i problemi principali che le persone incontrano quando confondono la proprietà prototipo di una funzione e la proprietà nascosta [] di un oggetto creato con quella funzione.
Entrambe queste proprietà sono riferimenti allo stesso oggetto (purché il collegamento primario tra il prototipo e il costruttore non sia interrotto), ma sono comunque proprietà diverse, con nomi diversi, una di esse è a disposizione del programmatore e la l'altro no.

È sempre necessario capire chiaramente che se stiamo parlando del prototipo di un costruttore, allora questa è sempre la proprietà prototipo e se si tratta del prototipo dell'oggetto creato, allora questa è una proprietà nascosta [].

Eredità

Ora sappiamo che ogni oggetto ha un riferimento al prototipo nascosto e ogni prototipo è un oggetto normale.
I lettori più perspicaci hanno già sentito l'odore della ricorsione :)
Infatti, poiché un prototipo è un oggetto ordinario, quindi, a sua volta, ha un collegamento al suo prototipo e così via. Ecco come viene implementata la gerarchia del prototipo.

uccello = funzione () () // Questo è il costruttore di uccellini
bird.prototype.cry = function () (avviso ("Cree!");) // L'uccello può urlare
bird.prototype.fly = function () (alert ("sto volando!");) // e fly

Anatra = funzione () ()
duck.prototype = nuovo uccello ();
duck.prototype.cry = function () (avviso ("Quack quack!");) // L'anatra urla in modo diverso
duck.prototype.constructor = anatra; // Forza l'impostazione della proprietà prototipo.constructor su duck, perché altrimenti si riferirà all'uccello

Billy = nuova anatra (); // Billy è la nostra papera
billy.fly(); //Sto volando! - Billy può volare perché è un uccello
billy.cry (); //Quack quack! - Billy urla ciarlatano perché è un'anatra

* Questo codice sorgente è stato evidenziato con Source Code Highlighter.

In questo modo puoi implementare una gerarchia di qualsiasi livello di annidamento.

Problema con l'asterisco

Ora, poiché sappiamo così tanto su tutto questo, proviamo a capire quanto sta succedendo in queste tre righe.

make_me = funzione () ()
figlio = nuovo make_me ();
alert (child.toString()); // uscite

* Questo codice sorgente è stato evidenziato con Source Code Highlighter.

Sulla prima riga, creiamo una nuova funzione e una variabile make_me che punta a questa funzione. Questo crea un prototipo per la funzione, make_me.prototype, che contiene una proprietà del costruttore che punta a make_me.
Ma non è tutto :)
Perché anche la funzione make_me è un oggetto, quindi a sua volta ha un papà e una mamma, ad es. costruttore e prototipo. Il suo costruttore è una funzione nativa del linguaggio Function() e il suo prototipo è un oggetto contenente metodi call, apply, ecc. - è grazie a questo prototipo che possiamo utilizzare questi metodi in qualsiasi funzione. Questo dà alla funzione make_me una proprietà [] che punta a Function.prototype.

A sua volta, il prototipo del costruttore Function è anche un oggetto, il cui costruttore è (sorpresa!) Object (cioè Function.prototype. []. Constructor === Object), e il prototipo è un oggetto contenente le proprietà standard e metodi dell'oggetto, come toString, hasOwnProperty e altri (in altre parole - Function.prototype. [] ["hasOwnProperty"] - questo è esattamente lo stesso metodo che possiamo usare in tutti gli oggetti derivati ​​- e questo è esattamente il proprio metodo di questo oggetto e non ereditato). È così che scopriamo in modo interessante che tutti i tipi di oggetti sono derivati ​​da Object.

Possiamo continuare ulteriormente? Si scopre di no. Object.prototype contiene le proprietà di base di un oggetto proprio perché non ha un proprio prototipo. Object.prototype.[] = Null; A questo punto, il viaggio attraverso la catena del prototipo per trovare una proprietà o un metodo si ferma.

Un altro fatto interessante è che il costruttore di Object è Function. Quelli. Oggetto [].Costruttore === Funzione.
C'è un altro riferimento circolare: il costruttore per Object è Function e il costruttore per Function.prototype è Object.

Torniamo al nostro esempio. Abbiamo già capito come si crea la funzione, ora passiamo alla seconda riga. Lì creiamo un oggetto figlio il cui costruttore è la funzione make_me e il prototipo è make_me.prototype.

Bene, nella terza riga vediamo come l'interprete sale la catena, da bambino a bambino.[] (alias make_me.prototype), poi a figlio.[].[] (alias Object.prototype), e già lì trova il metodo toString, che viene avviato per l'esecuzione.

impurità

Potrebbe sembrare che l'ereditarietà tramite prototipi sia l'unico modo in cui JavaScript è possibile. Questo non è vero.
Si tratta di un linguaggio molto flessibile che fornisce non tanto regole quanto possibilità.

Ad esempio, se vogliamo, non possiamo assolutamente utilizzare prototipi, ma programmare utilizzando il concetto di mixin. Per questo, i nostri buoni vecchi amici - i costruttori ci saranno utili.

// Questo è un costruttore umano
uomo = funzione () (
this .live = function() (avviso ("Io vivo");) // Una persona sa come vivere
this .walk = function () (alert ("Sto camminando");) // Una persona può camminare
}

// Questo è il costruttore del poeta
poeta = funzione () (
questo .kill = funzione () (avviso ( "Il poeta ha ucciso un uomo");} // Un poeta può uccidere una persona
this .live = function() (alert ("Sono morto");) // Questo farà morire la persona
}

Vladimir = uomo nuovo (); // Vladimir è un uomo
vladimir.live (); // Io vivo - lui è vivo
vladimir.walk (); // io cammino - lui cammina

Poet.call (vladimir); // Esegui il costruttore poeta per l'oggetto vladimir
vladimir.kill (); // Il poeta ha ucciso l'uomo
vladimir.live (); //Sono morto

// E ora il focus
man.call (vladimir);
vladimir.live (); //Vivo

* Questo codice sorgente è stato evidenziato con Source Code Highlighter.

Cosa vediamo in questo esempio? Innanzitutto, è la capacità di ereditare da più oggetti che non si trovano nella stessa gerarchia. Nell'esempio, ce ne sono 2, ma ce ne possono essere quanti ne vuoi.
In secondo luogo, questa è l'assenza di qualsiasi gerarchia. L'override di proprietà e metodi è determinato esclusivamente dall'ordine in cui vengono chiamati i costruttori.
In terzo luogo, questa è la capacità di cambiare un oggetto in modo ancora più dinamico, ed è un oggetto separato, e non tutti i discendenti, come quando si cambia il prototipo.

Upd: Chiusure e proprietà private

Per non gonfiare questo articolo già piuttosto grosso, metto un link al post Chiusure in JavaScript, dove è scritto in qualche dettaglio a riguardo.

Cosa fare con tutto questo ora?

Come ho detto sopra, la modifica arbitraria dei singoli oggetti, l'uso di costruttori e mixin e la flessibilità dei prototipi sono solo strumenti, opportunità che consentono a un programmatore di creare codice che è sia terribile che bello sotto tutti gli aspetti. È importante solo capire quali compiti risolviamo, con quali mezzi, quali obiettivi raggiungiamo e quale prezzo paghiamo per questo.

Inoltre, la questione del prezzo è piuttosto non banale, soprattutto se si tratta di sviluppo per le versioni 6 e 7 di Internet Explorer.
1. Memoria: qui tutto è semplice. In tutti i browser l'ereditarietà sui prototipi richiede molte volte meno memoria rispetto alla creazione di metodi tramite i costruttori. Inoltre, più metodi e proprietà abbiamo, maggiore è la differenza. Tuttavia, vale la pena ricordare che se non abbiamo mille oggetti identici, ma solo uno, il consumo di memoria sarà comunque ridotto, perché ci sono altri fattori da considerare qui.
2. Tempo del processore: qui le principali sottigliezze sono collegate ai browser di Microsoft.
Da un lato, gli oggetti in cui vengono creati metodi e proprietà tramite un costruttore possono essere creati molte volte (in alcuni casi decine o centinaia di volte) più lentamente rispetto a un prototipo. Più metodi, più lento. Quindi, se il tuo IE si blocca per alcuni secondi durante l'inizializzazione dello script, c'è un motivo per scavare in questa direzione.

D'altra parte, i metodi di un oggetto (creati tramite un costruttore) possono essere eseguiti leggermente più velocemente di quelli prototipati. Se hai un disperato bisogno di accelerare l'esecuzione di un metodo in questo browser, devi tenerne conto. Tieni presente che è la chiamata al metodo (cioè la ricerca nell'oggetto) che viene accelerata e non la sua esecuzione. Quindi, se il metodo stesso viene eseguito per un secondo, non noterai uno speciale aumento delle prestazioni.

In altri browser si osservano problemi simili, in cui il tempo per creare oggetti e chiamare i loro metodi è approssimativamente lo stesso per entrambi gli approcci.

P.S. Di solito, in articoli di questo tipo, l'autore offre una sorta di wrapper, cercando di implementare l'ereditarietà classe-oggetto basata sul prototipo, o semplicemente zucchero sintattico per l'ereditarietà prototipale. Non lo faccio apposta, perché Penso che una persona che comprende il significato di questo articolo sia in grado di scrivere qualsiasi wrapper per se stessa e molte altre cose interessanti :)

Tag: Aggiungi tag

JavaScript è un linguaggio orientato agli oggetti... Ad eccezione dei costrutti del linguaggio di base come i cicli e le operazioni relazionali, quasi tutte le funzionalità JavaScript sono implementate in un modo o nell'altro utilizzando gli oggetti.

Gli oggetti vengono talvolta utilizzati in modo esplicito per eseguire attività specifiche, come l'elaborazione (X) di documenti HTML e XML basati sul Document Object Model. In altri casi, il ruolo degli oggetti è meno ovvio, come il ruolo dell'oggetto String quando si lavora con dati stringa primitivi.

I capitoli precedenti hanno già fornito esempi che dimostrano chiaramente l'utilità degli oggetti incorporati, ma in questo capitolo inizieremo ad esplorare direttamente gli oggetti JavaScript.

Oggetti in JavaScript

Gli oggetti in JavaScript possono essere divisi in quattro gruppi.

1. Oggetti personalizzati creati da un programmatore e aventi una struttura e un'entità che corrispondono a un'attività di programmazione specifica. Discuteremo le possibilità di creare e utilizzare tali oggetti in questo capitolo.
2. Gli oggetti incorporati sono offerti da JavaScript stesso. Questi includono oggetti associati a tipi di dati (Stringa, Numero e Booleano), oggetti che consentono di creare oggetti personalizzati e tipi compositi (Oggetto e Matrice) e oggetti che semplificano le attività comuni (come Data, Matematica e RegExp). Le capacità degli oggetti incorporati sono regolate dallo standard linguistico ECMA-262 e, in misura minore, dalle specifiche dei produttori di browser.
3. Oggetti browser che non fanno parte del linguaggio JavaScript ma sono supportati dalla maggior parte dei browser. Esempi di oggetti browser sono Window, che controlla le finestre del browser e interagisce con l'utente, e Navigator, che fornisce informazioni sulla configurazione del client. Poiché la maggior parte degli aspetti degli oggetti browser non sono standardizzati, le loro proprietà e il loro comportamento possono variare in modo significativo tra browser e versione. Oggetti di questo tipo verranno discussi in seguito.
4. Gli oggetti documento fanno parte del Document Object Model (DOM), come definito dal W3C. Tali oggetti forniscono al programmatore un'interfaccia strutturata per documenti (X) HTML e XML. Sono questi oggetti che forniscono a JavaScript la capacità di manipolare fogli di stile annidati (CSS - Cascade Style Sheet) e semplificare l'implementazione dell'HTML dinamico (DHTML). Gli oggetti Document sono accessibili dal browser tramite la proprietà document dell'oggetto Window (window. Document). Parleremo più avanti del DOM.

Principi per lavorare con gli oggetti

Un oggettoÈ una raccolta non ordinata di dati che include tipi di dati primitivi, funzioni e persino altri oggetti. Il vantaggio degli oggetti è che concentrano in un unico luogo tutti i dati e la logica necessari per eseguire un'attività specifica. L'oggetto String memorizza i dati di testo e offre molte delle funzioni necessarie per manipolarlo. Sebbene gli oggetti non siano richiesti in un linguaggio di programmazione (non ci sono oggetti in C, per esempio), certamente rendono il linguaggio più facile da usare.

Creazione di oggetti

Un oggetto viene creato utilizzando un costruttore, un tipo speciale di funzione che prepara un nuovo oggetto per l'uso inizializzando la memoria occupata dall'oggetto. Abbiamo visto nel Capitolo 4 che gli oggetti possono essere creati applicando la nuova operazione ai loro costruttori. Questa operazione fa sì che il costruttore crei un nuovo oggetto, la cui natura è determinata dal costruttore chiamato. Ad esempio, il costruttore String() crea oggetti String e il costruttore Array() crea oggetti Array. Ecco come definire i nomi dei tipi di oggetto in JavaScript: dal nome del costruttore che crea l'oggetto.
Ecco un semplice esempio di creazione di un oggetto:

var città = new String ();

Questa istruzione crea un nuovo oggetto String e inserisce un riferimento ad esso nella variabile city. Non ci sono argomenti per il costruttore qui, quindi la variabile city avrà un valore predefinito, in questo caso la stringa vuota. Puoi rendere questo esempio più interessante passando un argomento del valore iniziale al costruttore:

var city = new String ("San Diego");