oggetti JavaScript. Parte 8 Corso JavaScript da Principiante ad Avanzato in 10 post sul blog

Questa è la parte 8 della serie di post sul blog JavaScript che ti porterà dal principiante all'avanzato. Se non hai letto il precedente post del blog sulle funzioni JavaScript, puoi controllarlo qui. Entro la fine di questa serie conoscerai tutte le nozioni di base che devi sapere per iniziare a scrivere codice in JavaScript. Senza ulteriori indugi, iniziamo con l'ottavo tutorial.

Oggetti JavaScript – sommario:

1. oggetti JavaScript
2. Funzioni di costruzione di oggetti

oggetti JavaScript

Gli oggetti JavaScript hanno un ruolo importante. Sebbene sia un argomento relativamente ampio, può anche essere relativamente facile svilupparne una comprensione. Uno dei modi più comuni per comprendere gli oggetti è pensarli come se si stesse ricreando un'auto nel codice. Avremo due concetti principali quando abbiamo a che fare con gli oggetti. Avranno proprietà e metodi. Le proprietà sono le cose che gli oggetti javascript hanno e i metodi sono le cose che gli oggetti possono eseguire. Vediamolo con alcuni esempi.

// let's define multiple objects to have a better understanding
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "Plane starts taking off..."},
    land: function(){return "Plane starts landing..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "The car moves forward..."},
    smartSummon: function(){return "The car starts driving itself to you..."}
}

// we can access and console log the properties they have:
console.log("The properties for the plane:");
console.log("Can fly: " + plane.canFly);
console.log("Total number of wings: " + plane.numberOfWings);
// we can also make the plane perform actions
console.log(plane.takeOff());
console.log(plane.land());
// if you take a closer look, you can see that 
// we do not directly console.log the actions inside the methods
// instead we return them from the functions
// and in this case we are console logging them
// this way if we want we can also give the user an alert
// that tells the plane is taking off
alert(plane.takeOff());
// we can also learn about the properties the car has 
// and console log them as well for additional practice
console.log("Is it an electric car? " + car.isElectric);
console.log("What is the brand of the car: " + car.brand);
console.log("How many doors does it have? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Quando eseguiamo il codice sopra, dovremmo ottenere il seguente output:

Abbiamo appena visto due esempi principali di oggetti javascript: uno con un aereo e uno con un'auto. Proprio come gli aerei e le automobili hanno proprietà diverse e cose diverse che possono fare, oggetti diversi che creiamo possono fare cose diverse e avere proprietà diverse. Se dai un'occhiata più da vicino puoi iniziare a vedere un modello nel modo in cui definiamo oggetti, proprietà e metodi.

Iniziamo a definire gli oggetti proprio come stiamo definendo variabili o costanti, in questo caso di solito è sufficiente usare le costanti quando si definiscono oggetti javascript. Ma invece di assegnare semplicemente quella costante a un valore, proprio come abbiamo fatto con le costanti regolari, ora apriamo e chiudiamo una serie di parentesi graffe e forniamo essenzialmente i dati in coppie chiave-valore. Si noti che la definizione di proprietà e metodi è abbastanza simile. La differenza principale è che quando definiamo le proprietà, assegniamo i nomi a un valore che recupereremo in seguito. Tuttavia, quando definiamo un metodo, dobbiamo fornire una funzione che eseguiremo in seguito. Questa differenza si riflette anche nel modo in cui li chiamiamo in seguito. Per esempio:

// when we retrieve a property we do not use brackets at the end
console.log("Can fly: " + plane.canFly);
// when we retrieve methods, 
// we also run them by adding brackets after them
// methods here are essentially functions that 
// belong to a specific object
console.log(plane.takeOff());

È importante aggiungere la parentesi dopo i metodi, proprio come abbiamo fatto con le funzioni regolari. In caso contrario, avremo solo la funzione stessa anziché eseguire la funzione.

// in order to execute the object method we should
// add the parenthesis right after the method name
// otherwise we will get the method definition 
// like in this example
alert(plane.takeOff);

Il risultato visualizzato è esattamente quello che abbiamo definito durante la creazione del metodo. Puoi anche vedere che stiamo definendo una funzione in movimento. In questo caso stiamo definendo la funzione senza nome, cosa possibile in JavaScript. Questo non è sempre preferibile, poiché assegnare un nome alla funzione rende più chiaro quando la vediamo visualizzata. In questo caso, tuttavia, non stiamo usando la funzione da nessun'altra parte al di fuori della definizione dell'oggetto, non dobbiamo dare direttamente un nome alla funzione. Invece, possiamo fare riferimento alla funzione dall'interno dell'oggetto con il nome del metodo che gli assegniamo.

Un'altra cosa che dovresti sapere sul recupero di proprietà o metodi da un oggetto è che esiste più di un modo per ottenerlo. Abbiamo utilizzato una delle pratiche più comuni negli esempi precedenti, ovvero utilizzare la notazione con i punti. Ma c'è anche un altro modo comunemente usato per ottenere lo stesso risultato che dovresti conoscere. Questa seconda notazione utilizza parentesi quadre e virgolette.

// both of them are equally valid and 
// give us the same results
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// check out the JavaScript console for the results

È fantastico poter memorizzare molte proprietà e azioni dettagliate che possiamo eseguire utilizzando gli oggetti, ma cosa succede se dovessimo usare oggetti, non solo per 1 auto, ma diciamo per 20 auto, 100 auto o anche 1.000.000 di auto ciascuna con un ID univoco e valori di proprietà variabili. Dovremmo digitare tutto il codice da zero per ogni macchina? La risposta è no. Invece, possiamo sfruttare qualcosa chiamato funzione del costruttore di oggetti.

Funzioni di costruzione di oggetti

I costruttori di oggetti possono accelerare enormemente il processo di codifica e rendere il codice più ASCIUTTO. Con le funzioni di costruzione di oggetti definiamo essenzialmente un progetto per l'oggetto. Una volta che abbiamo un progetto per l'oggetto, possiamo creare quante più istanze di quell'oggetto in un modo molto più chiaro, con molte meno ripetizioni. Vediamolo con alcuni esempi.

// this is how we define a blueprint for the objects
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// this is how we can instanciate the 
// javascript objects we want to create from 
// the blueprint we defined above
// in this case we create 3 car objects 
// with diffent values for the properties
const car1 = new Car(1, "white", true, 4);
const car2 = new Car(2, "black", true, 2);
const car3 = new Car(3, "red", false, 4);
// we can access object properties just like we did before
console.log("Color of first car is: " + car1.color);
console.log("Color of second car is: " + car2.color);
console.log("Color of third car is: " + car3.color);

L'esecuzione del codice sopra ci darebbe il seguente output di codice:

Come puoi vedere dal codice sopra, una volta che abbiamo un progetto, possiamo semplicemente passare valori diversi per creare oggetti javascript diversi dal progetto iniziale. Una cosa che probabilmente hai notato è che la convenzione di denominazione per il costruttore di oggetti prevede che la prima lettera sia maiuscola. In questo caso, invece di definirla “auto”, l'abbiamo chiamata “Auto”. Se dovessimo creare una classe di aereo, la chiameremmo "Aereo".

Quando vogliamo creare oggetti dal nostro progetto definito, utilizziamo la parola chiave "nuovo" e quindi scriviamo il nome della funzione di costruzione dell'oggetto che vogliamo utilizzare. Dopo il nome, apriamo e chiudiamo una serie di parentesi e passiamo gli argomenti con cui vogliamo creare il nostro oggetto. Nota che non ripetiamo i nomi dei parametri, passiamo semplicemente i valori nello stesso ordine dei parametri. Potresti anche notare che durante la creazione del progetto utilizziamo una parola chiave chiamata "questo". Per ora, quello che dovresti sapere è che la parola chiave "this" consente di fare riferimento all'oggetto stesso, ed è parte del codice standard che dovremmo scrivere quando stiamo creando il progetto per l'oggetto.

Quando stai imparando a programmare potresti sentire il termine "codice boilerplate", questo è in realtà piuttosto comune, specialmente nello sviluppo web. Fondamentalmente significa che ci sono parti di codice che scriviamo per mettere in atto determinate configurazioni. Anche se non esiste una soluzione unica che forniamo con il codice, dobbiamo scrivere quelle parti per avere un codice funzionante. A seconda del codice standard, alcuni IDE forniscono anche scorciatoie per fornire quei codici standard.

Gli oggetti javascript di cui abbiamo appena appreso sono un argomento ampio e hanno molti dettagli man mano che ci addentriamo più a fondo. Ma a un livello fondamentale, dovresti sapere che possiamo imitare oggetti della vita reale con il codice usando gli oggetti. Questi oggetti javascript possono avere diverse proprietà e metodi a cui possiamo accedere ed eseguire.

Nel prossimo tutorial scopriremo più argomenti e concetti che sono abbastanza importanti e comunemente usati in JavaScript.

Autore: Robert Whitney

Esperto di JavaScript e istruttore che allena i dipartimenti IT. Il suo obiettivo principale è aumentare la produttività del team insegnando agli altri come cooperare efficacemente durante la programmazione.

Visualizza tutti i post

Corso JavaScript dal principiante all'avanzato in 10 post del blog:

1. Come iniziare a codificare in JavaScript?
2. Nozioni di base su JavaScript
3. Variabili e diversi tipi di dati in JavaScript
4. Snippet e strutture di controllo
5. While loop e for loop
6. matrice Java
7. Funzioni JavaScript
8. oggetti JavaScript
9. Metodi JavaScript e altro
10. Riepilogo del corso JavaScript