Ereditarietà di JavaScript semplice cosa devi sapere

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à.

Attuazione dell'eredità

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!

Più mani con JavaScript

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:

  • Introduzione a WebGL 3D con HTML5 e Babylon.JS
  • Creazione di un'applicazione a pagina singola con ASP.NET e AngularJS
  • Grafica all'avanguardia in HTML

Oppure le serie di apprendimento del nostro team:

  • Suggerimenti pratici sulle prestazioni per rendere il tuo HTML / JavaScript più veloce (una serie in sette parti dal design reattivo ai giochi casuali all'ottimizzazione delle prestazioni)
  • La piattaforma Web moderna Jump Start (i fondamenti di HTML, CSS e JS)
  • Sviluppo di un'applicazione Windows universale con HTML e JavaScript Jump Start (usa il JS che hai già creato per creare un'app)

E alcuni strumenti gratuiti: Visual Studio Community, Azure Trial e strumenti di test cross-browser per Mac, Linux o Windows.

E una certa filosofia ...

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.