Héritage JavaScript simple ce que vous devez savoir

Beaucoup de mes amis sont des développeurs C # ou C ++. Ils ont l'habitude d'utiliser l'héritage dans leurs projets et lorsqu'ils veulent apprendre ou découvrir JavaScript, l'une des premières questions qu'ils se posent est la suivante: «Mais comment puis-je effectuer l'héritage avec JavaScript?

En réalité, JavaScript utilise une approche différente de C # ou C ++ pour créer un langage orienté objet. C'est un à base de prototype la langue. Le concept de prototypage implique que le comportement peut être réutilisé par clonage existant objets qui servent de prototypes. Chaque objet en JavaScript dépend d'un prototype qui définit un ensemble de fonctions et de membres que l'objet peut utiliser. Il n'y a pas d'objets de classe juste. Chaque objet peut alors être utilisé comme prototype pour un autre objet.

Ce concept est extrêmement flexible et nous pouvons l’utiliser pour simuler certains concepts de la programmation orientée objet, tels que l’héritage..

Mise en œuvre de l'héritage

Regardons ce que nous voulons créer avec cette hiérarchie en utilisant JavaScript:

Tout d'abord, nous pouvons créer Classe A facilement. Comme il n’existe pas de classes explicites, nous pouvons définir un ensemble de comportements (Une classe donc…) en créant simplement une fonction comme celle-ci:

var ClassA = function () this.name = "class A"; 

Cette "classe" peut être instanciée en utilisant le Nouveau mot-clé:

var a = new ClassA (); ClassA.prototype.print = function () console.log (this.name); 

Et pour l'utiliser en utilisant notre objet:

un imprimé();

Assez simple, droit?

L'échantillon complet ne compte que huit lignes:

var ClassA = function () this.name = "class A";  ClassA.prototype.print = function () console.log (this.name);  var a = new ClassA (); un imprimé();

Ajoutons maintenant un outil pour créer un «héritage» entre les classes. Cet outil devra simplement faire une seule chose: cloner le prototype.

var inheritsFrom = fonction (enfant, parent) child.prototype = Object.create (parent.prototype); ;

C'est exactement où la magie se produit! En clonant le prototype, nous transférons tous les membres et fonctions à la nouvelle classe..

Donc, si nous voulons ajouter une deuxième classe qui sera l'enfant du premier, nous devons simplement utiliser ce code:

var ClassB = function () this.name = "class B"; this.surname = "Je suis l'enfant";  inheritsFrom (ClassB, ClassA);

Puis parce que ClassB hérité du impression fonction de Classe A, le code suivant fonctionne:

var b = new ClassB (); b.print ();

Et produit la sortie suivante:

classe B

Nous pouvons même remplacer la impression fonction pour ClassB:

ClassB.prototype.print = function () ClassA.prototype.print.call (this); console.log (this.surname); 

Dans ce cas, la sortie produite ressemblera à ceci:

classe B je suis l'enfant

Le truc ici est d'appeler ClassA.prototype obtenir la base impression une fonction. Puis grâce au appel fonction, nous pouvons appeler la fonction de base sur l'objet en cours (ce).

En créant Classe c est maintenant évident:

var ClassC = function () this.name = "class C"; this.surname = "je suis le petit-fils";  inheritsFrom (ClassC, ClassB); ClassC.prototype.foo = function () // Faites des trucs géniaux ici… ClassC.prototype.print = function () ClassB.prototype.print.call (this); console.log ("On dirait que ça marche!");  var c = new ClassC (); c.print ();

Et le résultat est:

classe C je suis le petit-fils On dirait que cela fonctionne!

Plus de pratique avec JavaScript

Cela vous surprendra peut-être un peu, mais Microsoft propose un grand nombre d’apprentissage gratuit sur de nombreuses rubriques JavaScript open source et nous avons pour mission de créer beaucoup plus avec Microsoft Edge. Découvrez moi-même:

• Introduction à WebGL 3D avec HTML5 et Babylon.JS
• Construire une application à page unique avec ASP.NET et AngularJS
• Graphiques de pointe en HTML

Ou la série d'apprentissage de notre équipe:

• Conseils pratiques sur les performances pour rendre votre code HTML / JavaScript plus rapide (une série en sept parties allant de la conception réactive aux jeux occasionnels en passant par l'optimisation des performances)
• La plate-forme Web moderne Jump Start (les bases de HTML, CSS et JS)
• Développement d'une application Windows universelle avec HTML et JavaScript Jump Start (utilisez le JS que vous avez déjà créé pour créer une application)

Et quelques outils gratuits: Communauté Visual Studio, Azure Trial et outils de test multi-navigateurs pour Mac, Linux ou Windows..

Et de la philosophie…

Pour conclure, je veux juste indiquer clairement que JavaScript n'est pas du C # ou du C ++. Il a son propre philosophie. Si vous êtes un développeur C ++ ou C # et que vous souhaitez vraiment profiter de toute la puissance de JavaScript, le meilleur conseil que je puisse vous donner est: N'essayez pas de répliquer votre langage en JavaScript. Il n'y a pas de meilleure ou de pire langue. Juste des philosophies différentes!

Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.

Apprendre JavaScript: le guide complet

Nous avons créé un guide complet pour vous aider à apprendre le JavaScript, que vous soyez débutant en tant que développeur Web ou que vous souhaitiez explorer des sujets plus avancés..