Objekt Array představuje kolekci prvků. Pomáhá udržovat velký soubor dat, aby se zabránilo záměně více proměnných, a tím je třídí. Pokud chce uživatel použít jakoukoli další metodu a vlastnost na objekt Array, nemusí tuto novou vlastnost/metodu aplikovat jednu po druhé na každý prvek. Místo toho to lze efektivně provést pomocí pole JavaScript „ prototyp “konstruktor. Tento konstruktor pomáhá při aplikaci nových metod a vlastností na požadovaný objekt Array.
Tato příručka vysvětluje použití konstruktoru Array „prototype“ v JavaScriptu.
Jak používat konstruktor „prototypu“ pole v JavaScriptu?
Pole ' prototyp ” konstruktor se používá k přidání nových metod a vlastností do objektu Array pomocí funkce JavaScript. Použije vytvořenou vlastnost pro všechny hodnoty pole jako její název a hodnotu ve výchozím nastavení.
Syntax
Array.prototype.name = hodnota
Ve výše uvedené syntaxi „ název ” specifikuje nově přidanou vlastnost pomocí svého “ hodnota “, které platí pro celý objekt Array.
Využijme výše definovanou vlastnost prakticky pomocí její syntaxe.
HTML kód
Nejprve se podívejte na uvedený HTML kód:
< p > The 'prototyp' konstruktor pomáhá v přidání nových metod / vlastnosti k danému poli ( ) objekt. p >< knoflík při kliknutí = 'jsFunc()' > Získejte délku každého řetězce knoflík >
< p id = 'vzorek' > p >
< p id = 'pro' > p >
Ve výše uvedených řádcích kódu:
- ' ” tag určuje příkaz odstavce.
- '
Značka ” vloží tlačítko s událostí „onclick“, která po kliknutí na tlačítko vyvolá zadanou funkci „jsFunc()“. - Poslední dva' Tagy ” přidávají prázdné odstavce s přiřazenými ID „sample“ a „para“.
Poznámka: Tento kód HTML je dodržován ve všech příkladech uvedených v této příručce.
Příklad 1: Použití konstruktoru „prototypu“ pro počítání délky objektu pole přidáním nové metody
Tento příklad využívá konstruktor „prototypu“ k počítání délky každého řetězce uvnitř objektu Array pomocí nově přidané metody.
JavaScript kód
Postupujte podle zadaného kódu JavaScript:
< skript >Array.prototype.stringLength = funkce ( ) {
pro ( kde t = 0 ; t < tato.délka; t++ ) {
tento [ t ] = toto [ t ] .délka;
}
} ;
funkce jsFunc ( ) {
var str = [ 'HTML' , 'CSS' , 'JavaScript' ] ;
document.getElementById ( 'vzorek' ) .innerHTML = str;
str.stringLength ( ) ;
document.getElementById ( 'pro' ) .innerHTML = str;
}
skript >
Ve výše uvedených řádcích kódu:
- Použijte základní syntaxi pole ' prototyp 'konstruktor, který přidává novou metodu' délka řetězce ” definující funkci.
- Dále v definici funkce „ pro Cyklus ” se iteruje přes všechny indexy objektu Array, aby se zjistila jejich délka pomocí vlastnosti „length“.
- Poté se „ jsFunc() ” definuje objekt Array uložený v proměnné “str”.
- Poté, „ document.getElementById () Metoda ” přistupuje k prvnímu prázdnému odstavci prostřednictvím svého id „sample“, aby zobrazila objekt Array „str“.
- Nakonec přidružte objekt Array „str“ k objektu „ stringLength() ” metoda, která spočítá délku řetězce každého indexu pole a poté jej přidá do dalšího prázdného odstavce, jehož id je „para“.
Výstup
Zde výstup ukazuje délku každého řetězce cílového objektu Array pomocí nově přidané metody “stringLength()” prostřednictvím konstruktoru Array “prototype”.
Příklad 2: Použití konstruktoru „prototype“ k vytvoření nové metody „myUcase“ a její použití na objekt Array
Tento příklad využívá konstruktor „prototype“ k vytvoření nové metody „myUcase“ a aplikuje ji na cílový objekt Array.
JavaScript kód
Pojďme si projít níže uvedený kód JavaScript:
< skript >Array.prototype.myUcase = funkce ( ) {
pro ( nechat t = 0 ; t < tato.délka; t++ ) {
tento [ t ] = toto [ t ] .toUpperCase ( ) ;
}
} ;
funkce jsFunc ( ) {
const arrObj = [ 'html' , 'css' , 'JavaScript' , 'Reagovat' ] ;
arrObj.myUcase ( ) ;
document.getElementById ( 'vzorek' ) .innerHTML = arrObj;
}
skript >
Zde konstruktor „prototypu“ vytvoří novou metodu s názvem „ myUcase “, který používá „ Velká písmena ” v definici funkce pro převod každého řetězce objektu Array na „velká písmena“. V posledně uvedené funkci je vlastní metoda rovněž vyvolána na poli.
Výstup
Jak je vidět, každý řetězec objektu Array se po kliknutí na tlačítko použije jako velká písmena díky použité metodě „myUcase()“.
Závěr
Chcete-li použít pole ' prototyp ” konstruktoru v JavaScriptu, přidružte k němu novou metodu/vlastnost. Specifikuje funkci, která definuje funkce pro jinou funkci vlastním způsobem podle požadavků. Tato příručka stručně vysvětluje použití konstruktoru Array „prototype“ v JavaScriptu.