Objekty JavaScriptu

Obsah

    Zobrazit obsah

Objekty, vlastnosti a metody skutečného života

V reálném životě je auto předmět.

Auto má vlastnosti jako hmotnost a barvu a metody jako start a stop:

Object Properties Methods

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white
car.start()

car.drive()

car.brake()

car.stop()

Všechna auta mají stejné vlastnosti, ale hodnoty vlastností se liší auto od auta.

Všechny vozy mají stejnémetody, ale metody se provádějí v různých časech.

Objekty JavaScriptu

Už jste se dozvěděli, že proměnné JavaScriptu jsou kontejnery pro datové hodnoty.

Tento kód přiřadí jednoduchou hodnotu (Fiat). proměnná s názvem auto:

let car = "Fiat";

Zkuste to sami →

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

Objekty jsou také proměnné. Ale objektů může obsahovat mnoho hodnoty.

Tento kód přiřazuje mnoho hodnot (Fiat, 500, bílá) k a proměnná pojmenované auto:

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

Zkuste to sami →

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

Hodnoty jsou zapsány jako páry název:hodnota (název a hodnota oddělené a dvojtečka).

Je běžnou praxí deklarovat objekty pomocí klíčového slova const.

Další informace o použití const s objekty naleznete v kapitole: JS Const.

Definice objektu

Objekt JavaScript definujete (a vytvoříte) pomocí objektového literálu:

Příklad

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

Zkuste to sami →

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

Mezery a zalomení řádků nejsou důležité. Definice objektu může zahrnovat více řádků:

Příklad

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

Zkuste to sami →

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

Vlastnosti objektu

Páry name:values v objektech JavaScript se nazývají vlastnosti:

firstName

John

lastName

Srna

age

50

eyeColor

modrý

Přístup k vlastnostem objektu

K vlastnostem objektu můžete přistupovat dvěma způsoby:

objectName.propertyName

nebo

objectName["propertyName"]

Příklad1

person.lastName;

Zkuste to sami →

<!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říklad2

person["lastName"];

Zkuste to sami →

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

Objekty JavaScriptu jsou kontejnery pro pojmenované hodnoty nazývané vlastnosti.

Objektové metody

Objekty mohou mít také metody.

Metody jsou akce, které lze provádět s objekty.

Metody jsou uloženy ve vlastnostech jakofunkce definice.

firstName

John

lastName

Srna

age

50

eyeColor

modrý

fullName

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

Metoda je funkce uložená jako vlastnost.

Příklad

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

Ve výše uvedeném příkladu toto odkazuje na objekt osoby.

TJ. this.firstName znamená vlastnost firstName this.

TJ. this.firstName znamená vlastnost firstName person.

Co je toto?

V JavaScriptu odkazuje klíčové slovo toto na objekt.

Který objekt závisí na tom, jak je tento vyvolán (použit nebo zavolán).

Klíčové slovo toto odkazuje na různé objekty v závislosti na tom, jak se používá:

  • V objektové metodě toto odkazuje na objekt.

  • Samotné toto odkazuje na globální objekt.

  • Ve funkci toto odkazuje na globální objekt.

  • Ve funkci je v přísném režimu toto nedefinováno.

  • V události toto odkazuje na prvek, který přijal událost.

  • Metody jako call(), apply() a bind() může odkazovat toto na jakýkoli objekt.

Poznámka

toto není proměnná. Je to klíčové slovo. Hodnotu toto nelze změnit.

Viz také:

Výukový tento JavaScript

Klíčové slovo toto

V definici funkce toto odkazuje na "vlastníka" funkce.

Ve výše uvedeném příkladu je toto objekt osoby, který „vlastní“ funkce fullName.

Jinými slovy this.firstName znamená vlastnost firstName tohoto objektu.

Další informace o tomto naleznete v tomto kurzu JavaScript.

Přístup k objektovým metodám

K metodě objektu přistupujete s následující syntaxí:

objectName.methodName()

Příklad

name = person.fullName();

Zkuste to sami →

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

Pokud přistupujete k metodě bez závorek(), je to vrátí definici funkce:

Příklad

name = person.fullName;

Zkuste to sami →

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

Nedeklarujte řetězce, čísla a logické hodnoty jako objekty!

Když je proměnná JavaScript deklarována s klíčovým slovem "new, je proměnná vytvořen jako objekt:

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

Nepoužívejte objekty String, Number a Booleovské . Komplikují váš kód a zpomalují rychlost provedení.

Více o objektech se dozvíte později v tomto tutoriálu.