Inleiding tot Constructor in JavaScript
De constructormethode in JavaScript is een speciale methode die wordt gebruikt om objecten binnen een klasse te maken en te initialiseren. Dit is wat een constructor in elke programmeertaal doet. Wat JavaScript-constructor anders maakt dan anderen, is de vrijheid in termen van syntaxis. Om het beter te begrijpen, opent u eenvoudig de browserontwikkeltools (Ctrl / Cmd + Shift + C) en gaat u naar het tabblad Console in het venster met ontwikkeltools.
Het ziet er zo uit in Chrome
Dit is de speeltuin voor de meeste JavaScript-gerelateerde concepten. We zouden deze speeltuin in dit artikel gebruiken.
Soorten constructeurs in JavaScript
Er zijn twee soorten constructors in JavaScript
1. Ingebouwde constructeurs
Dit zijn de direct beschikbare constructors die worden meegeleverd met de uitvoeringsomgeving. De gebruiker moet ze gewoon oproepen en altviool, het werk is gedaan. Voorbeelden van ingebouwde constructors zijn Array, Date en Object.
2. Door de gebruiker gedefinieerde constructeurs
Dit zijn de constructeurs die door de programmeur zijn gedeclareerd en gedefinieerd om in de hele applicatie te worden gebruikt. Een programmeur kan ook eigenschappen en methoden van hun eigen aangepaste typen definiëren. Ze worden ook wel aangepaste constructeurs genoemd. Volgens afspraak worden alle JavaScript-constructors in een zin omgezet. Dit is om de persoon die ze gebruikt te vertellen dat deze functie moet worden aangeroepen met het nieuwe trefwoord.
Hoe werken constructeurs in JavaScript?
Voordat we naar de syntaxis van JavaScript-constructors kijken, moeten we een zeer eenvoudig concept van JavaScript begrijpen -
- De klasse Object vat samen in de context van dit artikel, elk JavaScript-object wordt gemaakt door de objectconstructor. Als de opgegeven waarde tijdens het maken van het object null of ongedefinieerd is, maakt de objectconstructor een leeg object. Anders maakt het een object van het type dat is gedefinieerd tijdens het maken van het object.
- Wanneer een nieuw object van het klasse-type wordt gedeclareerd, retourneert het nieuwe trefwoord een verwijzing naar het nieuw gemaakte object. Dat object wordt geopend met behulp van dit trefwoord in de constructor om de eigenschappen van het object te initialiseren.
- Hoewel technisch JavaScript geen klassen heeft, maar constructors en prototypes heeft om vergelijkbare functionaliteit te bieden. In ECMAScript 2015 werd het concept van klassen geïntroduceerd in JavaScript. Dit was gewoon een syntactische aanvulling op bestaande prototype-overerving en voegde geen nieuwe functionaliteit toe aan de taal.
Syntaxis en voorbeelden van Constructor in Javascript
1) Constructormethode
Hieronder staat de constructormethode. Deze methode wordt gebruikt in het prototype van de klasse.
Syntaxis
constructor((arguments))( … )
Code
class Employee(
constructor(id, name)(
this.id = id;
this.name = name;
))
var emp1 = new Employee(123, "John");
console.log(emp1.name);
Output:
2) Object Constructor (ingebouwde constructeurs)
De objectconstructor wordt rechtstreeks aangeroepen wanneer een object van de klasse Object wordt gemaakt. Hiermee wordt een object van klasse Object gemaakt als null- of niet-gedefinieerde parameters als argumenten worden doorgegeven. Anders wordt een object van het type opgegeven parameters gemaakt.
Syntaxis
new Object(( value ))
Of
new Array(( value ))
Of
new Date(( value ))
Of
new String(( value ))
Of
new Number(( value ))
Of
new Boolean(( value ))
Of
new Function(( value ))
Of
new Error(( value ))
Of
new RegExp(( value ))
enzovoorts…
Code:
var name = new Object("John");
var age = new Object(28);
console.log("Name : "+name+" & Age : "+age);
Output:
3) Array- en datumconstructors
Op vergelijkbare wijze kunnen de constructeurs Array en Date ook worden gebruikt om objecten van respectieve typen te maken.
Code:
var alphabets = new Array('Apple', 'Ball', 'Cat');
console.log(alphabets);
Output:
Code:
var now = new Date();
console.log(now);
Output:
Code:
var err = new Error("A user-defined error has occurred.");
console.log(err);
Output:
4) Aangepaste constructeurs
We kunnen ook onze eigen constructeurs aangeven en definiëren voor gebruik in onze applicatie. Laten we eens kijken hoe dit kan worden bereikt.
Syntaxis
function FunctionName((arguments))( … )
Code
function Book(name, author, year) (
this.name = name;
this.author = author;
this.year = year;
)
function displayBook(book)(
console.log('\'' + book.name + '\' authored by ' + book.author + ' in the year ' + book.year + '.');
)
var book1 = new Book('Java - The Complete Reference', 'Herbert Schildt', 2006);
var book2 = new Book('Let Us C', 'Yashavant Kanetkar', 2002);
var book3 = new Book('Data Structures', 'Seymour Lipschutz', 2005);
displayBook(book1);
displayBook(book2);
displayBook(book3);
Output:
Het belang van het nieuwe trefwoord
Nu vraag je je misschien af wat als ik het nieuwe trefwoord niet gebruik? Kan ik het nieuwe trefwoord weglaten? Nou, mijn vriend, nee. Het gebruik van het nieuwe trefwoord is zeer essentieel.
- JavaScript-constructors zijn normale functies. Ze gaan vergezeld van een nieuw trefwoord om de JavaScript-engine te vertellen dat een nieuw object moet worden geconstrueerd met de gegeven eigenschappen. Zonder het nieuwe trefwoord zou u eenvoudig meer en meer globale objecten maken.
- Het nieuwe trefwoord retourneert een verwijzing naar het nieuw gemaakte object. We slaan deze referentie vervolgens op in een variabele. Zonder het nieuwe trefwoord wordt het object gemaakt, maar wordt geen verwijzing naar het object geretourneerd. Het object neemt een globale scope aan. De enige verwijzing naar dit object is via het vensterobject.
- Verward? Laten we het beter begrijpen met voorbeelden. Overweeg het bovenstaande voorbeeld opnieuw. We hebben het nieuwe trefwoord uit de objectverklaringen verwijderd. Het resultaat was een uitzondering op ongedefinieerde variabelen. Dit komt omdat zonder het nieuwe trefwoord de referentie van de nieuw gemaakte objecten niet is geretourneerd en dus niet is opgeslagen in onze variabelen book1, book2 en book3. Toen we probeerden toegang te krijgen tot deze variabelen in de weergaveboekmethode, wordt de uitzondering gegenereerd.
Code:
function Book(name, author, year) (
this.name = name;
this.author = author;
this.year = year;
)
function displayBook(book)(
console.log('\'' + book.name + '\' authored by ' + book.author + ' in the year ' + book.year + '.');
)
var book1 = Book('Java - The Complete Reference', 'Herbert Schildt', 2006);
var book2 = Book('Let Us C', 'Yashavant Kanetkar', 2002);
var book3 = Book('Data Structures', 'Seymour Lipschutz', 2005);
displayBook(book1);
displayBook(book2);
displayBook(book3);
Output:
In hetzelfde voorbeeld krijgen we een onverwachte uitvoer als we de weergaveboekmethode wijzigen om toegang te krijgen tot de objecten via het vensterbereik.
Code:
function Book(name, author, year) (
this.name = name;
this.author = author;
this.year = year;
)
function displayBook(book)(
console.log('\'' + window.name + '\' authored by ' + window.author +' in the year ' + window.year + '.');
)
var book1 = Book('Java - The Complete Reference', 'Herbert Schildt', 2006);
var book2 = Book('Let Us C', 'Yashavant Kanetkar', 2002);
var book3 = Book('Data Structures', 'Seymour Lipschutz', 2005);
displayBook(book1);
displayBook(book2);
displayBook(book3);
Output:
Nu, als oefening, een beetje brainstormen om erachter te komen waarom we deze output krijgen!
Scope-veilige constructeurs
De ingebouwde constructors in JavaScript zijn scoopveilige constructors. Ze maken geen globaal bereikbare variabelen wanneer ze zonder een nieuw trefwoord worden aangeroepen. Deze objecten kunnen dus veilig worden gemaakt met of zonder een nieuw trefwoord.
Code
function SampleFn(argument) (
// if "this" is not an instance of the constructor
// it means it was called without new
if (!(this instanceof SampleFn)) (
// call the constructor again with new
return new SampleFn(argument);
)
// The code to construct properties and methods
)
Ja, ook u kunt door de gebruiker gedefinieerde scope-safe constructors maken. Ga verder, maak een scope-veilige constructor voor onze boeken in het bovenstaande voorbeeld.
Conclusie
Dit artikel gaf een diepgaande demonstratie van de JavaScript-constructeurs. Dit helpt ook bij het begrijpen van de werking van JavaScript. Het belangrijkste om te onthouden is dat, hoewel technisch gezien er geen JavaScript-klassen zijn, de methoden en prototypes vergelijkbare functionaliteit bieden waarover de ontwikkelaar beschikt. En ja, het nieuwe trefwoord is belangrijk.
Aanbevolen artikelen
Dit is een gids voor Constructor in JavaScript. Hier bespreken we de soorten en belangrijke methoden met Hoe maak je een scope-veilige constructor. Je kunt ook door onze gegeven artikelen gaan voor meer informatie-
- Wat kan Javascript doen?
- Wat is JavaScript?
- Hoe JavaScript te installeren
- Destructor in Java
- Regex-functies in Python (voorbeeld)
- Voorbeelden van dit trefwoord
- Werken & regels van instanceOf in Java met voorbeeld