Enkel JavaScript arv Hva du trenger å vite

Mange av vennene mine er C # eller C ++ utviklere. De er vant til å bruke arv i sine prosjekter, og når de vil lære eller oppdage JavaScript, er et av de første spørsmålene de spør: "Men hvordan kan jeg gjøre arv med JavaScript?"

Faktisk bruker JavaScript en annen tilnærming enn C # eller C ++ for å lage et objektorientert språk. Det er en prototype-basert Språk. Konseptet med prototyping innebærer at atferd kan gjenbrukes ved kloning eksisterende objekter som fungerer som prototyper. Hvert objekt i JavaScript avhenger av en prototype som definerer et sett med funksjoner og medlemmer som objektet kan bruke. Det er ingen klasse-bare objekter. Hvert objekt kan da brukes som prototype for et annet objekt.

Dette konseptet er ekstremt fleksibelt, og vi kan bruke det til å simulere noen begreper fra OOP, som arv.

Gjennomføring av arv

La oss se på hva vi vil lage med dette hierarkiet ved hjelp av JavaScript:

Først av alt, kan vi lage Classa Enkelt. Fordi det ikke er noen eksplisitte klasser, kan vi definere et sett med oppførsel (En klasse så ...) ved å bare opprette en funksjon som denne:

var ClassA = funksjon () this.name = "klasse A"; 

Denne "klassen" kan bli instantiated ved hjelp av ny søkeord:

var a = ny klasse a (); ClassA.prototype.print = function () console.log (this.name); 

Og å bruke den ved hjelp av vårt objekt:

a.print ();

Ganske enkelt, rett?

Den komplette prøven er bare åtte linjer lang:

var ClassA = funksjon () this.name = "klasse A";  ClassA.prototype.print = function () console.log (this.name);  var a = ny klasseA (); a.print ();

La oss nå legge til et verktøy for å lage "arv" mellom klassene. Dette verktøyet må bare gjøre en ting: klon prototypen.

var arvFrom = funksjon (barn, foreldre) child.prototype = Object.create (parent.prototype); ;

Dette er akkurat der magien skjer! Ved å klone prototypen overfører vi alle medlemmer og funksjoner til den nye klassen.

Så hvis vi ønsker å legge til en andre klasse som blir barn av den første, må vi bare bruke denne koden:

var ClassB = funksjon () this.name = "klasse B"; this.surname = "Jeg er barnet";  arveFrom (klasse B, klasseA);

Så fordi ClassB arvet skrive ut funksjon fra Classa, følgende kode virker:

var b = ny klasse b (); b.print ();

Og produserer følgende utgang:

klasse B

Vi kan til og med tilsidesette skrive ut funksjon for ClassB:

ClassB.prototype.print = function () ClassA.prototype.print.call (dette); console.log (this.surname); 

I dette tilfellet vil den produserte produksjonen se slik ut:

klasse B Jeg er barnet

Trikset her er å ringe ClassA.prototype å få basen skrive ut funksjon. Så takk til anrop funksjon vi kan ringe basefunksjonen på det nåværende objektet (dette).

Opprette ClassC er nå åpenbart:

var ClassC = funksjon () this.name = "klasse C"; this.surname = "Jeg er barnebarnet";  arverFrom (Klasse C, Klasse B); ClassC.prototype.foo = function () // Gjør noen funky ting her ... ClassC.prototype.print = function () ClassB.prototype.print.call (this); console.log ("Høres ut som dette fungerer!");  var c = ny ClassC (); c.print ();

Og utgangen er:

klasse C Jeg er barnebarnet Høres ut som dette fungerer!

Flere hands-on med JavaScript

Det kan kanskje overraske deg litt, men Microsoft har en mengde gratis læring på mange open source JavaScript-emner, og vi har et oppdrag å skape mye mer med Microsoft Edge. Sjekk ut min egen:

• Introduksjon til WebGL 3D med HTML5 og Babylon.JS
• Bygg en enkeltside applikasjon med ASP.NET og AngularJS
• Skjærekantgrafikk i HTML

Eller vårt lags læringsserie:

• Praktiske ytelsestips for å gjøre HTML / JavaScript raskere (en syvdelte serie fra lydhør design til uformelle spill til ytelsesoptimalisering)
• Den moderne webplattformen Jump Start (grunnleggende for HTML, CSS og JS)
• Utvikle Universal Windows App med HTML og JavaScript Jump Start (bruk JS du allerede har opprettet for å bygge en app)

Og noen gratis verktøy: Visual Studio Community, Azure Trial, og tverrbrowser testing verktøy for Mac, Linux eller Windows.

Og noen filosofi ...

For å konkludere, vil jeg bare klart si at JavaScript ikke er C # eller C ++. Den har sin egen filosofi. Hvis du er en C ++ eller C # -utvikler, og du virkelig ønsker å omfavne full kraft av JavaScript, er det beste tipset jeg kan gi deg: Ikke prøv å replikere språket ditt til JavaScript. Det er ingen beste eller verste språk. Bare forskjellige filosofier!

Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.

Lær JavaScript: Den komplette veiledningen

Vi har bygget en komplett guide for å hjelpe deg med å lære JavaScript, enten du er bare i gang som webutvikler eller du vil utforske mer avanserte emner.