Objektově orientované programování v JavaScriptu-vysvětleno na příkladech

JavaScript není objektově orientovaný jazyk založený na třídách. Ale stále má způsoby použití objektově orientovaného programování (OOP).

v tomto tutoriálu vysvětlím OOP a ukážu vám, jak jej používat.

Podle Wikipedie, class-based programování je

styl Objektově orientované programování (OOP), v níž dědictví dochází prostřednictvím definování tříd objektů, místo dědictví vyskytující se přes objekty samotné,

nejpopulárnější model OOP je založené na třídě.

ale jak jsem již zmínil, JavaScript není langauge založený na třídě – je to langauge založený na prototypu.

podle dokumentu Mozilly:

prototyp založený na jazyce má pojem prototypového objektu, objekt slouží jako šablonu, ze které chcete získat počáteční vlastnosti pro nový objekt.

podívejte se na tento kód:

let names = { fname: "Dillion", lname: "Megida"}console.log(names.fname);console.log(names.hasOwnProperty("mname"));// Expected Output// Dillion// false

objekt proměnná names má jen dvě vlastnosti – fnamelname . Žádné metody vůbec.

odkud tedy pochází hasOwnProperty?

pochází z prototypu Object.

Zkuste přihlášení obsah proměnné do konzole:

console.log(names);

Když si rozšířit výsledky v konzole, dostanete toto:

Všimněte si poslední vlastnosti – __proto__? Zkuste rozšíření:

uvidíte sadu vlastností pod Object konstruktoru. Všechny tyto vlastnosti pocházejí z globálníhoObject prototypu . Pokud se podíváte pozorně, všimnete si také našeho skrytého hasOwnProperty .

jinými slovy, všechny objekty mají přístup k prototypu Object. Nemají tyto vlastnosti, ale mají přístup k vlastnostem v prototypu.

vlastnost __proto__

ukazuje na objekt, který se používá jako prototyp.

Toto je vlastnost každého objektu, která mu umožňuje přístup k vlastnosti Object prototype.

Každý objekt má tuto vlastnost ve výchozím nastavení, které se týká Object Protoype s výjimkou, pokud je to nastaveno jinak (to je, když objekt je __proto__ je poukázal na další prototyp).

úprava vlastnosti _ _ proto _ _

tato vlastnost může být změněna explicitním uvedením, že by měla odkazovat na jiný prototyp. K dosažení tohoto cíle se používají následující metody:

objekt.vytvořit()

function DogObject(name, age) { let dog = Object.create(constructorObject); dog.name = name; dog.age = age; return dog;}let constructorObject = { speak: function(){ return "I am a dog" }}let bingo = DogObject("Bingo", 54);console.log(bingo);

V konzoli, to je to, co byste:

Všimněte si, __proto__ vlastnost speak metoda?

Object.create používá argument, který mu byl předán, aby se stal prototypem.

nové klíčové slovo

function DogObject(name, age) { this.name = name; this.age = age;}DogObject.prototype.speak = function() { return "I am a dog";}let john = new DogObject("John", 45);

john__proto__ nemovitost je zaměřena na DogObject‚s prototyp. Ale pamatujte si, DogObject‚s prototyp je objekt (klíč a hodnota páru), a proto to také má __proto__ vlastnost, která odkazuje na globální Object protoype.

tato technika se označuje jako řetězování prototypů.

Všimněte si, že: new klíčové slovo, přístup dělá to samé jako Object.create(), ale pouze usnadňuje, jak to dělá některé věci automaticky za vás.

a tak dále…

každý objekt v JavaScriptu má ve výchozím nastavení přístup k prototypu Object. Pokud nakonfigurován tak, aby použít jiný prototyp, řekněme prototype2prototype2 bude mít také přístup k Objektu prototypu ve výchozím nastavení, a tak dále.

Objekt + Funkce Kombinace

pravděpodobně Jste zmateni tím, že DogObject je funkce (function DogObject(){}) a má vlastnosti přistupovat pomocí tečkové notace. Toto se označuje jako kombinace funkčních objektů.

když jsou funkce deklarovány, ve výchozím nastavení jsou k nim připojeny mnoho vlastností. Nezapomeňte, že funkce jsou také objekty v datových typech JavaScript.

nyní Třída

JavaScript zavedla Klíčové slovoclass v ECMAScript 2015. Díky tomu se JavaScript jeví jako jazyk OOP. Ale je to jen syntatický cukr nad stávající technikou prototypování. Pokračuje ve svém prototypování na pozadí, ale vnější tělo vypadá jako OOP. Nyní se podíváme, jak je to možné.

následující příklad je obecné používání class v Javascriptu:

class Animals { constructor(name, specie) { this.name = name; this.specie = specie; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }}let bingo = new Animals("Bingo", "Hairy");console.log(bingo);

Toto je výsledek v konzoli:

__proto__ odkazy Animals prototyp (což zase odkazuje na Object prototyp).

Z toho můžeme vidět, že konstruktor definuje hlavní funkce, zatímco všechno mimo konstruktor (sing()dance()) jsou bonusové funkce (prototypy).

na pozadí pomocí new klíčové slovo, přístup, výše uvedené znamená:

function Animals(name, specie) { this.name = name; this.specie = specie;}Animals.prototype.sing = function(){ return `${this.name} can sing`;}Animals.prototype.dance = function() { return `${this.name} can dance`;}let Bingo = new Animals("Bingo", "Hairy");

Subclassing

Toto je funkce OOP, kde třída dědí vlastnosti od nadřazené třídy, ale má další funkce, které rodiče nemá.

zde je, například, řekněme, že chcete vytvořit kočky třídy. Místo toho, abyste vytvořili třídu od nuly-znovu uvedete název, věk a druhový majetek, zdědili byste tyto vlastnosti od třídy mateřských zvířat.

tato třída koček pak může mít další vlastnosti, jako je barva vousů.

podívejme se, jak jsou podtřídy prováděny s class.

zde potřebujeme rodiče, od kterého podtřída dědí. Zkontrolujte následující kód:

class Animals { constructor(name, age) { this.name = name; this.age = age; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }} class Cats extends Animals { constructor(name, age, whiskerColor) { super(name, age); this.whiskerColor = whiskerColor; } whiskers() { return `I have ${this.whiskerColor} whiskers`; }}let clara = new Cats("Clara", 33, "indigo");

výše uvedené, dostaneme následující výstupy:

console.log(clara.sing());console.log(clara.whiskers());// Expected Output// "Clara can sing"// "I have indigo whiskers"

Když se přihlásíte obsah clara v konzoli, máme:

všimněte Si, že clara__proto__ vlastnost, která odkazuje na konstruktor Cats a získá přístup do whiskers() metoda. __proto__ vlastnost má také __proto__ vlastnost, která odkazuje na konstruktor Animals a tím získat přístup k sing()dance()nameage jsou vlastnosti, které existují na každý objekt vytvořený z tohoto.

Pomocí Object.create metoda přístupu, výše uvedené znamená:

function Animals(name, age) { let newAnimal = Object.create(animalConstructor); newAnimal.name = name; newAnimal.age = age; return newAnimal;}let animalConstructor = { sing: function() { return `${this.name} can sing`; }, dance: function() { return `${this.name} can dance`; }}function Cats(name, age, whiskerColor) { let newCat = Animals(name, age); Object.setPrototypeOf(newCat, catConstructor); newCat.whiskerColor = whiskerColor; return newCat;}let catConstructor = { whiskers() { return `I have ${this.whiskerColor} whiskers`; }}Object.setPrototypeOf(catConstructor, animalConstructor);const clara = Cats("Clara", 33, "purple");clara.sing();clara.whiskers();// Expected Output// "Clara can sing"// "I have purple whiskers"

Object.setPrototypeOf je metoda, která přebírá dva argumenty – objekt (první argument) a požadovaný prototyp (druhý argument).

z výše uvedeného funkce Animals vrací objekt sanimalConstructor jako prototyp. Funkce Cats vrací objekt s catConstructor jako prototyp. catConstructor na druhé straně je uveden prototyp animalConstructor.

Proto, obyčejná zvířata mají přístup pouze do animalConstructor, ale kočky mají přístup do catConstructoranimalConstructor.

zabalení

JavaScript využívá svou prototypovou povahu k přivítání vývojářů OOP do svého ekosystému. Poskytuje také snadné způsoby, jak vytvářet prototypy a organizovat související data.

skutečné jazyky OOP neprovádějí prototypování na pozadí – stačí si to vzít na vědomí.

velké díky kurzu Will Sentance na Frontend Masters-JavaScript: tvrdé části objektově orientovaného JavaScriptu. Naučil jsem se všechno, co vidíte v tomto článku (plus trochu dalšího výzkumu) z jeho kurzu. Měl by ses na to podívat.

můžete mě zasáhnout na Twitteru na iamdillion pro jakékoli dotazy nebo příspěvky.

Díky za přečtení:)