Share
Många av mina vänner är C # eller C ++-utvecklare. De är vana vid att använda arv i sina projekt, och när de vill lära sig eller upptäcka JavaScript är en av de första frågorna de frågar: "Men hur kan jag göra arv med JavaScript?"
I själva verket använder JavaScript ett annat sätt än C # eller C ++ för att skapa ett objektorienterat språk. Det är en prototyp-baserade språk. Konceptet prototypning innebär att beteendet kan återanvändas genom kloning existerande objekt som fungerar som prototyper. Varje objekt i JavaScript beror på en prototyp som definierar en uppsättning funktioner och medlemmar som objektet kan använda. Det finns inga klass-bara föremål. Varje objekt kan sedan användas som prototyp för ett annat objekt.
Detta koncept är extremt flexibelt och vi kan använda det för att simulera vissa begrepp från OOP, som arv.
Låt oss titta på vad vi vill skapa med denna hierarki med JavaScript:
Först och främst kan vi skapa KlassA lätt. Eftersom det inte finns några explicita klasser kan vi definiera en uppsättning beteende (En klass så ...) genom att bara skapa en funktion så här:
var ClassA = funktion () this.name = "class A";
Denna "klass" kan ordnas med hjälp av ny nyckelord:
var a = ny klass A (); ClassA.prototype.print = function () console.log (this.name);
Och att använda den med vårt objekt:
Heta a ();
Ganska enkelt, rätt?
Det kompletta provet är bara åtta linjer långt:
var ClassA = funktion () this.name = "class A"; ClassA.prototype.print = function () console.log (this.name); var a = ny klass A (); Heta a ();
Låt oss nu lägga till ett verktyg för att skapa "arv" mellan klasserna. Det här verktyget behöver bara göra en enda sak: klon prototypen.
varar arvFrom = funktion (barn, förälder) child.prototype = Object.create (parent.prototype); ;
Det här är precis där magiken händer! Genom att klona prototypen överför vi alla medlemmar och funktioner till den nya klassen.
Så om vi vill lägga till en andra klass som kommer att vara barn av den första måste vi bara använda den här koden:
var ClassB = funktion () this.name = "class B"; this.surname = "Jag är barnet"; ärverFrån (Klass B, Klass A);
Då för att ClassB ärvde skriva ut funktion från KlassA, följande kod fungerar:
var b = ny klass B (); b.print ();
Och producerar följande utmatning:
klass B
Vi kan till och med åsidosätta skriva ut funktion för ClassB:
ClassB.prototype.print = function () ClassA.prototype.print.call (this); console.log (this.surname);
I detta fall kommer den producerade produktionen att se ut så här:
klass B Jag är barnet
Tricket här är att ringa ClassA.prototype för att få basen skriva ut fungera. Då tack vare ring upp funktion vi kan ringa basfunktionen på det aktuella objektet (detta).
Skapande ClassC är nu uppenbart:
Accentsconagua
var ClassC = funktion () this.name = "class C"; this.surname = "Jag är barnbarnet"; ärverFrån (ClassC, ClassB); ClassC.prototype.foo = function () // Gör några fina saker här ... ClassC.prototype.print = function () ClassB.prototype.print.call (this); console.log ("Låter så här fungerar!"); var c = ny ClassC (); c.print ();Och utsignalen är:
klass C Jag är barnbarnet Låter så här fungerar det!
Det kan kanske överraska dig lite, men Microsoft har en massa gratis lärande på många JavaScript-ämnen med öppen källkod, och vi är på uppdrag att skapa mycket mer med Microsoft Edge. Kolla in min egen:
Eller vårt lags inlärningsserie:
Och några gratis verktyg: Visual Studio Community, Azure Trial och testverktyg för webbläsare för Mac, Linux eller Windows.
Avslutningsvis vill jag bara klart ange att JavaScript inte är C # eller C ++. Den har sin egen filosofi. Om du är en C ++ eller C # -utvecklare och du verkligen vill omfamna hela kraften i JavaScript, är det bästa tipset jag kan ge dig: Försök inte att kopiera ditt språk till JavaScript. Det finns inget bäst eller sämsta språk. Bara olika filosofier!
Den här artikeln är en del av web dev-tekniken från Microsoft. Vi är glada att dela Microsoft Edge och den nya EdgeHTML-återgivningsmotor med dig. Få gratis virtuella maskiner eller testa fjärran på din Mac, iOS, Android eller Windows-enheten @ http://dev.modern.ie/.
Lär dig JavaScript: Den fullständiga guiden
Vi har byggt en komplett guide för att hjälpa dig att lära dig JavaScript, oavsett om du precis börjat som webbutvecklare eller vill utforska mer avancerade ämnen.
