Image simple avec JavaScript

Les plats clés

• JavaScript utilise une approche basée sur un prototype pour créer un langage orienté objet, qui permet de réutiliser le comportement en clonage des objets existants qui servent de prototypes. Ce concept peut être utilisé pour simuler l'héritage.
• L'héritage peut être implémenté dans JavaScript en créant une fonction qui clones le prototype, transférant ainsi tous les membres et fonctions vers la nouvelle classe. Cela permet la création d'une hiérarchie de classes où chaque classe peut hériter des fonctions et des membres de sa classe parent.
• Bien que JavaScript ait sa propre approche unique de la programmation orientée objet, il est important que les développeurs provenant de langages comme C # ou C comprennent que essayer de reproduire leur langage familier en JavaScript peut ne pas donner les meilleurs résultats. Au lieu de cela, embrasser la philosophie unique de JavaScript peut débloquer toute sa puissance.

Cet article fait partie d'une série Web Dev Tech de Microsoft. Merci de soutenir les partenaires qui rendent le point de point possible.

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 posent est: «Mais comment puis-je faire l'héritage avec JavaScript?»

En fait, JavaScript utilise une approche différente de C # ou C pour créer un langage orienté objet. Il s'agit d'une langue basée sur un prototype. Le concept de prototypage implique que le comportement peut être réutilisé en clonage des objets existants qui servent de prototypes. Chaque objet de JavaScript se retrouve d'un prototype qui définit un ensemble de fonctions et de membres que l'objet peut utiliser. Il n'y a pas de classe. Juste des objets. Chaque objet peut ensuite ê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 POO comme l'héritage.

Implémentation de l'héritage

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

Tout d'abord, nous pouvons créer facilement classa. Parce qu'il n'y a pas de classes explicites, nous pouvons définir un ensemble de comportements (une classe donc…) en créant simplement une fonction comme ceci:

<span>var <span>ClassA</span> = function() {
</span>    <span>this.name = "class A";
</span><span>}</span>

Cette «classe» peut être instanciée à l'aide du nouveau mot-clé:

<span>var a = new ClassA();
</span><span>ClassA.prototype.print = function() {
</span>    <span>console.log(this.name);
</span><span>}</span>

et pour l'utiliser en utilisant notre objet:

a<span>.print();</span>

assez simple, non?

L'échantillon complet ne fait que 8 lignes:

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

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a<span>.print();</span>

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

<span>var inheritsFrom = function (child<span>, parent</span>) {
</span>    child<span>.prototype = Object.create(parent.prototype);
</span><span>};</span>

C'est exactement là que la magie se produit! En clonage le prototype, nous transférons tous les membres et fonctions vers la nouvelle classe.

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

<span>var <span>ClassA</span> = function() {
</span>    <span>this.name = "class A";
</span><span>}</span>

Ensuite, parce que ClassB a hérité de la fonction d'impression de Classa, le code suivant fonctionne:

<span>var a = new ClassA();
</span><span>ClassA.prototype.print = function() {
</span>    <span>console.log(this.name);
</span><span>}</span>

et produit la sortie suivante:

a<span>.print();</span>

Nous pouvons même remplacer la fonction d'impression pour classb:

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

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a<span>.print();</span>

Dans ce cas, la sortie produite ressemblera à ceci:

<span>var inheritsFrom = function (child<span>, parent</span>) {
</span>    child<span>.prototype = Object.create(parent.prototype);
</span><span>};</span>

L'astuce ici est à l'appel classa.prototype pour obtenir la fonction d'impression de base. Alors grâce à la fonction d'appel, nous pouvons appeler la fonction de base sur l'objet actuel (ceci).

La création de classe est maintenant évidente:

<span>var <span>ClassB</span> = function() {
</span>    <span>this.name = "class B";
</span>    <span>this.surname = "I'm the child";
</span><span>}
</span>
<span>inheritsFrom(ClassB, ClassA);</span>

et la sortie est:

<span>var b = new ClassB();
</span>b<span>.print();</span>

Plus pratique avec JavaScript

Cela pourrait vous surprendre un peu, mais Microsoft a un tas d'apprentissage gratuit sur de nombreux sujets JavaScript open source et nous sommes en mission pour en créer beaucoup plus dans la venue Spartan Project. Consultez le mien:

• Introduction à WebGL 3D, HTML5 et babylon.js
• Construire une seule application de page avec asp.net et angularjs
• Graphiques de pointe dans HTML

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

• Conseils de performance pratiques pour rendre votre HTML / JavaScript plus rapidement (une série en 7 parties, de la conception réactive aux jeux occasionnels à l'optimisation des performances)
• La plate-forme Web moderne Jumpstart (les principes fondamentaux de HTML, CSS et JS)
• Développer des applications Windows universelles avec HTML et JavaScript Jumpstart (utilisez le JS que vous avez déjà créé pour créer une application)

Et quelques outils gratuits: Visual Studio Community, Azure Trial et Cross-Browser Test Tools for Mac, Linux ou Windows.

et une philosophie…

Pour conclure, je veux juste dire clairement que JavaScript n'est pas C # ou C. Il a sa propre philosophie. Si vous êtes un développeur C ou C # et que vous voulez vraiment embrasser la pleine puissance de JavaScript, le meilleur conseil que je puisse vous donner est: n'essayez pas de reproduire votre langue en JavaScript. Il n'y a pas de langue meilleure ou pire. Juste différentes philosophies!

Cet article fait partie de la série Web Dev Tech de Microsoft. Nous sommes ravis de partager Project Spartan et son nouveau moteur de rendu avec vous. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows sur moderne.ie.

Questions fréquemment posées (FAQ) sur l'héritage JavaScript

Quelle est la différence entre l'héritage classique et prototypique en JavaScript?

En JavaScript, il existe deux types d'hérédité: classiques et prototypaux. L'héritage classique, également connu sous le nom d'hérédité du constructeur, est l'endroit où un nouvel objet est créé à partir d'une classe ou d'un constructeur. Ceci est similaire à ce que l'héritage fonctionne dans des langues comme Java ou c. L'héritage prototypal, en revanche, est unique à JavaScript. Il s'agit de créer un nouvel objet qui hérite des propriétés d'un objet existant. Cela se fait à l'aide de la méthode object.create () ou en définissant le prototype du nouvel objet à l'objet existant. La principale différence entre les deux est que l'héritage classique utilise des classes et des fonctions du constructeur, tandis que l'héritage prototypal utilise des objets.

Comment fonctionne la chaîne prototype dans l'héritage JavaScript?

La chaîne prototype est un crucial javascript? Concept dans l'héritage JavaScript. Lorsqu'une propriété ou méthode est accessible sur un objet, JavaScript vérifie d'abord si cet objet a cette propriété ou cette méthode. Si ce n'est pas le cas, JavaScript vérifie alors le prototype de l'objet. Ce processus continue la chaîne prototype jusqu'à ce que la propriété ou la méthode soit trouvée ou que la fin de la chaîne soit atteinte (qui est généralement le prototype d'objet intégré). Ce mécanisme permet aux objets d'hériter des propriétés et des méthodes de leurs prototypes, permettant la réutilisation et l'héritage de code en JavaScript.

Pouvez-vous expliquer le concept de 'super' en héritage javascript?

Le 'Super' Le mot-clé dans JavaScript est utilisé dans le contexte des classes pour appeler les fonctions sur le parent d'un objet. En d'autres termes, «Super» vous permet d'accéder et d'appeler les fonctions sur la classe parent d'un objet, vous permettant de réutiliser les méthodes de la classe parent. Ceci est particulièrement utile dans le constructeur d'une sous-classe, où vous voudrez peut-être appeler le constructeur de la classe parent.

Comment puis-je remplacer les méthodes héréditaires en JavaScript?

Méthodes héréditaires maîtresses dans JavaScript en JavaScript? est simple. Vous définissez simplement une méthode avec le même nom dans la classe ou l'objet enfant. Lorsque cette méthode est appelée sur une instance de la classe ou de l'objet enfant, la version définie chez l'enfant sera utilisée à la place de celle du parent. Cela vous permet de personnaliser ou d'étendre le comportement des méthodes héréditaires.

Quel est le rôle du «constructeur» dans l'hérédité JavaScript?

Le «constructeur» en javascript est une méthode spéciale qui est utilisé pour créer et initialiser un objet. Dans le contexte de l'héritage, la fonction du constructeur de la classe parent est souvent appelée dans le constructeur de la classe infantile en utilisant le mot-clé «super». Cela permet à la classe infantile de hériter des propriétés et des méthodes de la classe parent.

Comment fonctionne l'héritage avec les classes JavaScript ES6?

Avec l'introduction de ES6, JavaScript a désormais une syntaxe de classe plus traditionnelle pour définir les constructeurs et travailler avec l'héritage. Le mot-clé «classe» est utilisé pour définir une classe, et le mot-clé «étend» est utilisé pour créer une sous-classe qui hérite d'une classe parent. Le mot-clé «super» est utilisé dans le constructeur de la sous-classe pour appeler le constructeur de la classe parent.

Pouvez-vous expliquer l'héritage multiple en javascript?

JavaScript ne prend pas en charge nativement l'héritage multiple, Lorsqu'un objet ou une classe peut hériter de plus d'un parent. Cependant, il est possible de simuler l'héritage multiple à l'aide de mixins. Un mélange est une technique où un objet ou une classe peut «mélanger» les propriétés et les méthodes à partir de plusieurs sources. Cela vous permet de combiner la fonctionnalité de plusieurs objets ou classes en un seul.

Quelle est la différence entre «l'héritage» et la «composition» en JavaScript?

L'héritage et la composition sont deux façons de réutiliser la réutilisation Code dans JavaScript. L'héritage est où un objet ou une classe hérite des propriétés et des méthodes d'un objet ou d'une classe parent. La composition, en revanche, est l'endroit où un objet est composé d'autres objets, et la fonctionnalité est déléguée à ces objets composants. Bien que l'héritage concerne une relation «IS-A» (une sous-classe est un type de classe parent), la composition concerne une relation «has-a» (un objet a d'autres objets).

Comment puis-je Utilisez l'héritage avec les fonctions JavaScript?

Les fonctions dans JavaScript sont des objets, et ils peuvent être utilisés pour implémenter l'héritage. Cela se fait en définissant une fonction de constructeur, qui est utilisée pour créer de nouveaux objets. La propriété «prototype» de la fonction constructeur est un objet dont toutes les instances de la fonction hériteront. En ajoutant des propriétés et des méthodes à cet objet prototype, vous pouvez les rendre disponibles pour toutes les instances de la fonction.

Quels sont les pièges communs de l'héritage JavaScript?

Un piège commun de l'héritage JavaScript est la confusion entre la chaîne prototype et la chaîne de constructeur. Lorsqu'une méthode est appelée sur un objet, JavaScript regarde la chaîne prototype, pas la chaîne de constructeur. Un autre piège est oublié d'appeler le constructeur parent du constructeur enfant, ce qui peut conduire à des résultats inattendus. Enfin, parce que JavaScript utilise l'héritage prototypique, il est possible de modifier accidentellement le prototype lorsque vous vouliez modifier une instance.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!