JavaScript Er ikke et klassebasert objektorientert språk. Men det har fortsatt måter å bruke objektorientert programmering (OOP).
i denne opplæringen vil jeg forklare OOP og vise deg hvordan du bruker den.
ifølge Wikipedia er klassebasert programmering
en Stil Med Objektorientert programmering (OOP) der arv skjer via definerende klasser av objekter, i stedet for arv skjer via objektene alene
den mest populære modellen AV OOP er klassebasert.Men Som jeg nevnte, Er JavaScript ikke en klassebasert langauge-Det er en prototypebasert langauge.
Ifølge Mozillas documentaion:
et prototypebasert språk har ideen om et prototypisk objekt, et objekt som brukes som en mal for å få de første egenskapene til et nytt objekt.
Ta en titt på denne koden:
let names = { fname: "Dillion", lname: "Megida"}console.log(names.fname);console.log(names.hasOwnProperty("mname"));// Expected Output// Dillion// falseobjektvariabelen names har bare to egenskaper – fname og lname . Ingen metoder i det hele tatt.
Så hvor kommerhasOwnProperty kommer fra?
vel, det kommer fra Object prototypen.
prøv å logge innholdet i variabelen til konsollen:
console.log(names);når du utvider resultatene i konsollen, får du dette:
Legg merke til den siste egenskapen – __proto__? Prøv å utvide den:
du vil se et sett med egenskaper under Object konstruktør. Alle disse egenskapene kommer fra den globale Object prototypen. Hvis du ser nøye ut, vil du også legge merke til vår skjulte hasOwnProperty.
med andre ord har alle objekter tilgang tilObject‘s prototype. De har ikke disse egenskapene, men får tilgang til egenskapene i prototypen.
__proto__ egenskapen
dette peker på objektet som brukes som prototype.
dette er egenskapen på hvert objekt som gir den tilgang tilObject prototype egenskapen.
Hvert objekt har denne egenskapen som standard, som refererer til Object Protoype unntatt når konfigurert ellers (det vil si når objektets __proto__ er pekt på en annen prototype).
Endre__ proto _ _ eiendom
denne egenskapen kan endres ved eksplisitt å si at den skal referere til en annen prototype. Følgende metoder brukes til å oppnå dette:
Objekt.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);i konsollen er dette hva du vil ha:
Legg Merke til__proto__ egenskapen ogspeak metoden?
Object.create bruker argumentet som sendes til det for å bli prototypen.
nytt nøkkelord
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__egenskapen er rettet tilDogObject‘s prototype. Men husk,DogObject‘s prototype er et objekt (nøkkel-og verdipar), derfor har det også en__proto__egenskap som refererer til den globaleObjectprotoype.
denne teknikken er REFERERT TIL SOM PROTOTYPE KJEDING.
Merk at:new søkeord tilnærming gjør det samme som Object.create() men bare gjør det enklere som det gjør noen ting automatisk for deg.
Og så…
hvert objekt i Javascript har tilgang tilObject‘s prototype som standard. Hvis konfigurert til å bruke en annen prototype, si prototype2, vil prototype2 også ha tilgang til Objektets prototype som standard, og så videre.
Objekt + Funksjonskombinasjon
du er sannsynligvis forvirret av atDogObject er en funksjon (function DogObject(){}) og den har egenskaper som er tilgjengelig med en punktnotasjon. Dette er referert til som en funksjon objekt kombinasjon.
når funksjoner er erklært, blir de som standard gitt mange egenskaper knyttet til den. Husk at funksjoner også er objekter i JavaScript-datatyper.
Nå, Klasse
JavaScript introduserteclass søkeord I ECMAScript 2015. Det gjør JavaScript virke SOM EN OOP språk. Men det er bare syntatisk sukker over eksisterende prototypingsteknikk. Det fortsetter sin prototyping i bakgrunnen, men gjør den ytre kroppen ser UT SOM OOP. Vi skal nå se på hvordan det er mulig.
følgende eksempel er en generell bruk av 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__ refererer til Animals prototypen(som igjen refererer tilObject prototypen).
Fra dette kan vi se at konstruktøren definerer hovedfunksjonene mens alt utenfor konstruktøren (sing() og dance()) er bonusfunksjonene (prototyper).
i bakgrunnen, ved hjelp av new søkeord tilnærming, oversetter ovenfor 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");Subclassing
dette er en funksjon I OOP hvor en klasse arver funksjoner fra en overordnet klasse, men har ekstra funksjoner som foreldrene ikke.
ideen her er for eksempel, si at du vil lage En Katteklasse. I stedet for å opprette klassen fra grunnen av-angir navn, alder og artseiendom på nytt, vil du arve disse egenskapene fra foreldre dyr klassen.
denne cats-klassen kan da ha ekstra egenskaper som farge på whiskers.
La oss se hvordan underklasser er gjort med class.
Her trenger vi en forelder som underklassen arver fra. Undersøk 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 utganger:
console.log(clara.sing());console.log(clara.whiskers());// Expected Output// "Clara can sing"// "I have indigo whiskers"når du logger innholdet i clara ut i konsollen, har vi:
du vil legge merke til at clara har en __proto__ egenskap som refererer til konstruktøren Cats og får tilgang til whiskers() metode. Denne __proto__ egenskapen har også en __proto__ egenskap som refererer til konstruktøren Animals får dermed tilgang til sing() og dance()name og age er egenskaper som finnes på hvert objekt opprettet fra dette.
Ved hjelp avObject.create metodetilnærming, oversetter ovennevnte 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 som tar inn to argumenter – objektet (første argument) og ønsket prototype (andre argument).
fra ovenstående returnererAnimals – funksjonen et objekt med animalConstructor som prototype. Cats – funksjonen returnerer et objekt med catConstructor som det er prototype. catConstructor på den annen side er det gitt en prototype av animalConstructor.
derfor har vanlige dyr bare tilgang til animalConstructor men katter har tilgang til catConstructor og animalConstructor.
Innpakning
JavaScript utnytter sin prototype natur å ønske oop utviklere til sitt økosystem. Det gir også enkle måter å lage prototyper og organisere relaterte data.
True Oop-språk utfører ikke prototyping i bakgrunnen – bare vær oppmerksom på det.En stor takk Til Will Sentance kurs På Frontend Masters-JavaScript: De Harde Delene Av Objektorientert JavaScript. Jeg lærte alt du ser i denne artikkelen (pluss litt ekstra forskning) fra kurset hans. Du bør sjekke det ut.
Du kan slå Meg Opp På Twitter På iamdillion for eventuelle spørsmål eller bidrag.
Takk for at du leser:)