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.
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ä:
string
number
boolean
null
undefined
symbol
bigint
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.
Value | Type | Comment |
---|---|---|
"Hello" | string | "Hello" is always "Hello" |
3.14 | number | 3.14 is always 3.14 |
true | boolean | true is always true |
false | boolean | false is always false |
null | null (object) | null is always null |
undefined | undefined | undefined is always undefined |
JavaScript-muuttujat voivat sisältää yksittäisiä arvoja:
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).
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
.
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>
Nimettyjä arvoja JavaScript-objekteissa kutsutaan ominaisuuksiksi.
John
Doe
50
sininen
Nimiarvopareina kirjoitetut objektit ovat samanlaisia kuin:
Assosiatiiviset taulukot PHP:ssä
Pythonin sanakirjat
Hash-taulukot C-kielellä
Hash-kartat Javassa
Hashit Rubyssa ja Perlissä
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ä.
John
Doe
50
sininen
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.
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()
.
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:
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ä:
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:
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>
Seuraava esimerkki luo uuden JavaScript-objektin new Object()
avulla, ja lisää sitten 4 ominaisuutta:
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.
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.
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>