OOP a Javascript 2

25.9.2009 17:40 | Přečteno: 2593× | programování |

Moje důvody pro nepoužívání operátoru new a this

Pod minulým článek se odehrála diskuze nad tím, jakou variantu tvorby objektů zvolit. V zásadě existují 2 smysluplná řešení.

1. řešení spočívá v použití funkce jako konstruktoru

var Clovek = function () {
}
Clovek.prototype.pozdrav = function () {
 alert('ahoj);
}
var karel = new Clovek();
karel.pozdrav();

2. řešení spočívá ve vytvoření přímo objektu

//vytvoreni jednoho konkretniho objektu
var karel = {
 pozdrav : function () {
  alert('ahoj');při použití
 }
};
//vytvoreni funkce, ktera se bude chovat jako tovarna, coz mi umozni vytvorit vice objektu
var Clovek = function () {
 return {
  pozdrav : function () {
   alert('pozdrav');
  }
 };
};

Já osobně preferuji variantu číslo 2. A proč je tomu tak? Mám rád jistou jednoznačnost a snažím se snížit náchylnost k chybám ať už z nedbalosti, nebo z přehlédnutí. Co se vlastně stane pokud použiji první příklad s new, ale na new vlastně zapomenu?

//chyba, chybi klicove slovo new
var karel = Clovek();

Takové přehlednutí se prostě občas stane. Bohužel nemohu očekávat, že by mě interpretr upozornil na to, že řádek je špatně. On totiž syntakticky špatně není. Funkce je volána správně. Jen výsledek jejího volání nevytvoří námi požadovaný objekt. Tento druh chyb se nepříjemně hledá. Moje technika na odstranění tohoto typu chyb je, proste new nepoužívat. Podle mě se bez new dá obejít a nepřijdu o žádnou vymoženost javascriptu.

V diskuzi jsem také napsal, že nepoužívám prototypovou dědičnost. To nevyznělo úplně nejlépe, protože to vypadalo jako kdybych na tomto druhu dědičnosti viděl něco špatného, navíc to není tak úplně pravda. Naopak prototypová dědičnost je úžasná věc. Já se jen snažím dědičností šetřit obecně. Je jedno jestli píši v Javascriptu, PHP nebo Jave. Já upřednostňuji skládání před dědičností. Dědičnost je velice mocný nástroj pro reuse kódu, ale je to dvousečná zbraň.

Co se týká použití this, zde je podle mě také opatrnost na místě. Pojďme se podívat jakými způsoby se dá volat funkce.

1. Jako obyčejná funkce prostým zavoláním. V tomto případě this použité uvnitř funkce odkazuje na globální objekt. Toto bohužel znemožňuje využití vnitřních funkcí.

var auto = {
 barva : 'cervena'
};
auto.nahlasBarvu = function () {
 //zde je vse v poradku, this ukazuje na objekt auto
 alert(this.barva);
 var hlasic = function () {
  //tady uz jsme bohuzel v koncich, protoze this ukazuje na globalni objekt. Je to tim, ze funkce hlasic() je zavolana bez kontextu
  alert(this.barva);
 }
 hlasic();
};
auto.nahlasBarvu();

Jedná se samozřejmě o naprosto vykonstruovaný příklad. Ovšem ukazuje, že při troše nepozornosti si můžeme zadělat na nepříjemné problémy. Řešení tu samozřejmě je, ale je to pro mě nepříjemným hackem.

var auto = {
 barva : 'cervena'
};
auto.nahlasBarvu = function () {
 // v tomto kontextu je this stale auto. Pojdme si odkaz na auto schovat pro pozdejsi pouziti uvnitr vnorene funkce
 var that = this;
 var hlasic = function () {
  //pouziti vytvoreneho that
  alert(that.barva);
 }
 hlasic();
};
auto.nahlasBarvu();

2. Jako konstruktor. V tomto případě this ukazuje na objekt, který je vytvořen voláním

var objekt = new Trida();

3. Jako metoda objektu. Zde ukazuje na objekt u kterého je metoda volána

var auto{
 'barva' : 'cervena',
 nahlasBarvu : function () {
  alert(this.barva);
 }
};

4. Funkce zavolaná za použití apply. Toto nám umožní za this uvnitř metody dosadit prakticky cokoliv při volání funkce. Dá se tím například také vyřešit první problém.

var auto = {
 barva : 'cervena'
};
auto.nahlasBarvu = function () {
 alert(this.barva);
 var hlasic = function () {
  //tady uz je to horsi
  alert(this.barva);
 }
 //apply zavola funkci hasic, a doplni to this uvnitr funkce odkaz predany v parametru.
 hlasic.apply(this);
};
auto.nahlasBarvu();

Javascript je velice mnohotvárný jazyk. Pro ulehčení práce s ním, jsem si jen vybral podmožinu vlastností, které mi nevyhovují a které tudíž nepoužívám. Možná bych to přirovnal k C++ a jeho možnosti dědění z více tříd. Je totiž spousta týmů, které tuto vlastnot ve svých projektech zakazují používat, a nebo kladou na její použití jasně daná pravidla.

Původně jsem se těmto věcem vůbec nechtěl věnovat. Chtěl jsem ukázat jak se v javascriptu dá psát krásný, čístý OOP design. Na javascriptu se mi velice líbí, že postrádá tradiční třídy. Protože o čem je vlastně OOP. OOP je o objektech a javascript mi umožňuje vytvořit objekt bez třídy. Ba co víc, co je více objektové, než když objekt může dědit od objektu. Tím samozřejmě opět nechci říct, že třídy jsou špatné. Každý jazyk implementuje OOP trochu jinak a všechny přístupy mají své výhody a nevýhody.

       

Komentáře

[mimi.vx]

Nebylo by mozno z tohoto vytvorit good clanek ci dokonce serial?

[Michal]

Možné by to bylo, ovšem nevím jak by to bylo s pravidelností takového seriálu.

[jsClass]

Mezi prvními odkazy na OOP v JS na abcLinuxu mi vypadne tento a aktuálního nic moc, ačkoliv se to od té doby změnilo a postup, který například definovala Mozilla se už trochu liší a v budoucnu (od ECMAScript 2015) nás čeká objektová dědičnost pomocí class, ačkoliv na pozadí je stále prototyp. Dovolím si proto přidat link na aktuálnější informace o OOP v JS až je někdo bude hledat podobně jako já.

[dark]

Tak, můj očekávaný komentář je zde:)

Hned na začátku článku demonstrujete rozdíl mezi klasickou prototypovou dědičností a vaší dědičností bez používání operátoru new a this. Klasická dědičnost je na 7 řádků, ta vaše na 12 (už tady je možné vidět, že vaše řešení není z hlediska délky kódu zrovna šťastné). Navíc má problémy, které jsou popsané v diskuzi u minulého zápisku, konkrétně "problémový, nepřehledný, paměťově náročný a nevýkonný".

Vaše řešení omlouváte tím, že se může stát, že zapomenete operátor new, a pak se to strašně špatně hledá. Já vám ukážu takový malý trik, pomocí kterého se to bude hledat velice snadno. Modifikuji váš příklad:

var Clovek = function () {
  if (this === window) throw new Error('New instance must be created by new operator!');
}
Clovek.prototype.pozdrav = function () {
 alert('ahoj);
}
var karel = new Clovek();
karel.pozdrav();

Co na to říkáte? Podle mě to celkem obstojně řeší váš problém s new.

Dále se věnujete problémy s this, ale podle mě se jedná o zcela vykonstruované příklady v praxi se nevyskytující. Kdo by proboha chtěl psát takto vnořené metody a komplikovat si tím život? Není jednodušší dát před metodu podtržítko jako upozornění, že zrovna tato metoda slouží k interním účelům, než to takto obalovat? Podtržítku snad každý rozumí, a když jsou třeba 2, je to hodně silné varování:) Vždyť ten obal vám přináší zase jen problémy a zanáší další komplikované zápisy do kódu (a nic to nepřináší). Je sice hezké, že se snažíte s dědičností šetřit, ale co až bude potřeba? Váš model je podle mě spíš o Anti-OOP, protože degradujete objektově orientovaný jazyk opravdu jen na tu hash-tabulku.

Nechtěl bych, aby to celé vyznělo špatně, ale všechny vaše problémy s new a this jsou naprosto jednoduše řešitelné, bez vytváření zbytečných komplikací. V životě bych nechtěl po někom číst takový kód, který zde popisujete (představte si tak splácaných třeba 2000 řádků), protože opravdu jediné řešení by bylo to celé zahodit a napsat znovu

[Michal]

Základní pricipy OOP jsou identita, zapouzdření a skládání. Rád bych konkrétně slyšel, který z těchto principů porušuje můj kód. Označením tohoto přístupu za Anti-OOP je zcela mimo mísu. Netuším s čím v tomto máte konkrétní problém, prosím o vysvětlení. Pokud se jedná o reuse kódu, patternů na reuse kódu je celá spousta (není to jen dědičnost), každý se volí v určité situaci. Já se tomuto tématu ovšem vůbec v článku nevěnuji, tak proč se o něm zmiňujete?

[dark]

Ten váš příklad je úplně to samé, jako kdybych třeba v pythonu nepoužíval zabudované 'class'. Za Anti-OOP to považuju proto, protože javascript nabízí zcela standardní OO model, který vy naprosto z nelogických důvodů obcházíte a vytváříte vlastní, který nic nenabízí. Mi to nevadí, že si tak píšete pro sebe, ale když už prezentujete tento model na netu, tak musíte počítat i s kritikou, a podle mě zcela oprávněnou.

Já jsem vám dokonce nabídl řešení, díky kterému se můžete vyhnout vaši chybě, kterou popisujete v první polovině článku. To byl podle mě asi váš nejsilnější argument, o který jste tímto přišel:)

Takže ještě jednou, můžete sepsat rozumné důvody (nebo alespoň jeden), proč by někdo ze čtenářů abíčka měl zvolit k OO programování právě model prezentovaný vámi? Prototypová dědičnost se v JS používá snad v každé knihovně a frameworku, je to standard v JS, tak proč používat něco jiného a mnohem komplikovanějšího?

Neberte to špatně, ale já fakt pořád nechápu, co vás k tomu vede, vždyť vy si dobrovolně komplikujete vlastní kód:)

[Michal]

Já ale přece proti prototypové dědičnosti nic nemám. Jenom není součástí mých blogpostů. Mě o ni vůbec nejde. Nechci na ni nic demonstrovat a tak není pro potřeby mých článků vůbec potřebná. Už ovšem začínám tušit kde je problém. To že nepoužívám nikde v produkčním kódu 'new' neznamená, že ho nepoužiji v jedné funkci pro dosažení dedičnosti.

 

function vytvorObjektDedenim(objektKDedeni) {
 var dedic = function (){};
 dedic.prototype = objektKDedeni;
 return new dedic();
}

[dark]

No já nevím, ale prototypovou dědičnost jste použil hned v prvním příkladu, a mluvil jste o tom, že se tam blbě hledá zapomenuté new, na což jsem odpověděl, že se to hledá naprosto jednoduše (máte tam i příklad).

Tím příkladem zde sice dosáhnete dědičnosti, ale prototypové, o té přece nemluvíte, já už ani nevím, o čem teda mluvíte?

[Michal]

Vám se to možná jednoduché zdá, mě ne. Dávat tento kód na každý první řádek své třídy je zbytečná repetice. Navíc já na javascriptu oceňuji právě jeho beztřídovost, o tom ty články jsou hlavně. Na té beztřídovosti se dají krásně pochopit základy OOP. Když se někdo začne učit OOP, první s čím přijde do styku je třída. Přirozenější mi přijde přijít do styku prvně s objektem. Vy mě stále osočujete z toho, že jdu proti javascriptu. Ale nejsem jediný kdo si myslí, že new je v javascriptu jaksi navíc a dokonce jde proti prototypové dědičnosti. Nebylo by lepší místo

var auto = {};
var sportak = function () {
}
sportak.prototype = auto;

napsat toto

var auto = {};
var sportak = {};
sportak.prototype = auto;

samozřejmě auto musí obsahovat něco k podědění.

nebo vy snad píšete v javascriptu věci jako

var objekt = new Object();

[dark]

Já píšu buď:

BLite.Object.define("mynamespace.Auto", {
  extend: BLite.Object,
  ...
});
BLite.Object.define("mynamespace.Sportak", {
  extend: mynamespace.Auto,
  ...
});

nebo

qx.Class.define("mynamespace.Auto", {
  extend: qx.core.Object,
  ...
});
qx.Class.define("mynamespace.Sportak", {
  extend: mynamespace.Auto,
  ...
});

Výhoda je taková, že to za mě udělá všechny ty nudné věci, a různé typové kontroly jako bonus.

Moc často nevidím, že by někdo používal javascriptovou dědičnost přímo, ale použije se něco high-level (třeba to co jsem napsal já, ale i jiných možností je dost). Ale jinak jde o to, že function(){} je konstruktor, kdežto {} je vytvoření instance třídy Object. Takže pokud chci obyč hash tabulku, vytvořím si ji pomocí {}, ale pokud chci vytvořit instanci nějaké třídy, použiji new JmenoTridy. Pokud vám nesedí new, tak si to můžete obalit třeba takto: function create(clazz) { return new clazz; }, pořád mi to přijde jako celkem čisté řešení, které navíc bude kompatibilní se vším, s čím přijdete do styku (a neříkejte mi, že si chcete dělat úplně všechno sám).

nebo vy snad píšete v javascriptu věci jako ...

new Object() psát nemusím, protože mi stačí {}, ale jiné i svoje třídy vytvářím pomocí operátoru new, tak jak se to normálně dělá (a přijde mi to přehledné).

[Michal]

Ale moje řešení je kompatibilní se vším s čím přijdu do styku. Navíc já nehaním váš způsob, tak jako to děláte vy s mým. Já jsem proti němu měl na svých projektech výhrady a tak jsem si našel workaround. Postupem času jsem zjišťoval, že nejsem sám kdo tyto problémy řeší. Chtěl jsem pomoci dalším lidem, kteří nevědí jak pojmenovat svůj problém a jak ho vyřešit a ukázat jim jistou cestu. Není na ní nic špatného, nic co by odporovalo dobrým mravům obecného programováni, OOP nebo dokonce javascriptu. Není to ohýbaní javascriptu, je to jen vynechání určitých jeho vlastností. Tak se to děje v mnoha jazycích. Například již zmíněná vícenásobná dědičnost v C++.

[deda.jabko]

Za Anti-OOP to považuju proto, protože javascript nabízí zcela standardní OO model

no a co... neni bezvedne, ze JS je tak pokrocily jazyk, ze v nem jde definovat i jiny objektovy model, nez ten ktery vymyslel vyrobce(tm) a ktery nekomu vyhovuje lip. kam se hroubou ruzne javy, c-sharpy nebo snad c++. ;-]

Mi to nevadí, že si tak píšete pro sebe, ale když už prezentujete tento model na netu, tak musíte počítat i s kritikou, a podle mě zcela oprávněnou.

ja treba osobne vim, ze takto jdou delat v JS objekty... ale jelikoz v JS neprogramuju, tak se rad podivam jak to delaji ostatni.

Takže ještě jednou, můžete sepsat rozumné důvody (nebo alespoň jeden), proč by někdo ze čtenářů abíčka měl zvolit k OO programování právě model prezentovaný vámi?

protoze se nekomu muze libit.... (myslim ten model, ne autor).

Prototypová dědičnost se v JS používá snad v každé knihovně a frameworku, je to standard v JS, tak proč používat něco jiného a mnohem komplikovanějšího?

a kdyby vsichni skakali z okna... to byl hodne laciny argument.... jinak... vsichni pouzivaji windows, tak proc pouzivat linux, ...neco jineho a mnohem komplikovanejsiho?

[dark]

no a co... neni bezvedne, ze JS je tak pokrocily jazyk, ze v nem jde definovat i jiny objektovy model, nez ten ktery vymyslel vyrobce(tm) a ktery nekomu vyhovuje lip. kam se hroubou ruzne javy, c-sharpy nebo snad c++. ;-]

No bezvadné to je, ale zahodit Object.prototype v js je podle mě špatné:)

protoze se nekomu muze libit.... (myslim ten model, ne autor).

Chtěl jsem opravdu rozumné důvody, líbit se někomu může cokoliv, třeba i autor

a kdyby vsichni skakali z okna...

Úmyslné nepochopení? to se stavá i na abc:)

[Michal]

Ale tady nikdo netvrdí, že chci zahodit Object.prototype. Celou dobu se snažím vám to vymluvit. Já jen nechci new a nechci this. Object.prototype je v pořádku.

[Michal]

V minulém článku mě jeden komentující upozornil na podobné články. Nakonec mi to nedalo a jal jsem se je hledat. Píše je pan Staníček a ejhle, shodli jsme se. http://zdrojak.root.cz/clanky/javascript-a-oblast-pusobnosti-promennych-dil-druhy/

[dark]

Je potřeba přečíst i komentáře

[Michal]

Ano chybička se vloudila právě v použití onoho this. Já osobně bych ho tam nepoužil, to je ovšem jediné na čem se s panem Staníčkem neshodneme.

[Marcel]

Dobrý den, chtěl bych se zeptat, zda někdo pracujete na pozici IT v Praze? Poradíte mi de se dá dobře vydělat? funguji jako java vývojář v menší firmě, a hledám změnu....

[Daniel]

Také jsem řešil změnu pracovního místa, a podařilo se mi to přes agenturu, která pod sebou má několik IT pracovníků, a dosazuje je přímo na místa podle jejich specifikace.

[Marcel]

Mohl bych se prosím zeptat, odkud ta agentura je? A kolik jste za to zaplatil?

[Daniel]

Dejte si do vyhledávač agenturu coolpeople, přes kterou jsem si našel novou práci, neplatíte za to vůbec nic, je to pro Vás celé zdarma, takže si můžete v podstatě jen polepšit.