Share
Veel van mijn vrienden zijn C # - of C ++ - ontwikkelaars. Ze zijn gewend om overerving te gebruiken in hun projecten en wanneer ze JavaScript willen leren of ontdekken, is een van de eerste vragen die ze stellen: "Maar hoe kan ik overerving met JavaScript?"
JavaScript gebruikt een andere benadering dan C # of C ++ om een objectgerichte taal te maken. Het is een prototype-gebaseerde taal. Het concept van prototyping houdt in dat gedrag kan worden hergebruikt door klonen bestaand objecten die als prototypen dienen. Elk object in JavaScript is afhankelijk van een prototype dat een set functies en leden definieert die door het object kunnen worden gebruikt. Er zijn geen class-just-objecten. Elk object kan vervolgens worden gebruikt als prototype voor een ander object.
Dit concept is uiterst flexibel en we kunnen het gebruiken om sommige concepten van OOP te simuleren, zoals overerving.
Laten we eens kijken naar wat we met deze hiërarchie willen maken met JavaScript:
Allereerst kunnen we creëren Klasse A, eerste klasse gemakkelijk. Omdat er geen expliciete klassen zijn, kunnen we een reeks gedragingen definiëren (klasse A dus ...) door gewoon een functie als deze te maken:
var ClassA = function () this.name = "class A";
Deze "klasse" kan worden geïnstantieerd met behulp van de nieuwe trefwoord:
var a = new ClassA (); ClassA.prototype.print = function () console.log (this.name);
En om het te gebruiken met behulp van ons object:
een print();
Redelijk eenvoudig, toch?
Het complete voorbeeld is slechts acht regels lang:
var ClassA = function () this.name = "class A"; ClassA.prototype.print = function () console.log (this.name); var a = new ClassA (); een print();
Laten we nu een hulpmiddel toevoegen om 'overerving' tussen klassen te creëren. Deze tool hoeft maar één ding te doen: kloon het prototype.
var inheritsFrom = function (child, parent) child.prototype = Object.create (parent.prototype); ;
Dit is precies waar de magie gebeurt! Door het prototype te klonen, zetten we alle leden en functies over naar de nieuwe klas.
Dus als we een tweede klasse willen toevoegen die de eerste zal zijn, moeten we deze code gebruiken:
var ClassB = function () this.name = "class B"; this.samboom = "Ik ben het kind"; inheritsFrom (ClassB, ClassA);
Dan omdat ClassB geërfd van de afdrukken functie van Klasse A, eerste klasse, de volgende code werkt:
var b = nieuwe klasse B (); b.print ();
En produceert de volgende uitvoer:
klasse B
We kunnen zelfs de afdrukken functie voor ClassB:
ClassB.prototype.print = function () ClassA.prototype.print.call (this); console.log (this.surname);
In dit geval ziet de geproduceerde uitvoer er als volgt uit:
klas B Ik ben het kind
De truc hier is om te bellen ClassA.prototype om de basis te krijgen afdrukken functie. Dan dankzij de telefoontje functie kunnen we de basisfunctie op het huidige object oproepen (deze).
Creëren ClassC is nu duidelijk:
Accentsconagua
var ClassC = function () this.name = "class C"; this.samboom = "Ik ben het kleinkind"; inheritsFrom (ClassC, ClassB); ClassC.prototype.foo = function () // Doe hier wat funky dingen ... ClassC.prototype.print = function () ClassB.prototype.print.call (this); console.log ("Klinkt alsof dit werkt!"); var c = nieuwe ClassC (); c.print ();En de uitvoer is:
klas C Ik ben het kleinkind Klinkt alsof dit werkt!
Het zal je misschien een beetje verbazen, maar Microsoft heeft een heleboel gratis leren over veel open source JavaScript-onderwerpen en we zijn op een missie om nog veel meer met Microsoft Edge te maken. Bekijk mijn eigen:
Of de leerserie van ons team:
En enkele gratis tools: Visual Studio Community, Azure Trial en cross-browser testtools voor Mac, Linux of Windows.
Tot slot wil ik alleen duidelijk stellen dat JavaScript niet C # of C ++ is. Het heeft zijn eigen filosofie. Als u een C ++ - of C # -ontwikkelaar bent en u echt de volledige kracht van JavaScript wilt omarmen, is de beste tip die ik u kan geven: probeer uw taal niet te repliceren in JavaScript. Er is geen beste of slechtste taal. Gewoon verschillende filosofieën!
Dit artikel maakt deel uit van de web dev tech-serie van Microsoft. We zijn verheugd om te delen Microsoft Edge en het nieuwe EdgeHTML-renderingengine met jou. Download gratis virtuele machines of test op afstand op uw Mac, iOS, Android of Windows-apparaat @ http://dev.modern.ie/.
Leer JavaScript: de complete gids
We hebben een complete handleiding samengesteld om u te helpen JavaScript te leren, of u net bent begonnen als een webontwikkelaar of dat u meer geavanceerde onderwerpen wilt verkennen.
