Molti miei amici sono sviluppatori C # o C ++. Sono abituati ad usare l'ereditarietà nei loro progetti e quando vogliono imparare o scoprire JavaScript, una delle prime domande che chiedono è: "Ma come posso ereditare JavaScript?"
In realtà, JavaScript utilizza un approccio diverso rispetto a C # o C ++ per creare un linguaggio orientato agli oggetti. È un basato sui prototipi linguaggio. Il concetto di prototipazione implica che il comportamento possa essere riutilizzato mediante clonazione esistente oggetti che servono come prototipi. Ogni oggetto in JavaScript dipende da un prototipo che definisce un insieme di funzioni e membri che l'oggetto può utilizzare. Non ci sono oggetti di classe. Ogni oggetto può quindi essere usato come prototipo per un altro oggetto.
Questo concetto è estremamente flessibile e possiamo usarlo per simulare alcuni concetti di OOP, come l'ereditarietà.
Diamo un'occhiata a ciò che vogliamo creare con questa gerarchia utilizzando JavaScript:
Prima di tutto, possiamo creare Classe A
facilmente. Perché non ci sono classi esplicite, possiamo definire un insieme di comportamenti (una classe così ...) semplicemente creando una funzione come questa:
var ClassA = function () this.name = "class A";
Questa "classe" può essere istanziata usando il nuovo
parola chiave:
var a = new ClassA (); ClassA.prototype.print = function () console.log (this.name);
E usarlo usando il nostro oggetto:
A.Print ();
Abbastanza semplice, giusto?
Il campione completo è lungo solo otto righe:
var ClassA = function () this.name = "class A"; ClassA.prototype.print = function () console.log (this.name); var a = new ClassA (); A.Print ();
Ora aggiungiamo uno strumento per creare "ereditarietà" tra le classi. Questo strumento dovrà solo fare una sola cosa: clonare il prototipo.
var inheritsFrom = function (child, parent) child.prototype = Object.create (parent.prototype); ;
Questo è esattamente dove avviene la magia! Con la clonazione del prototipo, trasferiamo tutti i membri e le funzioni nella nuova classe.
Quindi, se vogliamo aggiungere una seconda classe che sarà figlia del primo, dobbiamo solo usare questo codice:
var ClassB = function () this.name = "class B"; this.surname = "Sono il bambino"; inheritsFrom (ClassB, ClassA);
Allora perché ClassB
ha ereditato il stampare
funzione da Classe A
, il seguente codice funziona:
var b = new ClassB (); b.print ();
E produce il seguente output:
classe B
Possiamo persino ignorare il stampare
funzione per ClassB
:
ClassB.prototype.print = function () ClassA.prototype.print.call (this); console.log (this.surname);
In questo caso, l'output prodotto sarà simile a questo:
classe B io sono il bambino
Il trucco qui è chiamare ClassA.prototype
per ottenere la base stampare
funzione. Quindi grazie a chiamata
funzione possiamo chiamare la funzione base sull'oggetto corrente (Questo
).
Creazione ClassC
è ora ovvio:
var ClassC = function () this.name = "class C"; this.surname = "I'm the grandchild"; inheritsFrom (ClassC, ClassB); ClassC.prototype.foo = function () // Fai un po 'di cose funky qui ... ClassC.prototype.print = function () ClassB.prototype.print.call (this); console.log ("Sembra che funzioni!"); var c = new ClassC (); c.print ();
E l'output è:
classe C Sono il nipote Sembra che funzioni!
Potrebbe sorprendervi un po ', ma Microsoft ha un sacco di apprendimento gratuito su molti argomenti JavaScript open source, e siamo in missione per creare molto di più con Microsoft Edge. Controlla il mio:
Oppure le serie di apprendimento del nostro team:
E alcuni strumenti gratuiti: Visual Studio Community, Azure Trial e strumenti di test cross-browser per Mac, Linux o Windows.
Per concludere, voglio solo affermare chiaramente che JavaScript non è C # o C ++. Ha il suo filosofia. Se sei uno sviluppatore C ++ o C # e vuoi davvero sfruttare appieno la potenza di JavaScript, il miglior consiglio che posso darti è: non provare a replicare la tua lingua in JavaScript. Non esiste una lingua migliore o peggiore. Solo diverse filosofie!
Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
Scopri JavaScript: la guida completa
Abbiamo creato una guida completa per aiutarti a imparare JavaScript, sia che tu stia appena iniziando come sviluppatore web o che desideri esplorare argomenti più avanzati.