JavaScript objekty. Část 8 JavaScript kurzu od začátečníka po pokročilého v 10 blogových příspěvcích

Toto je část 8 série blogových příspěvků o JavaScriptu, která vás provede od začátečníka po pokročilého. Pokud jste nečetli předchozí blogový příspěvek o funkcích JavaScriptu, můžete si ho prohlédnout zde. Na konci této série budete znát všechny základy, které potřebujete k tomu, abyste mohli začít programovat v JavaScriptu. Bez dalších okolků, pojďme začít s osmým tutoriálem.

Objekty JavaScript – obsah:

1. Objekty JavaScript
2. Funkce konstruktorů objektů

Objekty JavaScript

Objekty JavaScript hrají důležitou roli. I když je to relativně rozsáhlé téma, může být také relativně snadné pochopit je. Jedním z nejběžnějších způsobů, jak porozumět objektům, je myslet na to, jako byste znovu vytvářeli auto v kódu. Při práci s objekty budeme mít dva hlavní koncepty. Budou mít vlastnosti a metody. Vlastnosti jsou věci, které objekty JavaScriptu mají, a metody jsou věci, které objekty mohou vykonávat. Pojďme si to ukázat na několika příkladech.

// definujme více objektů, abychom lépe porozuměli
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "Letadlo začíná vzlétat..."},
    land: function(){return "Letadlo začíná přistávat..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "Auto se pohybuje vpřed..."},
    smartSummon: function(){return "Auto se začíná řídit samo k vám..."}
}

// můžeme přistupovat a logovat vlastnosti, které mají:
console.log("Vlastnosti letadla:");
console.log("Může létat: " + plane.canFly);
console.log("Celkový počet křídel: " + plane.numberOfWings);
// můžeme také nechat letadlo vykonávat akce
console.log(plane.takeOff());
console.log(plane.land());
// pokud se podíváte blíže, můžete vidět, že 
// přímo neprovádíme console.log akce uvnitř metod
// místo toho je vracíme z funkcí
// a v tomto případě je logujeme do konzole
// tímto způsobem, pokud chceme, můžeme také uživateli poslat upozornění
// které říká, že letadlo vzlétá
alert(plane.takeOff());
// můžeme se také dozvědět o vlastnostech, které má auto 
// a také je logovat do konzole pro další praxi
console.log("Je to elektrické auto? " + car.isElectric);
console.log("Jaká je značka auta: " + car.brand);
console.log("Kolik má dveří? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Když spustíme výše uvedený kód, měli bychom dostat následující výstup:

Právě jsme viděli dva hlavní příklady objektů JavaScript: jeden s letadlem a jeden s autem. Stejně jako letadla a auta mají různé vlastnosti a různé věci, které mohou dělat, různé objekty, které vytváříme, mohou dělat různé věci a mít různé vlastnosti. Pokud se podíváte blíže, můžete začít vidět vzor v tom, jak definujeme objekty, vlastnosti a metody.

Začínáme definovat objekty stejně jako definujeme proměnné nebo konstanty, v tomto případě je obvykle dostatečné používat konstanty při definování objektů JavaScriptu. Ale místo toho, abychom jednoduše přiřadili tuto konstantu k hodnotě, jako jsme to udělali s běžnými konstantami, nyní otevřeme a zavřeme sadu složených závorek a v podstatě poskytneme data v párech klíč-hodnota. Všimněte si, že definování vlastností a metod je velmi podobné. Hlavní rozdíl je v tom, že při definování vlastností přiřazujeme názvy k hodnotě, kterou později získáme. Když však definujeme metodu, musíme poskytnout funkci, kterou později spustíme. Tento rozdíl se také odráží v tom, jak je později voláme. Například:

// když získáváme vlastnost, na konci nepoužíváme závorky
console.log("Může létat: " + plane.canFly);
// když získáváme metody, 
// také je spouštíme přidáním závorek za nimi
// metody zde jsou v podstatě funkce, které 
// patří k určitému objektu
console.log(plane.takeOff());

Je důležité, abychom přidali závorky za metody, stejně jako jsme to udělali s běžnými funkcemi. Jinak budeme mít pouze samotnou funkci, místo abychom ji vykonali.

// abychom vykonali metodu objektu, měli bychom
// přidat závorky hned za názvem metody
// jinak dostaneme definici metody 
// jako v tomto příkladu
alert(plane.takeOff);

Zobrazený výsledek je přesně to, co jsme definovali při vytváření metody. Můžete také vidět, že definujeme funkci za běhu. V tomto případě definujeme funkci bez názvu, což je v JavaScriptu možné. To není vždy preferované, protože pojmenování funkce ji činí jasnější, když ji vidíme zobrazenou. V tomto případě však funkci nikde jinde mimo definici objektu nepoužíváme, nemusíme jí přímo dávat název. Místo toho se na funkci můžeme odkazovat z objektu pomocí názvu metody, kterou jí přiřadíme.

Další věc, kterou byste měli vědět o získávání vlastností nebo metod z objektu, je, že existuje více než jeden způsob, jak toho dosáhnout. V příkladech výše jsme použili jeden z nejběžnějších postupů, což je použití notace tečky. Ale existuje také další běžně používaný způsob, jak dosáhnout stejného výsledku, o kterém byste měli vědět. Tato druhá notace používá hranaté závorky a uvozovky.

// obě jsou stejně platné a 
// dávají nám stejné výsledky
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// zkontrolujte JavaScriptovou konzoli pro výsledky

Je skvělé, že můžeme ukládat mnoho podrobných vlastností a akcí, které můžeme vykonávat pomocí objektů, ale co když bychom potřebovali používat objekty, nejen pro 1 auto, ale řekněme pro 20 aut, 100 aut nebo dokonce 1 000 000 aut, každé s unikátním ID a různými hodnotami vlastností. Museli bychom psát celý ten kód od začátku pro každé auto? Odpověď je ne. Místo toho můžeme využít něco, čemu se říká funkce konstruktorů objektů.

Funkce konstruktorů objektů

Konstruktory objektů mohou výrazně urychlit váš proces kódování a mohou výrazně učinit váš kód více DRY. S funkcemi konstruktorů objektů v podstatě definujeme plán pro objekt. Jakmile máme plán pro objekt, můžeme vytvořit tolik instancí tohoto objektu mnohem jasnějším způsobem, s mnohem menšími opakováními. Pojďme si to ukázat na několika příkladech.

// takto definujeme plán pro objekty
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// takto můžeme instancovat 
// objekty JavaScriptu, které chceme vytvořit z 
// plánu, který jsme definovali výše
// v tomto případě vytváříme 3 objekty auta 
// s různými hodnotami pro vlastnosti
const car1 = new Car(1, "bílá", true, 4);
const car2 = new Car(2, "černá", true, 2);
const car3 = new Car(3, "červená", false, 4);
// můžeme přistupovat k vlastnostem objektu stejně jako předtím
console.log("Barva prvního auta je: " + car1.color);
console.log("Barva druhého auta je: " + car2.color);
console.log("Barva třetího auta je: " + car3.color);

Spuštění výše uvedeného kódu by nám dalo následující výstup:

Jak vidíte z výše uvedeného kódu, jakmile máme plán, můžeme jednoduše předat různé hodnoty k vytvoření různých objektů JavaScriptu z počátečního plánu. Jedna věc, kterou jste pravděpodobně zaznamenali, je, že konvence pojmenování pro konstruktory objektů je mít první písmeno velké. V tomto případě, místo abychom to definovali jako „auto“, pojmenovali jsme to „Auto“. Pokud bychom chtěli vytvořit třídu letadla, pojmenovali bychom ji „Letadlo“.

Když chceme vytvářet objekty z našeho definovaného plánu, používáme klíčové slovo „new“ a poté napíšeme název funkce konstruktoru objektu, kterou chceme použít. Po názvu otevřeme a zavřeme sadu závorek a předáme argumenty, které chceme použít k vytvoření našeho objektu. Všimněte si, že neopakujeme názvy parametrů, pouze předáváme hodnoty ve stejném pořadí jako parametry. Můžete si také všimnout, že při vytváření plánu používáme klíčové slovo „this“. Prozatím byste měli vědět, že klíčové slovo „this“ umožňuje odkazovat na samotný objekt a je součástí základního kódu, který bychom měli psát, když vytváříme plán pro objekt.

Když se učíte kódovat, můžete slyšet termín „základní kód“, což je ve skutečnosti docela běžné, zejména ve webovém vývoji. V podstatě to znamená, že existují části kódu, které píšeme, abychom nastavili určité nastavení. I když neexistuje jedinečné řešení, které poskytujeme pomocí kódu, musíme tyto části napsat, abychom měli funkční kód. V závislosti na základním kódu některé IDE dokonce poskytují zkratky pro poskytování těchto základních kódů.

Objekty JavaScriptu, o kterých jsme se právě naučili, jsou rozsáhlé téma a mají mnoho detailů, jak se do toho ponoříme hlouběji. Ale na základní úrovni byste měli vědět, že můžeme napodobit objekty ze skutečného života pomocí kódu pomocí objektů. Tyto objekty JavaScriptu mohou mít různé vlastnosti a metody, ke kterým můžeme přistupovat a vykonávat je.

V dalším tutoriálu objevíme více témat a konceptů, které jsou docela důležité a běžně používané v JavaScriptu.