Objekty JavaScriptu

Obsah

    Zobrazit obsah

V JavaScriptu jsou objekty králem. Pokud rozumíte objektům, rozumíte JavaScriptu.

V JavaScriptu je téměř „všechno“ objekt.

  • Booleany mohou být objekty (pokud jsou definovány pomocí klíčového slova new)

  • Čísla mohou být objekty (pokud jsou definovány pomocí klíčového slova new)

  • Řetězce mohou být objekty (pokud jsou definovány pomocí klíčového slova new)

  • Data jsou vždy objekty

  • Matematika jsou vždy předměty

  • Regulární výrazy jsou vždy objekty

  • Pole jsou vždy objekty

  • Funkce jsou vždy objekty

  • Předměty jsou vždy předměty

Všechny hodnoty JavaScriptu, kromě primitiv, jsou objekty.

JavaScript Primitives

Primitivní hodnota je hodnota, která nemá žádné vlastnosti ani metody.

3.14 je primitivní hodnota

Primitivní datový typ jsou data, která mají primitivní hodnotu.

JavaScript definuje 7 typů primitivních datových typů:

Příklady

    

  • string
    • 

  • number
    • 

  • boolean
    • 

  • null
    • 

  • undefined
    • 

  • symbol
    • 

  • bigint
    •

Neměnný

Primitivní hodnoty jsou neměnné (jsou pevně zakódovány a nelze je změnit).

pokud x=3,14, můžete změnit hodnotu x, ale nemůžete změnit hodnotu 3,14.

ValueTypeComment
"Hello"string"Hello" is always "Hello"
3.14number3.14 is always 3.14
truebooleantrue is always true
falsebooleanfalse is always false
nullnull (object)null is always null
undefinedundefinedundefined is always undefined

Objekty jsou proměnné

Proměnné JavaScriptu mohou obsahovat jednu hodnotu:

Příklad

let person = "John Doe";

Zkuste to sami →

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

Proměnné JavaScriptu mohou také obsahovat mnoho hodnot.

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

Hodnoty objektů se zapisují jako dvojice název : hodnota (název a hodnota oddělené a dvojtečka).

Příklad

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

Zkuste to sami →

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

Objekt JavaScript je sbírka pojmenovaných hodnot

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

Příklad

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

Zkuste to sami →

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

Vlastnosti objektu

Pojmenované hodnoty se v objektech JavaScriptu nazývají vlastnosti.

firstName

John

lastName

Srna

age

50

eyeColor

modrý

Objekty zapsané jako dvojice jmen a hodnot jsou podobné:

  • Asociativní pole v PHP

  • Slovníky v Pythonu

  • Hash tabulky v C

  • Hash mapy v Javě

  • Hashe v Ruby a Perlu

Objektové metody

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

Vlastnosti objektu mohou být jak primitivní hodnoty, tak jiné objekty a funkce.

Metoda objektu je vlastnost objektu obsahující funkci definice.

firstName

John

lastName

Srna

age

50

eyeColor

modrý

fullName

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

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

Více o metodách se dozvíte v dalších kapitolách.

Vytvoření objektu JavaScript

Pomocí JavaScriptu můžete definovat a vytvářet své vlastní objekty.

Existují různé způsoby, jak vytvořit nové objekty:

  • Vytvořte jeden objekt pomocí objektového literálu.

  • Vytvořte jeden objekt s klíčovým slovem new.

  • Definujte konstruktor objektu a poté vytvořte objekty vytvořeného typu.

  • Vytvořte objekt pomocí Object.create().

Použití objektového literálu

Toto je nejjednodušší způsob, jak vytvořit objekt JavaScript.

Pomocí objektového literálu definujete a vytváříte objekt v jednom prohlášení.

Objektový literál je seznam párů jméno:hodnota (např. věk:50) ve složených závorkách {}.

Následující příklad vytvoří nový objekt JavaScript se čtyřmi vlastnostmi:

Příklad

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

Zkuste to sami →

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

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

Tento příklad vytvoří prázdný objekt JavaScript, a poté přidá 4 vlastnosti:

Příklad

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

Zkuste to sami →

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

Použití klíčového slova JavaScriptu nové

Následující příklad vytvoří nový objekt JavaScript pomocí new Object(), a poté přidá 4 vlastnosti:

Příklad

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Zkuste to sami →

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

Výše uvedené příklady dělají přesně totéž.

Není však nutné používat new Object().

Pro čitelnost, jednoduchost a rychlost provádění použijte metodu objektového literálu.

Objekty JavaScriptu jsou proměnlivé

Objekty jsou proměnlivé: Jsou adresovány odkazem, nikoli hodnotou.

Pokud je osoba objekt, následující prohlášení nevytvoří kopii osoby:

const x = person;  // Will not create a copy of person.

Objekt x není kopií osoby. Je osoba. X i osoba jsou stejný objekt.

Jakékoli změny x změní také osobu, protože x a osoba jsou stejný objekt.

Příklad

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}
 
const x = person;
x.age = 10;      // Will change both x.age and person.age

Zkuste to sami →

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