Diskuze: OOP v JavaScriptu
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Jurajs:23.9.2015 11:13
var pavel = new uzivatel("Pavel"); // Vytvřil jsi objekt uživatel :)
var pavel = uzivatel("Pavel"); //tímhle si tak přiradil objekt (nevím to jistě) :)
hypnozc:23.9.2015 11:18
Me jde spis o to, proc vytvaret objekty s parametry, kdyz muzu udelat funkci s parametry... Nejak nechapu proc pouziat OOP.
hypnozc:23.9.2015 11:24
function uzivatel (name) {
alert("Moje jmeno je: " + name);
}
var pavel = new uzivatel ("Pavel");
uzivatel ("Pavel");
Takto sem to myslel... Jakej je rozdil mezi volanim funkce a vytvorenim objektu... Proc vubec vytvaret objekty?
Petr Valigura:23.9.2015 11:35
Tak ta funkce není ani tolik OOP, pouze tam dáváš parametr name, což ti umožní volat tu funkci a předávat ji pokaždé jiné jméno a voláš ji právě přes
var pavel = uzivatel("Pavel");
a rovnou ji ukládáš do proměnné. (trochu zbytečné dle mého, když je tam alert) To využiješ když třeba potřebuješ pozdravit víc lidí;
uzivatel("Pavel");
uzivatel("Jana");
uzivatel("Petr");
uzivatel("Simona"); //zdraví jednotlivé lidi, bez toho aby jsi psal otrocky u každého "moje jméno je..."
Na druhou stranu
var pavel = new uzivatel("Petr");
vytváříš novou instanci Objektu, v takovém případě je zvyk psát funkci s velkým písmenem.
Takže jednodušeji řečeno rozdíl mezi tím je ten, že v prvním případě voláš funkci a s argumentem "Pavel" a ukládáš ji do proměnné a ve druhém případě vytváříš instanci funkce (třídy, objektu), ovšem k tomu se ti moc nehodí ta funkce uživatel, name by jsi měl správně uložit jako vlastnost. Respektive v prvním případě pouze vypisuješ nové uzivatele a ve druhém vytváříš samostatnou instanci (objekt)
this.jmeno = "name";
a k vypisování v OOP by měli sloužit metody
this.predstavSe = function() {
return "Moje jmeno je: " + name;
//nebo cheš-li alert("Moje jmeno je: " + name); ale to se mi moc nelíbí,
}
Ještě na závěr jak by to mohlo vypadat celé
var Clovek = function(name) {
this.name = name;
this.predstavSe = function() {
return "Ahoj já jsem " + this.name;
}
}
var petr = new Clovek("Petr"); //vytváření instance
alert(petr.predstavSe()); //volání metody, kterou si necháváme vypsat pomocí alert
Určitě se, ale podívej tady http://www.itnetwork.cz/…ani-tutorial.
hypnozc:23.9.2015 11:51
OK chapu. A vysvetlis mi prosim, kdy pouzivat objekty a kdy si vystacim jen s funkci?
Petr Valigura:23.9.2015 11:58
Promiň chtěl jsem to napsat už v prvním, ale zrovna mám přednášku, tak je to trochu lámané (i když by se to z toho dalo pochopit)
Objekty se v OOP vytváří, hlavně díky zjednoduššení a přehlednosti (ne jenom, chci to jen nějak jednoduše vysvětlit). Představ si, že programuješ hru a v ní máš třeba zombíky a každý zombík má nějaké vlastnosti (např. pohlaví, síla, rychlost, zdraví) a metody (utoc, utikej...) a těch zombíků tam máš 100. Budeš pro každého zombíka psát samostatnou funkci či objekt, nebo si budeš někde zapisovat, stav aktuálního zombíka a budeš ručně volat funkce?
Ne! jak by se s tím pracovalo? Bylo by to šílené.
Ale samozřejmě teď, když budeš programovat aplikaci, která bude mít za úkol jen zdravit spíše využiješ právě volání funkce s argumentem. (Chceš toho uživatele pozdravit nepotřebuješ vědět jeho velikost bod a nepotřebuješ po něm aby něco dělal).
Takže OOP si opravdu představ jako objekty! (člověk, zombík, pes, účet, databáze), využiješ to tehdy kdy budeš chtít aby ty objekty něco dělali (metody) a měli nějaké vlastnosti (jméno, věk..).
Chci aby to co programuju mělo nějaké jméno, věk (vlastnosti) a aby to
chodilo, jedlo, pilo (metody), tak zvolím OOP
Chci abych to jen já pozdravil, či vypsalo jen nějakou věc tak volím
funkci.
+20 Zkušeností
+2,50 Kč
Petr Valigura:23.9.2015 12:09
Plus ještě bych mohl říct, že vlastně OOP v JS, je hodně postaveno na funkcích, nemáš zde třídy a podobně, takže vlastně i když používáš OOP tak programuješ s funkcemi
Viz. první článek o JS tady
JavaScript využívá tzv. funkcionální paradigma, které umožňuje do běžné proměnné uložit funkci. To se nabízí např. pro tvorbu Lambda funkcí. Tato zdánlivě jednoduchá vlastnost potom umožňuje předávat funkce v parametru jiné funkce (tzv. callback) nebo dokonce využít funkci jako konstruktor objektu. Objektově orientované programování zde nabývá úplně nových rozměrů, funguje zde prototypová dědičnost, tedy objekt je předlohou jiného objektu.
Neaktivní uživatel:23.9.2015 12:25
Ahoj, ačkoliv to dole Reenergy hezký popsal (nezapomeňte mu naťukat plusy) zmíním ještě pár věcí ... Jurajs - v tom druhém případě objekt nevytváříš - není kde by se vzal ... A co se týká OOP - Dolním, že objekty použiješ když děláš větší projekt, na který jde uplatnit nějaká souhrnná logika - programuju něco z reálného světa (více či méně) a dědím a dědím a dědím ... Objekt dům, objekt byt mají něco společné ... Jejich funkce budou podobné - tak proč je neuložit nějak tak abych je psal jen jednou, ale zároveň abych si je nespletl s funkcemi dopravních prostředků ? Objekt OBYDLÍ bude obsahovat všechny tyhle věci a svým potomkům je předá ...
Takže chceš-li pochopit OOP a jeho význam, koukej si rychle přečíst nějaký seriál o něm. A hledej na netu tohle : DĚDIČNOST ZAPOUZDŘENÍ POLYMORFYSMUS ABSTRAKCE
Tohle přímo vybízí použít ES6, novou verzi JS. Doporučuji se kouknout asi na nejlepší transpiler Babel.
class Uzivatel {
constructor(jmeno) {
this.jmeno = jmeno;
}
predstavSe() {
return "Ahoj já jsem " + this.jmeno;
}
}
coells:23.9.2015 13:00
To je trochu zamotané a zkomolené, ne?
Javascript staví na objektech a funkce jsou objekty, ne naopak.
Všechno v Javascriptu, co není simple type, je objekt.
Funkcionální paradigma neznamená, že můžeš funkci uložit do
proměnné, to si na devbooku někdo vymyslel a ostatní to papouškují.
Možnost uložit funkci do proměnné má jiný termín, first-class
citizen.
Samotné funkcionální paradigma staví na matematické aplikaci funkcí a
jejich vyhodnocování.
Základní stavební kámen je tedy sice funkce, ale klíčové vlastnosti
paradigmatu určuje aplikace, determinismus, imutabilita a žádné
side-efekty.
Neaktivní uživatel:23.9.2015 13:33
Jsem určitě pro ... Ale je fakt, že věci co nenapsal přesně jsou tazateli úplně k ničemu, protože ten nejen že nezná pokročilou teorii objektů, ale kdybys mu řekl že funkce je formálně objekt, tak bude možná tak zmatený a frustrovaný, že půjde a bude hledat jak teda programovat v js bez objektů, což nelze stejně jako v Javě a všechno jeho dosavadní snažení bude skoro v koši... Já myslím, že by měl vědomosti vstřebávat postupně ...
coells:23.9.2015 13:52
A nebylo by lepší místo toho, aby se začátečník učil nesmysly, vysvětlit mu jak to vlastně v JS je?
Že funkce se dá zavolat čtyřmi způsoby a jeden z nich je použít
klíčové slovo new?
Že this nabývá významu na základě způsobu, jakým funkci zavoláme?
Že JS není funkcionální jazyk, tak proč o tom vlastně mluvit?
Že výhoda vytváření objektu přes funkci spočívá v zapouzdření
objektu?
Doučoval jsem už řádku lidí v programování i matematice a vzorec je
vždy stejný.
Nepochopení problematiky plyne z chybejících základů.
Když celou problematiku vysvětlíš korektně a do hloubky s motivací pro
jejich návrh, začátečníci najednou nemají problém pochopit ani velice
složité koncepty, protože už znají proč i jak.
Ale naopak tvrdě narazí, když se jim to někdo snaží vysvětlit se smotanou
problematikou, protože tomu najednou nerozumí.
Petr Valigura:23.9.2015 14:10
O co ti jde? Máš pravdu, ale řekni mi, proč tohle psát člověku, který se ptá, kdy používat funkci a kdy OOP. Snažil jsem se to co nejvíce zjednodušit a je fajn napsat super pojmy (které nezasvěcenému, musí připadat dost šíleně), ale ptal se na otázku, na jednoduchou otázku, tak jsem mu jednoduše odpověděl (teda snažil jsem se to ukázat na příkladech), potom jsem si vzpomněl, že ho to může mást třeba proto, že už má lehké zkušenosti s OOP v nějakém jiném jazyce, tak jsem přihodil to, že se to dělá pomocí funkcí (jestli zkoumal funkce v JS více, tak si hned uvědomí co to ve skutečnosti je a pokud ne, tak si bude myslet dál správně, že je to tvořeno pomocí funkce a časem se zjistí víc) ta citace měla dokreslit to, že ačkoliv JS není funkcionální jazyk (i když využívá některé jeho mechanismy), tak se na jeho OOP nedá dívat jako na OOP třeba C#.
Btw. v prvním komentáři jsem se dokonce pokoušel mluvit o tom jako o objektu ale když mu to nestačilo, ještě jsem to zjednodušil.
A je super, že si doučoval programátory, ale já tady nedoučuji a ani nepíšu článek, který se tím zabývá, tohle je komentář, který mu odpověděl na otázku několika pochopitelnými příklady a když bude potřebovat zjistit o tom něco víc tak si buď najde někoho schopného jako jsi ty a nebo si to najde na netu!
Neaktivní uživatel:23.9.2015 14:20
Ano i ne. Je pravda, že pochopení složitých konceptů je snazší, když chápeš základ. Ale podle mě to nesedí každému. Někdo se učí praxí - trochu se naučí teorie a trochu programuje ... A pak trochu teorie přidá a zase programuje... Pak to schéma není nejlepší.. Vím to podle sebe ... Začínal jsem přesně takhle a příliš teorie je fajn, ale na začátek nic co bych preferoval.
Jurajs:23.9.2015 16:25
Pokud jde o OOP v JS, nejsem v tom žádnej přeborník, ale ten první příklad s new vytvoříš objekt, bez toho new to nevím co znamená, asi tak ve zkratce, jinak díky za informace. Většinou na weby používám v JS jen funkce a jQuery - to je jednoduchší
Neaktivní uživatel:23.9.2015 16:34
Však já tě taky nekritizuju ... funkcionálně v JS není podle mě špatně... ten jazyk je dokonale navrženej na event handling, tak proč toho nevyužít v té nejjednodušší formě... jinak samozřejmě ten první JE volání konstruktoru, ovšem ten druhý už má s OOP méně společného... neřekl jsem s objekty protože objektem je právě i ona funkce... je to krásně zacyklený v sobě.. no na objekty je super seriál na Zdrojáku a možná by stálo za to jediný ucelený článek na OOP v JS tady na síti taky trochu rozšířit ...
Jurajs:23.9.2015 16:37
Já ti nic nevyčítám ...jen říkám, že je pro mě jednodušší JS funkce, než OOP a k tomu jQuery ...
JavaScript se trochu odlišuje od ostatních jazyků, ale když se "ponoříte do jeho nitra", tak je to neskutečně mocný jazyk. Konec konců zjistíte, že v něm nepotřebujete ani Angular, ani jQuery, ani další pitloviny, které krásu jeho jazyka jaksi komplikují a dělají ho ještě nepřehlednější, ještě pomalejší a ještě krkolomější než je.
OOP je v JavaScriptu velmi důležité - pokud mu neporozumíte, tak to moc nemá smysl. OOP v JS se neučte moc obecně, jen si prostě vezměte, že něco interaktivního je na stránce víckrát. Zkuste si to udělat bez OOP. Bude to přinejmenším dost krkolomné.
Neaktivní uživatel:23.9.2015 16:44
Naprosto souhlasím... a mám radost, že někdo sdílí moje velké nadšení pro JS...je to jazyk s bohatým obsahem... jen proniknout do něj je občas složitější...
jinak abych řekl i něco autoru užitečnější, tak si stáhni třeba na fóru si vyhledej machra, kde se dělal responzivní time picker. Ta si stáhni moje (autorské) řešení a podívej se do kódu. bude tam nějaký objekt na ten picker, pak tam bude mít hromadu metod a na konci (nebo začátku) bude (nevím jak moc jsem to komplikoval) asi 5 řádku window.onload, popř. window.addEventListener("load"...), kde se budou systematicky načítat potřebné elementy a vytvoří se ty objekty. Tady tyto asi 3 základní pravidla ti na úvod do JavaScriptu stačí, už s tím uděláš mnohem více užitku než někteří jQuery plácalové, co to všechno narvou do anonymního objekty (zvenku nedostupného), všechny elementy načtou nějakým super nóbl selektorem a pak v celé aplikaci jak blbouni identifikují jednotlivé prvky DOMu 100×, protože je nenapadlo, že by alespoň ten základ mohli zabalit do objektu s jedním (zde na síti se používá termín) attributem.
Patrik Valkovič:23.9.2015 18:20
- Abych se taky ponočil do diskuze
- Neaktivní uživatel - Javascript je neskutečně mocný jazyk. Dovolí to, co jiné jazyky ani nenapadne. Bohužel to často vede k tomu, že v něm lidi píší jak (omlouvám se) prasata.
K původní otázce: s JS sis to pěkně zkomplikoval. funkce je objekt a s objektem můžeš v JS pracovat jako s polem. Takže vlastně, funkce je pole (fantastické, žejo ). Klíčové slovo u objektů v JavaScriptu je "this". Funkce, která to obaluje (function uzivatel) si můžeš představit jako konstruktor. Když ji ale nezavoláš přes new, je to stále jen funkce. V prvním případě tedy zavoláš funkci - proměnná bude obsahovat null nebo undefined (nebo něco takového). Ve druhém případě vytváříš instanci tříy uživatel, která ale bude prázdná, protože nemá nadefinované žádné atributy (nikde není použito slovo this).
Pokud se chceš blíže podívat, jak proměnné vypadají, použij console.log(pavel). Do konzole prohlížeče by se ti měl objekt vypsat a můžeš si projít jeho strukturu.
Co se dědičnosti týče, na tom se programátoři snad ještě neshodli. Zavádí se pojem prototypová dědičnost - bližší info zde: https://developer.mozilla.org/…totype_chain (to spíše pro zájemce, ať tě to ještě nezmate víc).
Nakonec mé doporučení - pokud neumíš OOP pořádně z nějakého jiného (normálního) jazyka, tak se ho první nauč tam. Ať to bude C++, C#, Java. Poté bych teprve přešel na JS - protože jako jazyk je hodně specifický.
Neaktivní uživatel:23.9.2015 19:00
Za referencí díky, ale skoro to vypadá jako by zmínka o prasatech směřovala taky na mě
Patrik Valkovič:23.9.2015 19:22
To rozhodně ne Myslel jsem to tak všeobecně že lidi, kteří nemají dobré základy OOP, píšou tak, že se v tom potom ani za mák nevyzná Neříkám, že je to tvůj případ
hypnozc:25.9.2015 12:38
Koukám, že jsem tu vyvolal pořádnou diskusi. Všem děkuji za odpověď, především Michal Martinek, protože přesně toto jsem hledal. Základy OOP mám z C# a PHP, takže OOP v JS ES6 mi naprosto vyhovuje. Ještě jednou moc děkuji!
1Pupik1989:26.9.2015 7:53
No ale fuj. Proč nedáváš metody do prototypu a při každé instanci vytváříš znovu metody? To je jedna z fází, kdy javascript úplně zabiješ. Javascript má právě sílu v prototypu. Kdyby si ty metody měl zvlášť a přiřazoval je, tak ještě budiž. Tohle je hodně špatný zvyk. Nechci tě nijak poučovat, jen upozorňuji.
Honza Bittner:26.9.2015 10:59
ES2015 classes are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.
Jen abys věděl, jak to vlastně funguje... JS jede v jádru pořád na prototypech.
Petr Valigura:26.9.2015 13:06
Upozorňuji, že jsem odpovídal na otázku! Nepsal jsem článek ani jsem nikoho neučil! Ptal se kdy použít funkci a kdy OOP... takto triviální otázka, kterou neví (tím nechci urazit autora, přece jen každý z nás byl v téhle situaci) a já mu do toho mám začít mluvit o prototypech? Dobře moje chyba příště, mu ještě vysvětlím Scheme, Javu a Self, také sepíši všechny informace o tom jak fungují prohlížeče přihodím něco o historii, taky by se určitě hodilo mu vysvětlit i C, když to je to C-like jazyk, také mu řeknu něco o CommonJS, plus bych ho mohl naučit ES6, kterou se taky sám ještě učím, ale určitě bych ho tom měl naučit protože, tady to očividně funguje tak, že to co nenapíšeš do jednoduché odpovědi do komentáře to nevíš. A díky za typ, taky zkusím tohle mentální sebe uspokojování (kdyby jsi chtěl opravdu pomoc napíšeš to autorovi), kdy budu chodit do sekcí, kde lidé budou potřebovat pomoci a počkám až jim někdo pomůže a pak se na toho pomocníka vrhnu, protože nenapsal člověku, který potřebuje jak vypsat "Hello world", jak fungují vlákna... Neříkám, že toho co se týče prototypů nemáš pravdu, ale určitě s tím víc pomůžeš autorovi otázky než mně!
1Pupik1989:27.9.2015 8:38
Otázka byla vyřešena. Vysvětlil si ve svém příspěvku vše podstatné. Proto jsem reagoval přímo na tebe. Mě je jedno jak zapisuješ metody, jen jsem upozornil. Nepsal jsem, že máš autorovi vysvětlovat bůhvíco.
Zobrazeno 30 zpráv z 30.