Objektorienteret programmering i JavaScript-forklaret med eksempler

JavaScript er ikke et klassebaseret objektorienteret sprog. Men det har stadig måder at bruge objektorienteret programmering (OOP) på.

i denne vejledning forklarer jeg OOP og viser dig, hvordan du bruger den.klassebaseret programmering er

en stil med objektorienteret programmering (OOP), hvor arv sker via definerende klasser af objekter, i stedet for arv, der forekommer via objekterne alene

den mest populære model af OOP er klassebaseret.

men som jeg nævnte, JavaScript er ikke en klassificeret-baseret langauge – det er en prototype-baseret langauge.

i henhold til Mosillas documentaion:

et prototypebaseret sprog har forestillingen om et prototypisk objekt, et objekt, der bruges som en skabelon, hvorfra man kan få de oprindelige egenskaber for et nyt objekt.

tag et kig på denne kode:

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

objektvariablen names har kun to egenskaber – fname og lname . Ingen metoder overhovedet.

så hvor kommer hasOwnProperty fra?

Nå, det kommer fraObject prototype.

prøv at logge indholdet af variablen til konsollen:

console.log(names);

Når du udvider resultaterne i konsollen, får du dette:

Bemærk den sidste ejendom – __proto__? Prøv at udvide det:

du vil se et sæt egenskaber under Object konstruktør. Alle disse egenskaber kommer fra den globaleObject prototype. Hvis du ser nøje, vil du også bemærke vores skjulte hasOwnProperty .

med andre ord har alle objekter adgang til Object ‘s prototype. De besidder ikke disse egenskaber, men får adgang til egenskaberne i prototypen.

__proto__ egenskaben

Dette peger på objektet, der bruges som prototype.

Dette er egenskaben på hvert objekt, der giver den adgang tilObject prototype egenskaben.

hvert objekt har denne egenskab som standard, som henviser tilObject Protoype undtagen når konfigureret ellers (det vil sige, når objektets__proto__ peger på en anden prototype).

ændring af __proto__ – egenskaben

denne egenskab kan ændres ved eksplicit at angive, at den skal henvise til en anden prototype. Følgende metoder anvendes til at opnå dette:

objekt.Opret ()

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);

i konsollen er dette hvad du ville have:

Bemærk __proto__ ejendom og speak metode?

Object.create bruger argumentet sendt til det for at blive prototypen.

nyt nøgleord

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__ejendom er rettet til DogObject ‘s prototype. Men husk,DogObject‘s prototype er et objekt (nøgle-og værdipar), derfor har den også en__proto__ egenskab, der henviser til den globaleObject protoype.

denne teknik kaldes PROTOTYPE kæde.

Bemærk, at:new søgeordstilgang gør det samme somObject.create() men gør det kun lettere, da det gør nogle ting automatisk for dig.

og så…

hvert objekt i Javascript har adgang tilObject ‘s prototype som standard. Hvis du er konfigureret til at bruge en anden prototype, skal du sige prototype2, så ville prototype2 også have adgang til objektets prototype som standard og så videre.

objekt + Funktionskombination

Du er sandsynligvis forvirret af det faktum, atDogObject er en funktion (function DogObject(){}), og den har egenskaber, der er adgang til med en prik notation. Dette kaldes en funktion objekt kombination.

Når funktioner erklæres, får de som standard mange egenskaber, der er knyttet til den. Husk, at funktioner også er objekter i JavaScript-datatyper.

nu, klasse

JavaScript introduceredeclass søgeord i ECMAScript 2015. Det får JavaScript til at virke som et OOP-sprog. Men det er bare syntatisk sukker over den eksisterende prototypeteknik. Det fortsætter sin prototyping i baggrunden, men får den ydre krop til at ligne OOP. Vi vil nu se på, hvordan det er muligt.

følgende eksempel er en generel brug af en class i 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);

Dette er resultatet i konsollen:

__proto__ referencer Animals prototype (som igen refererer til Object prototype).

herfra kan vi se, at konstruktøren definerer de vigtigste funktioner, mens alt uden for konstruktøren (sing() og dance()) er bonusfunktionerne (prototyper).

i baggrunden, ved hjælp af new søgeordstilgang, oversættes ovenstående til:

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");

underklasse

dette er en funktion i OOP, hvor en klasse arver funktioner fra en overordnet klasse, men har ekstra funktioner, som forælderen ikke gør.

ideen her er for eksempel, sig, at du vil oprette en katteklasse. I stedet for at oprette klassen fra bunden – med angivelse af navn, alder og art ejendom på ny, ville du arve disse egenskaber fra forældredyrsklassen.

denne katteklasse kan derefter have ekstra egenskaber som farven på knurhår.

lad os se, hvordan underklasser udføres medclass.

Her har vi brug for en forælder, som underklassen arver fra. Undersøg følgende kode:

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");

med ovenstående får vi følgende udgange:

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

Når du logger indholdet af clara ud i konsollen, har vi:

du vil bemærke, at clara har en __proto__ egenskab, der refererer til konstruktøren Cats og får adgang til whiskers() metode. Denne__proto__ ejendom har også en__proto__ ejendom, der refererer konstruktørenAnimals derved får adgang tilsing() ogdance()name og age Er egenskaber, der findes på hvert objekt oprettet ud fra dette.

brug afObject.create metode tilgang, ovenstående oversætter til:

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 er en metode, der tager i to argumenter – objektet (første argument) og den ønskede prototype (andet argument).

fra ovenstående returnerer funktionenAnimals et objekt medanimalConstructor som prototype. FunktionenCats returnerer et objekt medcatConstructor som det er prototype. catConstructorpå den anden side gives en prototype af animalConstructor.

derfor har almindelige dyr kun adgang til animalConstructor men katte har adgang til catConstructor og animalConstructor.

indpakning af

JavaScript udnytter sin prototype natur til at byde OOP-udviklere velkommen til sit økosystem. Det giver også nemme måder at skabe prototyper og organisere relaterede data.

ægte OOP-sprog udfører ikke prototyping i baggrunden – bare vær opmærksom på det.

en stor tak til Vil Sentance kursus på Frontend Masters – JavaScript: de hårde dele af objektorienteret JavaScript. Jeg lærte alt, hvad du ser i denne artikel (plus lidt ekstra forskning) fra hans kursus. Du bør tjekke det ud.

Du kan slå mig op på kvidre på iamdillion for spørgsmål eller bidrag.

tak for læsning:)