JavaScript objektumok

Tartalomjegyzék

Valódi életből származó tárgyak, tulajdonságok és módszerek

A való életben az autó egytárgy.

Az autónak vannak olyan tulajdonságai, mint a tömeg és a szín, valamint a módszerek, például az indítás és a leállítás:

Object	Properties	Methods
	car.name = Fiat car.model = 500 car.weight = 850kg car.color = white	car.start() car.drive() car.brake() car.stop()

Minden autónak ugyanazok a tulajdonságai, de az ingatlanok értékei autónként eltérőek.

Minden autónak ugyanazok amódszerei vannak, de a módszereket végrehajtják különböző időpontokban.

JavaScript objektumok

Már megtanulta, hogy a JavaScript-változók azok tárolók az adatértékek számára.

Ez a kód egyszerű értéket (Fiat) rendel hozzá egy változó nevű autó:

let car = "Fiat";

Próbálja ki Ön is →

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

Az objektumok is változók. De az objektumok sokfélét tartalmazhatnak értékeket.

Ez a kód sok értéket (Fiat, 500, fehér) rendel hozzá a változó nevű autó:

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

Próbálja ki Ön is →

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

Az értékek név:érték párokként vannak kiírva (a név és az érték elválasztva a kettőspont).

Általános gyakorlat, hogy az objektumokat a const kulcsszóval deklarálják.

További információ a const objektumokkal való használatáról a következő fejezetben található: JS Const.

Objektum definíció

Egy JavaScript objektumot egy objektum literállal határoz meg (és hoz létre):

Példa

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

Próbálja ki Ön is →

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

A szóközök és a sortörések nem fontosak. Egy objektumdefiníció több sorra is kiterjedhet:

Példa

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

Próbálja ki Ön is →

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

Objektum tulajdonságai

A JavaScript objektumokban lévő név:értékek párokat tulajdonságoknak nevezik:

firstName: János
lastName: Dámvadtehén
age: 50
eyeColor: kék

Az objektum tulajdonságainak elérése

Az objektum tulajdonságait kétféleképpen érheti el:

objectName.propertyName

vagy

objectName["propertyName"]

Példa1

person.lastName;

Próbálja ki Ön is →

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

Példa2

person["lastName"];

Próbálja ki Ön is →

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

A JavaScript-objektumok a tulajdonságoknak nevezett elnevezett értékek tárolói.

Objektum módszerek

Az objektumoknak is lehetnek módszerei.

A metódusok olyan műveletek, amelyeket objektumokon lehet végrehajtani.

A módszerek a tulajdonságokban függvényként tárolódnak meghatározásokra.

firstName: János
lastName: Dámvadtehén
age: 50
eyeColor: kék
fullName: function() {return this.firstName + " " + this.lastName;}

A metódus egy tulajdonságként tárolt függvény.

Példa

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

A fenti példában a ez a személy objektumra utal.

AZAZ. A this.firstName az ennek firstName tulajdonságát jelenti.

AZAZ. A this.firstName a person firstName tulajdonságát jelenti.

Mi ez?

A JavaScriptben a ez a kulcsszó egy objektumra utal.

Melyik objektum attól függ, hogy ezt hogyan hívják meg (használják vagy hívják).

A ez a kulcsszó a használat módjától függően különböző objektumokra utal:

Egy objektummetódusban a ez az objektumra utal.
Önmagában ez a globális objektumra utal.
Egy függvényben a ez a globális objektumra utal.
Egy függvényben szigorú módban ez definiálatlan.
Egy eseményben a ez arra az elemre utal, amely az eseményt fogadta.
Olyan módszerek, mint a call(), apply() és a bind() utalhat ezre bármely objektumra.

jegyzet

ez nem változó. Ez egy kulcsszó. A ez értéke nem módosítható.

Lásd még:

A JavaScript ezt bemutatója

A ez a kulcsszó

A függvénydefinícióban a ez a függvény "tulajdonosára" utal.

A fenti példában ez az a személy objektum, amely "tulajdonos" fullName függvényt.

Más szavakkal, a this.firstName az ennek az objektumnak a firstName tulajdonságát jelenti.

Tudjon meg többet erről A JavaScript ebben az oktatóanyagban.

Az objektummódszerek elérése

Egy objektummetódushoz a következő szintaxissal érhet el:

objectName.methodName()

Példa

name = person.fullName();

Próbálja ki Ön is →

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

Ha egy metódust a() zárójelek nélkül ér el, akkor az visszaadja a függvénydefiníciót:

Példa

name = person.fullName;

Próbálja ki Ön is →

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

Ne deklaráljon karakterláncokat, számokat és logikai értékeket objektumként!

Ha egy JavaScript-változót a "new kulcsszóval deklarálunk, a változó mint egy tárgy:

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

Kerülje a karakterlánc, szám és logikai objektumokat . Bonyolítják a kódot és lelassulnak végrehajtási sebesség.

Az oktatóanyag későbbi részében többet megtudhat az objektumokról.