JavaScript-objektit


Sisällysluettelo

    Näytä sisällysluettelo


JavaScriptissä objektit ovat kuningas. Jos ymmärrät objektit, ymmärrät JavaScriptin.


JavaScriptissä melkein "kaikki" on objekti.

  • Boolen arvot voivat olla objekteja (jos ne on määritelty new-avainsanalla)

  • Numerot voivat olla objekteja (jos ne on määritelty new-avainsanalla)

  • Merkkijonot voivat olla objekteja (jos ne on määritelty new-avainsanalla)

  • Päivämäärät ovat aina esineitä

  • Matematiikka on aina esineitä

  • Säännölliset lausekkeet ovat aina objekteja

  • Taulukot ovat aina objekteja

  • Funktiot ovat aina objekteja

  • Esineet ovat aina esineitä

Kaikki JavaScript-arvot, paitsi primitiivit, ovat objekteja.


JavaScript primitiivit

Primitiivinen arvo on arvo, jolla ei ole ominaisuuksia tai menetelmiä.

3,14 on primitiivinen arvo

Primitiivinen tietotyyppi on dataa, jolla on primitiivinen arvo.

JavaScript määrittelee 7 tyyppiä primitiivistä tietotyyppiä:

Esimerkkejä

  • string
  • number
  • boolean
  • null
  • undefined
  • symbol
  • bigint

Muuttumaton

Primitiiviset arvot ovat muuttumattomia (ne ovat kovakoodattuja eikä niitä voi muuttaa).

jos x=3,14, voit muuttaa x:n arvoa, mutta et voi muuttaa arvoa 3,14.

ValueTypeComment
"Hello"string"Hello" is always "Hello"
3.14number3.14 is always 3.14
truebooleantrue is always true
falsebooleanfalse is always false
nullnull (object)null is always null
undefinedundefinedundefined is always undefined

Objektit ovat muuttujia

JavaScript-muuttujat voivat sisältää yksittäisiä arvoja:

Esimerkki

let person = "John Doe";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

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

<script>
// Create and display a variable:
let person = "John Doe";
document.getElementById("demo").innerHTML = person;
</script>

</body>
</html>

JavaScript-muuttujat voivat myös sisältää monia arvoja.

Objektit ovat myös muuttujia. Mutta esineet voivat sisältää monia arvot.

Objektiarvot kirjoitetaan nimi : arvo -pareina (nimi ja arvo erotetaan a:lla kaksoispiste).

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

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

<script>
let person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

JavaScript-objekti on kokoelma nimettyjä arvoja

On yleinen käytäntö ilmoittaa objektit avainsanalla const.

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

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

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>


Objektin ominaisuudet

Nimettyjä arvoja JavaScript-objekteissa kutsutaan ominaisuuksiksi.

firstName

John

lastName

Doe

age

50

eyeColor

sininen

Nimiarvopareina kirjoitetut objektit ovat samanlaisia kuin:

  • Assosiatiiviset taulukot PHP:ssä

  • Pythonin sanakirjat

  • Hash-taulukot C-kielellä

  • Hash-kartat Javassa

  • Hashit Rubyssa ja Perlissä


Objektimenetelmät

Menetelmät ovat toimia, joita voidaan suorittaa objekteille.

Objektin ominaisuudet voivat olla sekä primitiivisiä arvoja, muita objekteja että funktioita.

Objektimenetelmä on objektiominaisuus, joka sisältää funktion määritelmä.

firstName

John

lastName

Doe

age

50

eyeColor

sininen

fullName

function() {return this.firstName + " " + this.sukunimi;}

JavaScript-objektit ovat säiliöitä nimetyille arvoille, joita kutsutaan ominaisuuksiksi ja menetelmiksi.

Saat lisätietoja menetelmistä seuraavissa luvuissa.


JavaScript-objektin luominen

JavaScriptin avulla voit määrittää ja luoda omia objekteja.

On olemassa erilaisia tapoja luoda uusia objekteja:

  • Luo yksi objekti käyttämällä objektiliteraalia.

  • Luo yksi objekti avainsanalla new.

  • Määritä objektin rakentaja ja luo sitten rakennetun tyyppiset objektit.

  • Luo objekti komennolla Object.create().


Object Literaalin käyttäminen

Tämä on helpoin tapa luoda JavaScript-objekti.

Objektiteraalia käyttämällä voit määrittää ja luoda objektin yhdessä lausunto.

Objektiliteraali on luettelo nimi:arvo-pareista (kuten ikä:50) aaltosulkeiden {} sisällä.

Seuraava esimerkki luo uuden JavaScript-objektin, jolla on neljä ominaisuutta:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = {firstName:"John", lastName:"Doe", age:50,eyeColor:"blue"};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Välilyönnit ja rivinvaihdot eivät ole tärkeitä. Objektin määritelmä voi kattaa useita rivejä:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Tämä esimerkki luo tyhjän JavaScript-objektin, ja lisää sitten 4 ominaisuutta:

Esimerkki

const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

JavaScript-avainsanan käyttö uusi

Seuraava esimerkki luo uuden JavaScript-objektin new Object() avulla, ja lisää sitten 4 ominaisuutta:

Esimerkki

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Yllä olevat esimerkit tekevät täsmälleen samoin.

Mutta new Object()-komentoa ei tarvitse käyttää.

Käytä objektiliteraalimenetelmää luettavuuden, yksinkertaisuuden ja suoritusnopeuden vuoksi.


JavaScript-objektit ovat muuttuvia

Objektit ovat muuttuvia: Niitä käsitellään viittauksella, ei arvon perusteella.

Jos henkilö on objekti, seuraava lauseke ei luo kopiota henkilöstä:

const x = person;  // Will not create a copy of person.

Objekti x ei ole kopio henkilöstä. Se on henkilö. Sekä x että henkilö ovat sama kohde.

Kaikki muutokset x:ään muuttavat myös henkilöä, koska x ja henkilö ovat sama objekti.

Esimerkki

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}
 
const x = person;
x.age = 10;      // Will change both x.age and person.age

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JavaScript objects are mutable.</p>
<p>Any changes to a copy of an object will also change the original object:</p>

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

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age:50,
  eyeColor: "blue"
};

const x = person;
x.age = 10;

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>