Objectgeoriënteerd programmeren in JavaScript-uitgelegd met voorbeelden

JavaScript is geen klasse-gebaseerde objectgeoriënteerde taal. Maar het heeft nog steeds manieren om object oriented programming (OOP) te gebruiken.

in deze tutorial zal ik OOP uitleggen en je laten zien hoe het te gebruiken.

volgens Wikipedia is class-based programming

een stijl van Object-georiënteerd programmeren (OOP) waarin overerving plaatsvindt via het definiëren van klassen van objecten, in plaats van overerving plaatsvindt via de objecten alleen

het meest populaire model van OOP is class-based.

maar zoals ik al zei, JavaScript is geen klassed – based langauge – het is een prototype-based langauge.

volgens Mozilla ‘ s documentaion:

een op prototype gebaseerde taal heeft de notie van een prototypisch object, een object dat als sjabloon wordt gebruikt om de initiële eigenschappen voor een nieuw object te verkrijgen.

kijk eens naar deze code:

let names = { fname: "Dillion", lname: "Megida"}console.log(names.fname);console.log(names.hasOwnProperty("mname"));// Expected Output// Dillion// false

de objectvariabele names heeft slechts twee eigenschappen – fname en lname . Helemaal geen methoden.

dus waar komt hasOwnProperty vandaan?

Het komt van het prototype Object.

probeer de inhoud van de variabele op de console te loggen:

console.log(names);

wanneer u de resultaten in de console uitvouwt, krijgt u dit:

merk de laatste eigenschap op – __proto__? Probeer het uit te breiden:

u zult een reeks eigenschappen zien onder de Object constructeur. Al deze eigenschappen komen van het globale Object prototype. Als je goed kijkt, zie je ook onze verborgen hasOwnProperty .

met andere woorden, alle objecten hebben toegang tot het prototype van Object. Zij bezitten deze eigenschappen niet, maar krijgen toegang tot de eigenschappen in het prototype.

de eigenschap __proto__

Dit wijst naar het object dat als prototype wordt gebruikt.

Dit is de eigenschap op elk object dat het toegang geeft tot de eigenschap Object prototype.

elk object heeft standaard deze eigenschap, die verwijst naar de Object Protoype tenzij anders geconfigureerd (dat wil zeggen wanneer de __proto__ naar een ander prototype wordt verwezen).

de __proto__ eigenschap wijzigen

Deze eigenschap kan worden gewijzigd door expliciet te vermelden dat het naar een ander prototype moet verwijzen. De volgende methoden worden gebruikt om dit te bereiken:

Object.create ()

function DogObject(name, age) { let dog = Object.create(constructorObject); dog.name = name; dog.age = age; return dog;}let constructorObject = { speak: function(){ return "I am a dog" }}let bingo = DogObject("Bingo", 54);console.log(bingo);

In de console, dit is wat je zou hebben:

let op de __proto__ eigenschap en despeak methode?

Object.create gebruikt het argument om het prototype te worden.

nieuw trefwoord

function DogObject(name, age) { this.name = name; this.age = age;}DogObject.prototype.speak = function() { return "I am a dog";}let john = new DogObject("John", 45);

john’s __proto__ de eigenschap is gericht op DogObject’s prototype. Maar onthoud, DogObject ‘ s prototype is een object (sleutel en waarde paar), dus het heeft ook een __proto__ eigenschap die verwijst naar de Globale Object protoype.

deze techniek wordt PROTOTYPE CHAINING genoemd.

merk op dat: de new sleutelwoordbenadering doet hetzelfde als Object.create() maar maakt het alleen makkelijker omdat het sommige dingen automatisch voor u doet.

en zo…

elk object in Javascript heeft standaard toegang tot het prototype van Object. Indien ingesteld om een ander prototype te gebruiken, zeg dan prototype2, dan zou prototype2 ook standaard toegang hebben tot het prototype van het Object, enzovoort.

Object + Functiecombinatie

u bent waarschijnlijk in de war door het feit dat DogObject een functie is (function DogObject(){}) en het eigenschappen heeft benaderd met een puntnotatie. Dit wordt aangeduid als een functie-objectcombinatie.

wanneer functies worden gedeclareerd, krijgen ze standaard veel eigenschappen die eraan zijn gekoppeld. Vergeet niet dat functies ook objecten zijn in JavaScript-gegevenstypen.

nu introduceerde Klasse

JavaScript hetclass sleutelwoord in ECMAScript 2015. Het maakt JavaScript lijkt een OOP taal. Maar het is gewoon syntatische suiker over de bestaande prototyping techniek. Hij zet zijn prototypering op de achtergrond voort, maar laat het buitenlichaam eruit zien als OOP. We zullen nu kijken hoe dat mogelijk is.

het volgende voorbeeld is een algemeen gebruik van een class In JavaScript:

class Animals { constructor(name, specie) { this.name = name; this.specie = specie; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }}let bingo = new Animals("Bingo", "Hairy");console.log(bingo);

Dit is het resultaat in de console:

The __proto__ references the Animals prototype (dat op zijn beurt verwijst naar de Object prototype).

hieruit kunnen we zien dat de constructor de belangrijkste functies definieert, terwijl alles buiten de constructor (sing() en dance()) de bonus functies (prototypes) zijn.

op de achtergrond, met behulp van de new sleutelwoord benadering, het bovenstaande vertaalt zich naar:

function Animals(name, specie) { this.name = name; this.specie = specie;}Animals.prototype.sing = function(){ return `${this.name} can sing`;}Animals.prototype.dance = function() { return `${this.name} can dance`;}let Bingo = new Animals("Bingo", "Hairy");

Subclassing

Dit is een eigenschap in OOP waar een klasse kenmerken erft van een ouderklasse, maar extra functies bezit die de ouder niet heeft.

het idee hier is, bijvoorbeeld, je wilt een kattenklas creëren. In plaats van het creëren van de klasse vanaf nul – met vermelding van de naam, leeftijd en soort eigendom opnieuw, je zou erven die eigenschappen van de ouderdieren klasse.

deze kattenklasse kan dan extra eigenschappen hebben zoals kleur van snorharen.

laten we eens kijken hoe subklassen worden gedaan met class.

Hier hebben we een ouder nodig waarvan de subklasse erft. Onderzoek de volgende code:

class Animals { constructor(name, age) { this.name = name; this.age = age; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }} class Cats extends Animals { constructor(name, age, whiskerColor) { super(name, age); this.whiskerColor = whiskerColor; } whiskers() { return `I have ${this.whiskerColor} whiskers`; }}let clara = new Cats("Clara", 33, "indigo");

met het bovenstaande krijgen we de volgende uitgangen:

console.log(clara.sing());console.log(clara.whiskers());// Expected Output// "Clara can sing"// "I have indigo whiskers"

wanneer u de inhoud van clara inlogt in de console, hebben we:

u zult merken dat clara een __proto__ eigenschap heeft die verwijst naar de constructor Cats en toegang krijgt tot de . Deze eigenschap __proto__ heeft ook een eigenschap __proto__ die verwijst naar de constructor Animals waardoor toegang wordt verkregen tot sing() en dance()name en age zijn eigenschappen die bestaan op elk object dat hiermee wordt gemaakt.

gebruikmakend van de Object.create methodebenadering, vertaalt het bovenstaande zich naar:

function Animals(name, age) { let newAnimal = Object.create(animalConstructor); newAnimal.name = name; newAnimal.age = age; return newAnimal;}let animalConstructor = { sing: function() { return `${this.name} can sing`; }, dance: function() { return `${this.name} can dance`; }}function Cats(name, age, whiskerColor) { let newCat = Animals(name, age); Object.setPrototypeOf(newCat, catConstructor); newCat.whiskerColor = whiskerColor; return newCat;}let catConstructor = { whiskers() { return `I have ${this.whiskerColor} whiskers`; }}Object.setPrototypeOf(catConstructor, animalConstructor);const clara = Cats("Clara", 33, "purple");clara.sing();clara.whiskers();// Expected Output// "Clara can sing"// "I have purple whiskers"

Object.setPrototypeOf is een methode die twee argumenten bevat – het object (eerste argument) en het gewenste prototype (tweede argument).

uit het bovenstaande geeft de functie Animals Een object terug met de functie animalConstructor als prototype. De functie Cats geeft een object met catConstructor als prototype terug. aan de andere kant krijgt catConstructor een prototype van animalConstructor.

daarom hebben gewone dieren alleen toegang tot de animalConstructor, maar katten hebben toegang tot de catConstructor en de animalConstructor.

Wrapping Up

JavaScript maakt gebruik van zijn prototype karakter om OOP ontwikkelaars welkom in zijn ecosysteem. Het biedt ook eenvoudige manieren om prototypes te maken en gerelateerde gegevens te organiseren.

True OOP languages voeren geen prototyping uit op de achtergrond-let daar maar op.

een grote dank aan Will Sentance ‘ s cursus over Frontend Masters-JavaScript: de harde delen van Object Oriented JavaScript. Ik leerde alles wat je ziet in dit artikel (plus een beetje extra onderzoek) van zijn cursus. Je moet eens kijken.

je kunt me bellen op Twitter op iamdillion voor vragen of bijdragen.

Bedankt voor het lezen:)