Prototypová dědičnost JavaScriptu

Shrnutí: v tomto kurzu se dozvíte, jak funguje prototypová dědičnost JavaScriptu.

Úvod do prototypové dědičnosti v jazyce JavaScript

Pokud jste pracovali s jinými objektově orientovanými programovými jazyky, jako je Java nebo C++, byl vám koncept dědičnosti znám.

V tomto programovacím paradigmatu je třída plánem pro vytváření objektů. Pokud chcete, aby nová třída opakovaně využívala funkce existující třídy, můžete vytvořit novou třídu, která existující třídu rozšiřuje. Tomu se říká klasická dědičnost.

JavaScript klasickou dědičnost nepoužívá. Místo toho používá prototypovou dědičnost.

Při prototypové dědičnosti objekt „dědí“ vlastnosti od jiného objektu prostřednictvím vazby na prototyp.

JavaScript prototypová dědičnost a __proto__

Uveďme si příklad, který nám tento pojem objasní.

Následující příklad definuje objekt person:

Code language: JavaScript (javascript)

Objekt person má dvě vlastnosti:

• name, která obsahuje řetězcovou hodnotu.
• greet, která obsahuje hodnotu, která je shodou okolností funkcí. greet je známá jako metoda objektu person.

Ve výchozím nastavení vám JavaScript poskytuje funkci Object() a objekt prototypu, ke kterému lze přistupovat prostřednictvím vlastnosti prototype funkce Object():

Pokud k definici objektu použijete syntaxi objektového literálu, objekt je instancí Object. Proto výraz person instanceof Object vrací true:

Code language: JavaScript (javascript)

Výstup:

Code language: JavaScript (javascript)

Objekt person se také váže na objekt Object.prototype prostřednictvím vazby ].

Jinými slovy, prostřednictvím objektu person můžete přistupovat k libovolným vlastnostem objektu Object.prototype. Například:

Code language: JavaScript (javascript)

Výstup:

Code language: JavaScript (javascript)

Výstup je výchozí převod z objektu na řetězec.

Pokud zavoláte metodu toString() na objektu person, JavaScript ji nemůže najít. JavaScript tedy postupuje podle řetězce prototypů a hledá metodu na objektu Object.prototype. JavaScript najde metodu toString() na objektu Object.prototype a provede ji.

Pro přístup k prototypu objektu person můžete použít jeho vlastnost __proto__:

Code language: JavaScript (javascript)

Výstup:

Code language: JavaScript (javascript)

Následující definuje další objekt s názvem teacher. Objekt teacher má metodu teach():

Code language: JavaScript (javascript)

Chcete-li, aby objekt teacher měl přístup ke všem vlastnostem objektu person, můžete prototyp objektu teacher nastavit na objekt person:

Code language: JavaScript (javascript)

Všimněte si, že v produkčním kódu byste nikdy neměli používat __proto__. Je to jen pro účely učení a pochopení.

Nyní může objekt teacher přistupovat k vlastnosti name a metodě greet() z objektu person prostřednictvím řetězce prototypů:

Code language: JavaScript (javascript)

Výstup:

Code language: JavaScript (javascript)

Když zavoláte metodu greet() na objektu teacher, JavaScript ji nejprve najde na objektu teacher.

Protože JavaScript nemůže metodu najít na objektu teacher, postupuje podle řetězce prototypů a hledá metodu na objektu person. Tentokrát JavaScript najde metodu na objektu person a provede metodu greet().

V jazyce JavaScript říkáme, že objekt teacher dědí vlastnosti objektu person. A to je prototypová dědičnost.

Standardní způsob implementace prototypové dědičnosti v ES5

ES5 poskytl standardní způsob práce s prototypovou dědičností pomocí metody Object.create().

Všimněte si, že nyní byste měli k implementaci dědičnosti používat novější klíčová slova ES6 class a extends. Je to mnohem jednodušší.

Metoda Object.create() vytvoří nový objekt a použije existující objekt jako prototyp nového objektu:

Code language: JavaScript (javascript)

Metoda Object.create() přijímá dva argumenty:

• První argument (proto) je objekt použitý jako prototyp nového objektu.
• Druhý argument (propertiesObject), pokud je uveden, je nepovinný objekt, který definuje další vlastnosti nového objektu.

Předpokládejme, že máte objekt person:

Code language: JavaScript (javascript)

Následující příkaz vytvoří prázdný objekt teacher s __proto__ objektu person:

Code language: JavaScript (javascript)

Poté můžete definovat vlastnosti objektu teacher:

Code language: JavaScript (javascript)

Nebo můžete všechny tyto kroky provést v jednom příkazu takto:

Code language: JavaScript (javascript)

ES5 také zavedl metodu Object.getPrototypeOf(), která vrací prototyp objektu. Například:

Code language: JavaScript (javascript)

Výstup:

Code language: JavaScript (javascript)

Souhrn

• Dědičnost umožňuje jednomu objektu používat vlastnosti a metody jiného objektu.
• JavaScript používá prototypovou dědičnost, které se dosahuje pomocí propojení prototypů.

.