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.
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.
Määrität (ja luot) JavaScript-objektin objektiliteraalilla:
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ä:
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>
JavaScript-objektien nimi:arvot-pareja kutsutaan ominaisuuksiksi:
John
Doe
50
sininen
Voit käyttää objektin ominaisuuksia kahdella tavalla:
objectName.propertyName
tai
objectName["propertyName"]
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>
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.
Objekteilla voi olla myös menetelmiä.
Menetelmät ovat toimia, joita voidaan suorittaa objekteille.
Menetelmät tallennetaan ominaisuuksiin funktiona määritelmät.
John
Doe
50
sininen
function() {return this.firstName + " " + this.sukunimi;}
Metodi on ominaisuutena tallennettu funktio.
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.
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.
tämä
ei ole muuttuja. Se on avainsana. Et voi muuttaa tämän
arvoa.
JavaScript tämä opetusohjelma
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.
Voit käyttää objektimetodia seuraavalla syntaksilla:
objectName.methodName()
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:
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>
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.