Een Array-object vertegenwoordigt een verzameling elementen. Het helpt bij het onderhouden van een grote set gegevens om de verwarring van meerdere variabelen te voorkomen, waardoor ze worden gesorteerd. Als de gebruiker een aanvullende methode en eigenschap op het Array-object wil toepassen, hoeft hij die nieuwe eigenschap/methode niet één voor één op elk element toe te passen. In plaats daarvan kan het effectief worden gedaan door de JavaScript-array te gebruiken ' prototype ” constructeur. Deze constructor helpt bij het toepassen van de nieuwe methoden en eigenschappen op het gewenste Array-object.
In deze handleiding wordt het gebruik van de Array 'prototype' -constructor in JavaScript uitgelegd.
Hoe de Array 'prototype' Constructor in JavaScript te gebruiken?
de reeks ' prototype ” constructor wordt gebruikt om nieuwe methoden en eigenschappen toe te voegen aan een Array-object met behulp van de JavaScript-functie. Het past de geconstrueerde eigenschap toe op alle matrixwaarden, standaard als naam en waarde.
Syntaxis
Array.prototype.name = waarde
In de bovenstaande syntaxis, ' naam ” specificeert de nieuw toegevoegde eigenschap met zijn “ waarde ” dat geldt voor het hele Array-object.
Laten we de hierboven gedefinieerde eigenschap praktisch gebruiken met behulp van de syntaxis.
HTML code
Bekijk eerst de vermelde HTML-code:
< P > De 'prototype' constructeur helpt in de toevoeging van de nieuwe methoden / eigenschappen toe aan de gegeven matrix ( ) voorwerp. P >< knop bij klikken = 'jsFunc()' > Krijg elke snaarlengte knop >
< P ID kaart = 'steekproef' > P >
< P ID kaart = 'voor' > P >
In de bovenstaande coderegels:
- De ' ” tag specificeert de alinea-instructie.
- De '
”-tag sluit een knop in met een “onclick”-gebeurtenis om de gespecificeerde functie “jsFunc()” aan te roepen bij het klikken op een knop. - De laatste twee ' ”-tags voegen lege alinea's toe met hun toegewezen id's respectievelijk 'sample' en 'para'.
Opmerking: Deze HTML-code wordt gevolgd in alle gegeven voorbeelden in deze handleiding.
Voorbeeld 1: De constructor 'prototype' toepassen om de lengte van het arrayobject te tellen door een nieuwe methode toe te voegen
Dit voorbeeld gebruikt de constructor 'prototype' om de lengte van elke tekenreeks in een Array-object te tellen met behulp van een nieuw toegevoegde methode.
JavaScript-code
Volg de gegeven JavaScript-code:
< script >Array.prototype.stringLength = functie ( ) {
voor ( waar t = 0 ; T < deze.lengte; t++ ) {
dit [ T ] = dit [ T ] .lengte;
}
} ;
functie jsFunc ( ) {
var str = [ 'HTML' , 'CSS' , 'JavaScript' ] ;
document.getElementById ( 'steekproef' ) .innerHTML = str;
str.stringLength ( ) ;
document.getElementById ( 'voor' ) .innerHTML = str;
}
script >
In de bovenstaande regels code:
- Pas de basissyntaxis van de array toe ' prototype ” constructor die een nieuwe methode toevoegt “ Snaarlengte ” het definiëren van een functie.
- Vervolgens, in de functiedefinitie, de ' voor De lus wordt herhaald over alle indices van een Array-object om hun lengte te vinden met behulp van de eigenschap 'length'.
- Daarna is de “ jsFunc() definieert een Array-object dat is opgeslagen in de variabele 'str'.
- Dan de ' document.getElementById () ”methode benadert de eerste lege alinea via zijn id “sample” om het Array-object “str” weer te geven.
- Associeer ten slotte het object 'str' Array met het object ' Snaarlengte() 'methode om de tekenreekslengte van elke array-index te tellen en deze vervolgens toe te voegen aan de volgende lege alinea waarvan de id 'para' is.
Uitgang
Hier toont de uitvoer de lengte van elke string van het Array-doelobject met behulp van de nieuw toegevoegde 'stringLength()'-methode via de Array 'prototype'-constructor.
Voorbeeld 2: De constructor 'prototype' toepassen om een nieuwe methode 'myUcase' te maken en deze toe te passen op een matrixobject
Dit voorbeeld gebruikt de 'prototype'-constructor om een nieuwe 'myUcase'-methode te maken en deze toe te passen op het doelobject Array.
JavaScript-code
Laten we de onderstaande JavaScript-code doornemen:
< script >Array.prototype.myUcase = functie ( ) {
voor ( laten t = 0 ; T < deze.lengte; t++ ) {
dit [ T ] = dit [ T ] .toHoofdletters ( ) ;
}
} ;
functie jsFunc ( ) {
const arrObj = [ 'html' , 'css' , 'JavaScript' , 'Reageer' ] ;
arrObj.myUcase ( ) ;
document.getElementById ( 'steekproef' ) .innerHTML = arrObj;
}
script >
Hier maakt de constructor 'prototype' een nieuwe methode met de naam ' mijnUcase ” dat gebruik maakt van de “ Hoofdletters '-methode in de functiedefinitie om elke tekenreeks van het object Array om te zetten in 'Hoofdletters'. In de laatste functie wordt de aangepaste methode eveneens aangeroepen op de array.
Uitgang
Zoals te zien is, profiteert elke string van een Array-object van een klik op een knop dankzij de toegepaste 'myUcase()'-methode.
Conclusie
De matrix gebruiken ' prototype ”-constructor in JavaScript, koppelt u de nieuwe methode/eigenschap eraan. Het specificeert een functie die de functionaliteiten voor een andere functie op een aangepaste manier definieert volgens de vereisten. In deze handleiding werd kort het gebruik van de Array 'prototype' -constructor in JavaScript uitgelegd.