JavaScript-objektit


Sisällysluettelo

    Näytä sisällysluettelo


Tosielämän esineet, ominaisuudet ja menetelmät

Tosielämässä auto on esine.

Autolla on ominaisuuksia, kuten paino ja väri, sekä menetelmät, kuten käynnistys ja pysäytys:

Object Properties Methods

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white

car.start()

car.drive()

car.brake()

car.stop()

Kaikilla autoilla on samat ominaisuudet, mutta omaisuuden arvot vaihtelevat autoittain.

Kaikissa autoissa on samat menetelmät, mutta menetelmät suoritetaan eri aikoina.


JavaScript-objektit

Olet jo oppinut, että JavaScript-muuttujat ovat säilöjä tietoarvoille.

Tämä koodi määrittää yksinkertaisen arvon (Fiat). muuttuva-niminen auto:

let car = "Fiat";

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

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

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

</body>
</html>

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

Tämä koodi määrittää useita arvoja (Fiat, 500, valkoinen) a muuttuja nimeltä auto:

const car = {type:"Fiat", model:"500", color:"white"};

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

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

<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>

</body>
</html>

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

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

Lisätietoja const:n käyttämisestä objektien kanssa luvussa: JS Const.



Objektin määritelmä

Määrität (ja luot) JavaScript-objektin objektiliteraalilla:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

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

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

// Display some data from the object:
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 id="demo"></p>

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

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Objektin ominaisuudet

JavaScript-objektien nimi:arvot-pareja kutsutaan ominaisuuksiksi:

firstName

John

lastName

Doe

age

50

eyeColor

sininen


Objektin ominaisuuksien käyttäminen

Voit käyttää objektin ominaisuuksia kahdella tavalla:

objectName.propertyName

tai

objectName["propertyName"]

Esimerkki1

person.lastName;

Kokeile itse →

<!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:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

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

</body>
</html>


Esimerkki2

person["lastName"];

Kokeile itse →

<!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:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>


JavaScript-objektit ovat säilöjä nimetyille arvoille , joita kutsutaan ominaisuuksiksi.


Objektimenetelmät

Objekteilla voi olla myös menetelmiä.

Menetelmät ovat toimia, joita voidaan suorittaa objekteille.

Menetelmät tallennetaan ominaisuuksiin funktiona määritelmät.

firstName

John

lastName

Doe

age

50

eyeColor

sininen

fullName

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

Metodi on ominaisuutena tallennettu funktio.


Esimerkki

const person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

Yllä olevassa esimerkissä tämä viittaa person-objektiin.

I.E. this.firstName tarkoittaa tämän ominaisuutta firstName.

I.E. this.firstName tarkoittaa henkilön ominaisuutta firstName.


Mikä tämä on?

JavaScriptissä tämä-avainsana viittaa objektiin.

Mikä objekti riippuu siitä, miten tätä kutsutaan (käytetään tai kutsutaan).

Avainsana tämä viittaa erilaisiin objekteihin sen käyttötavan mukaan:

  • Objektimenetelmässä tämä viittaa objektiin.

  • Yksin tämä viittaa globaaliin objektiin.

  • Funktiossa tämä viittaa globaaliin objektiin.

  • Funktion tiukassa tilassa tämä on määrittämätön.

  • Tapahtumassa tämä viittaa elementtiin, joka vastaanotti tapahtuman.

  • Menetelmät, kuten call(), apply() ja bind() voi viitata tähän mihin tahansa objektiin.

Huomautus

tämä ei ole muuttuja. Se on avainsana. Et voi muuttaa tämän arvoa.

Katso myös:

JavaScript tämä opetusohjelma


tämä avainsana

Funktiomääritelmässä tämä viittaa funktion "omistajaan".

Yllä olevassa esimerkissä tämä on henkilöobjekti, joka "omistaa" fullName-funktio.

Toisin sanoen this.firstName tarkoittaa tämän objektin ominaisuutta firstName.

Lisätietoja tästä on JavaScript tässä opetusohjelmassa.


Objektimenetelmien käyttäminen

Voit käyttää objektimetodia seuraavalla syntaksilla:

objectName.methodName()

Esimerkki

name = person.fullName();

Kokeile itse →

<!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:
const 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>

Jos käytät menetelmää ilman() sulkeita, se palauttaa funktion määritelmän:

Esimerkki

name = person.fullName;

Kokeile itse →

<!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:
const 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>

Älä määritä merkkijonoja, numeroita ja loogisia arvoja objekteiksi!

Kun JavaScript-muuttuja ilmoitetaan avainsanalla "new, muuttuja on luotu nimellä esine:

x = new String();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

Vältä merkkijono-, numero- ja loogisia-objekteja . Ne monimutkaistavat koodiasi ja hidastavat suoritusnopeus.

Saat lisätietoja objekteista myöhemmin tässä opetusohjelmassa.