Moștenire simplă JavaScript Ce trebuie să știți

Mulți dintre prietenii mei sunt dezvoltatori C # sau C ++. Ei sunt obișnuiți să folosească moștenirea în proiectele lor și atunci când doresc să învețe sau să descopere JavaScript, una dintre primele întrebări pe care le pun este: "Dar cum pot face moștenirea cu JavaScript?"

De fapt, JavaScript utilizează o abordare diferită de C # sau C ++ pentru a crea un limbaj orientat pe obiecte. Este un prototip bazat pe limba. Conceptul de prototipare implică faptul că comportamentul poate fi refolosit prin clonare existent obiecte care servesc drept prototipuri. Fiecare obiect din JavaScript depinde de un prototip care definește un set de funcții și membri pe care le poate utiliza obiectul. Nu există obiecte de clasă. Fiecare obiect poate fi apoi folosit ca prototip pentru un alt obiect.

Acest concept este extrem de flexibil și îl putem folosi pentru a simula niște concepte de la OOP, cum ar fi moștenirea.

Implementarea moștenirii

Să ne uităm la ceea ce dorim să creăm cu această ierarhie folosind JavaScript:

Mai întâi de toate, putem crea Clasa a uşor. Deoarece nu există clase explicite, putem defini un set de comportament (clasa A astfel ...) doar prin crearea unei funcții ca aceasta:

var ClassA = funcția () this.name = "clasa A"; 

Această "clasă" poate fi instanțiată utilizând nou cuvinte cheie:

var a = clasa nouă (); ClassA.prototype.print = funcția () console.log (this.name); 

Și să o folosim folosind obiectul nostru:

a.print ();

Destul de simplu, corect?

Eșantionul complet are doar opt linii:

var ClassA = funcția () this.name = "clasa A";  ClassA.prototype.print = funcția () console.log (this.name);  var a = clasa nouă (); a.print ();

Acum, să adăugăm un instrument pentru a crea "moștenire" între clase. Acest instrument va trebui doar să facă un singur lucru: clona prototipul.

var moșteniteFrom = funcție (copil, părinte) child.prototype = Object.create (parent.prototype); ;

Acesta este exact locul unde se petrece magia! Prin clonarea prototipului, transferăm toți membrii și funcțiile noii clase.

Deci, dacă vrem să adăugăm o clasă a doua care va fi copilul primului, trebuie să folosim acest cod:

var ClassB = funcția () this.name = "clasa B"; this.name = "Eu sunt copilul";  moșteniFrom (ClasaB, ClasaA);

Atunci pentru că ClassB a moștenit imprimare funcția de la Clasa a, codul următor funcționează:

var b = clasa nouă (); b.print ();

Și produce următoarea ieșire:

clasa B

Putem chiar suprascrie imprimare funcția pentru ClassB:

ClassB.prototype.print = funcția () ClassA.prototype.print.call (aceasta); console.log (this.surname); 

În acest caz, producția produsă va arăta astfel:

clasa B Sunt copilul

Trucul aici este de a suna ClassA.prototype pentru a obține baza imprimare funcţie. Apoi mulțumită apel funcția de bază poate fi apelată pe obiectul curent (acest).

Crearea de ClassC este acum evident:

var ClassC = funcția () this.name = "clasa C"; this.name = "Eu sunt nepotul";  moșteniFrom (ClassC, ClassB); ClassC.prototype.foo = function () // Faceti cateva lucruri funky aici ... ClassC.prototype.print = function () ClassB.prototype.print.call (this); console.log ("Sună ca acesta funcționează!");  var c = clasa nouă (); c.print ();

Ieșirea este:

clasa C Sunt nepotul Suna ca asta functioneaza!

Mai multe mâini cu JavaScript

S-ar putea să vă surprindă puțin, dar Microsoft are o grămadă de învățare gratuită pe multe subiecte JavaScript open source și suntem într-o misiune de a crea mult mai mult cu Microsoft Edge. Check out-ul meu:

• Introducere în WebGL 3D cu HTML5 și Babylon.JS
• Construirea unei aplicații cu o singură pagină cu ASP.NET și AngularJS
• Cutting Edge Graphics în HTML

Sau seria de învățare a echipei noastre:

• Sfaturi practice de performanță pentru a vă face HTML / JavaScript mai rapid (o serie de șapte părți de la design receptiv la jocuri casual la optimizarea performanțelor)
• Platforma Modernă de Platformă Web Jump Start (fundamentele HTML, CSS și JS)
• Dezvoltarea aplicației Windows Universal cu cod HTML și JavaScript Jump Start (utilizați JS pe care l-ați creat deja pentru a crea o aplicație)

Și câteva instrumente gratuite: Visual Studio Community, Azure Trial și instrumente de testare cross-browser pentru Mac, Linux sau Windows.

Și o filozofie ...

În concluzie, vreau doar să menționez în mod clar că JavaScript nu este C # sau C ++. Are propriile sale filozofie. Dacă sunteți un dezvoltator C ++ sau C # și doriți cu adevărat să îmbrățișați puterea completă a JavaScript, cel mai bun sfat pe care îl pot oferi este: Nu încercați să replicați limba în JavaScript. Nu există limba cea mai bună sau cea mai proastă. Filosofii diferite!

Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ http://dev.modern.ie/.

Aflați JavaScript: Ghidul complet

Am creat un ghid complet care vă ajută să învățați JavaScript, indiferent dacă începeți doar ca dezvoltator web sau doriți să explorați subiecte mai avansate.