Madame Lelica

Úvod

JavaScript je prototyp na bázi jazyka, a každý objekt v Javascriptu má skryté vnitřní vlastnost s názvem ], který může být použit k rozšíření objektů a metod. Více o prototypech si můžete přečíst v našem porozumění prototypům a dědičnosti v tutoriálu JavaScript.

donedávna pracovití vývojáři používali konstrukční funkce k napodobování objektově orientovaného návrhového vzoru v JavaScriptu., Specifikace jazyka ECMAScript 2015, často označovaná jako ES6, zavedla třídy do jazyka JavaScript. Třídy v Javascriptu nejsou ve skutečnosti nabízejí další funkce, a jsou často popisovány jako poskytování „syntaktický cukr“, přes prototypy a dědictví, které nabízejí čistší a elegantnější syntaxe. Protože jiné programovací jazyky používají třídy, syntaxe třídy v JavaScriptu usnadňuje vývojářům pohyb mezi jazyky.třídy

jsou funkce

třída JavaScript je typ funkce., Třídy jsou deklarovány pomocí klíčového slova class. Pro inicializaci třídy použijeme syntaxi výrazu funkce a syntaxe výrazu třídy.

// Initializing a function with a function expressionconst x = function() {}

// Initializing a class with a class expressionconst y = class {}

můžeme vstoupit do ] objektu pomocí Object.getPrototypeOf() metoda. Použijeme to k testování prázdné funkce, kterou jsme vytvořili.

Object.getPrototypeOf(x);

Output
ƒ () { }

tuto metodu můžeme použít také ve třídě, kterou jsme právě vytvořili.,

Object.getPrototypeOf(y);

Output
ƒ () { }

kód prohlásil s function class jak vrátit funkce ]. U prototypů se každá funkce může stát instancí konstruktoru pomocí klíčového slova new.

Output
x {}constructor: ƒ ()

to platí i pro třídy.

Output
y {}constructor: class

tyto příklady prototypu konstruktoru jsou jinak prázdné, ale můžeme vidět, jak pod syntaxí dosahují obě metody stejného konečného výsledku.,

definování třídy

v prototypech a výuce dědičnosti jsme vytvořili příklad založený na vytváření znaků v textové hře na hrdiny. Pokračujme v tomto příkladu a aktualizujme syntaxi z funkcí do tříd.

funkce konstruktoru je inicializován s řadou parametrů, které by být přiřazeny jako vlastnosti this, s odkazem na funkce samotné. První písmeno identifikátoru by bylo kapitalizováno konvencí.

// Initializing a constructor functionfunction Hero(name, level) { this.name = name; this.level = level;}

když to přeložíme do syntaxe třídy, která je uvedena níže, vidíme, že je strukturována velmi podobně.

// Initializing a class definitionclass Hero { constructor(name, level) { this.name = name; this.level = level; }}

víme, že funkce konstruktoru je určen pro předmět, plán kapitalizace první písmeno inicializátoru (což je volitelné) a prostřednictvím obeznámenost s syntaxe. class Klíčové slovo komunikuje jednodušším způsobem cíl naší funkce.,

jediný rozdíl v syntaxi inicializace pomocí class klíčové místo function a přidělení vlastností uvnitř constructor() metoda.

Definování Metody

běžná praxe s konstruktor, funkce je přiřazení metody přímo do prototype místo v inicializaci, jak je vidět v greet() metoda níže.

s třídami je tato syntaxe zjednodušena a metoda může být přidána přímo do třídy., Pomocí zkratky definice metody zavedené v ES6 je definování metody ještě stručnějším procesem.

podívejme se na tyto vlastnosti a metody v akci. Vytvoříme novou instanci Hero pomocí klíčového slova new a přiřadíme některé hodnoty.

const hero1 = new Hero('Varg', 1);

Když jsme vytisknout více informací o našem novém objektu s console.log(hero1), můžeme vidět více detailů o tom, co se děje s třídou inicializace.,

Output
Hero {name: "Varg", level: 1}__proto__: ▶ constructor: class Hero ▶ greet: ƒ greet()

můžeme vidět v výstup constructor() greet() funkce byly aplikovány na __proto__ nebo ] hero1, a ne přímo jako metoda na hero1 objekt. I když je to jasné při vytváření funkcí konstruktoru, není to zřejmé při vytváření tříd. Třídy umožňují jednodušší a stručnější syntaxi, ale v procesu obětují určitou jasnost.,

Rozšíření Třídy

výhodné funkce z konstruktoru funkce a třídy je, že mohou být prodloužena do nového objektu plány založené na rodiče. Tím se zabrání opakování kódu pro objekty, které jsou podobné, ale potřebují některé další nebo více specifických funkcí.

nové funkce konstruktoru lze z nadřazeného vytvořit pomocí metody call()., V níže uvedeném příkladu jsme se vytvořit více konkrétní třídu znaků, která se nazývá Mage, a přiřadit vlastnosti Hero pomocí call(), stejně jako přidání další nemovitosti.

V tomto bodě, můžeme vytvořit novou instanci Mage pomocí stejné vlastnosti jako Hero stejně jako novou, kterou jsme přidali.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Odesílání hero2 do konzole, můžeme vidět, jsme vytvořili nový Mage vychází z konstruktoru.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: ▶ constructor: ƒ Mage(name, level, spell)

S ES6 třídy, super klíčové slovo je použito místo call pro přístup k rodičovské funkce. Budeme používat extends odkazovat na nadřazenou třídu.

nyní můžeme stejným způsobem vytvořit novou instanci Mage.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

vytiskneme hero2 na konzoli a zobrazíme výstup.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: Hero ▶ constructor: class Mage

výstup je téměř přesně stejné, s výjimkou, že ve třídě stavebních ] je spojen s rodičem, v tomto případě Hero.

Níže je side-by-side srovnání celého procesu inicializace, přidávání metod, a dědictví konstruktor funkce a třídy.

ačkoli je syntaxe zcela odlišná, základní výsledek je téměř stejný mezi oběma metodami. Třídy nám dávají stručnější způsob vytváření plánů objektů a funkce konstruktoru přesněji popisují, co se děje pod kapotou.

závěr

v tomto tutoriálu jsme se dozvěděli o podobnostech a rozdílech mezi funkcemi konstruktoru JavaScriptu a třídami ES6. Třídy I konstruktéři napodobují objektově orientovaný dědičný model JavaScriptu, což je prototypový dědičný jazyk.,

pochopení prototypické dědičnosti je rozhodující pro efektivní vývojář JavaScriptu. Znalost tříd je velmi užitečná, protože populární knihovny JavaScriptu, jako je React, často používají syntaxi class.