Oggetti JavaScript




Oggetti, proprieta' e metodi della vita reale
Nella vita reale, un'auto e' un oggetto .

Un'auto ha proprieta' come il peso e il colore e metodi come l'avvio e l'arresto:

Oggetto

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = bianco

Proprieta' Metodi

car.start ()

car.drive ()

car.brake ()

car.stop ()
Tutte le auto hanno le stesse proprieta' , ma i valori delle proprieta' differiscono da auto a vettura.

Tutte le auto hanno gli stessi metodi , ma i metodi vengono eseguiti in momenti diversi .
Oggetti JavaScript
Hai gia' appreso che le variabili JavaScript sono contenitori per i valori dei dati.

Questo codice assegna un valore semplice (Fiat) a una variabile denominata car:

var car = "Fiat";
Anche gli oggetti sono variabili. Ma gli oggetti possono contenere molti valori.

Questo codice assegna molti valori (Fiat, 500, bianco) a una variabile denominata auto:

var car = {type:"Fiat", model:"500", color:"white"};
I valori vengono scritti come coppie nome: valore (nome e valore separati da due punti).

Gli oggetti JavaScript sono contenitori per valori denominati chiamati proprieta' o metodi.
Definizione dell'oggetto
Definisci (e crei) un oggetto JavaScript con un oggetto letterale:

Esempio
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Gli spazi e le interruzioni di riga non sono importanti. Una definizione di oggetto puo' estendersi su piu' righe:

Esempio
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};

**************************************************************
Proprieta' oggetto
Le coppie nome: valori negli oggetti JavaScript sono chiamate proprieta' :

Proprieta' Valore della proprieta'
nome di battesimo John
cognome Doe
eta' 50
colore degli occhi blu
Accesso alle proprieta' degli oggetti
È possibile accedere alle proprieta' degli oggetti in due modi:

objectName.propertyName
o

objectName["propertyName"]
Esempio 1
person.lastName;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>
***************************************************
Esempio 2
person["lastName"];

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>
*******************************************************

Metodi oggetto
Gli oggetti possono anche avere metodi .

I metodi sono azioni che possono essere eseguite sugli oggetti.

I metodi vengono memorizzati nelle proprieta' come definizioni di funzioni .

Proprieta' Valore della proprieta'
nome di battesimo John
cognome Doe
eta' 50
colore degli occhi blu
nome e cognome function () {return this.firstName + "" + this.lastName;}
Un metodo e' una funzione memorizzata come proprieta'.

Esempio
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Il questo Chiave
In una definizione di funzione, si thisriferisce al "proprietario" della funzione.

Nell'esempio sopra, thise' l' oggetto persona che "possiede" la fullNamefunzione.

In altre parole, this.firstNameindica la firstNameproprieta' di questo oggetto .

Maggiori informazioni sulla thisparola chiave su JS questa parola chiave .

Accesso ai metodi degli oggetti
Si accede a un metodo oggetto con la seguente sintassi:

objectName.methodName()
Esempio
name = person.fullName();

*********************************************
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

*****************
Se accedi a un metodo senza le parentesi (), restituira' la definizione della funzione :

Esempio
name = person.fullName;

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</p>

<p id="demo"></p>

<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>
Ritorna = function() { return this.firstName + " " + this.lastName; }










( oggettijavascript.html )- by Paolo Puglisi - Modifica del 17/12/2023