Héritage
L’héritage est le processus par lequel un objet peut être basé sur un autre. Cela permet aux objets de partager les propriétés de chacun.
J’ai créé le prototype Hero et je l’ai utilisé pour créer un nouvel objet nommé superman. Mais nous ne faisons rien avec cet objet. Alors occupons-nous de cela en créant une autre fonction appelée dialogue.
function dialogue() {
console.log('I am ' + this.name);
}
Mais si nous exécutons notre code maintenant, rien ne va se passer parce que cette fonction ne sait pas quel est réellement le nom. Pour cela, nous devons
Je veux que cette nouvelle fonction ait les mêmes propriétés que celle de la Hero. Au lieu de les écrire à l’intérieur de cette fonction, nous pouvons simplement dire à JavaScript de les hériter du prototype Hero.
Cela est possible avec l’aide de la propriété prototype qui est disponible au sein de n’importe quel objet en JavaScript.
En plaçant dialogue sur Hero.prototype, nous l’avons rendu disponible à toutes les instances de Hero.
Héritage différentiel
JavaScript est également livré avec un autre modèle d’héritage appelé « héritage différentiel ». Dans ce modèle, les méthodes ne sont pas copiées du parent à l’enfant. Mais au lieu de cela, il existe un lien entre les enfants et leur objet parent.
Ici, superman n’a pas réellement sa propre méthode appelée dialogue(). Mais alors, comment fonctionne superman.dialogue() ?
Lorsque le moteur JavaScript rencontre superman.dialogue()dans le code, il recherche la propriété appelée dialogue à l’intérieur de l’objet superman. Lorsqu’il n’en trouve pas, il remonte la chaîne des prototypes jusqu’au parent Hero.prototype de superman. Là, il trouvera Hero.prototype.dialogue et l’appellera avec un this qui est lié à superman.
Object.create()
Nous pouvons rendre cela encore plus exclusif en créant une nouvelle classe pour Superman qui héritera des propriétés du prototype Hero. Nous pouvons le faire en assignant le prototype de Superman au prototype de Hero comme ceci:
function Superman() {}
Superman.prototype = Hero.prototype
Mais ce que cela fait, c’est que cela rend juste Superman et Hero égaux. Ce dont nous avons réellement besoin est un nouvel objet basé sur le prototype Hero. Depuis ES5, JavaScript dispose d’une fonction intégrée appelée Object.create(). Utilisons-la ici comme indiqué ci-dessous :
Superman.prototype = Object.create(Hero.prototype);
Cela va créer un nouvel objet vide qui est basé sur le prototype Hero et l’assigner au prototype Superman. Donc toutes les propriétés que nous avons dans le prototype Hero peuvent maintenant être accédées par le prototype Superman. Ainsi, au lieu d’appeler new Hero, nous pouvons appeler new Superman et tout fonctionnera toujours comme il se doit.
Mais si vous regardez de plus près la sortie, vous remarquerez qu’il y a un undefined à l’intérieur. C’est parce qu’actuellement le Hero est un constructeur uniquement pour lui-même. Nous devons call les propriétés de Hero à l’intérieur du Superman prototype.
function Superman() {
Hero.call(this, 'Superman', 'Clark Kent', 'Krypton')
}
Créons un autre constructeur appelé MarvelMovies comme indiqué ci-dessous:
function MarvelMovies(movieName, releaseYear) {
this.movieName = movieName;
this.releaseYear = releaseYear;
}
Lorsqu’une fonction est utilisée comme constructeur, this se réfère au nouvel objet que nous créons. Ainsi, dans ce constructeur, j’ai pris movieName et releaseYear comme arguments et j’ai assigné ces valeurs aux propriétés movieName et releaseYear de notre nouvelle instance MarvelMovies nommée avengers.
var avengers = new MarvelMovies("avengers", 2012);
Je vais ensuite créer une nouvelle méthode appelée output pour ce prototype comme indiqué ci-dessous :
MarvelMovies.prototype.output = function() {
return "Movie: " + this.movieName + " Released in " + this.releaseYear;
}
console.log(avengers.output());
Héritage futur
Un aspect vraiment génial de l’héritage est que JavaScript vous permet de modifier ou d’étendre les caractéristiques d’une classe même après l’avoir définie.
JavaScript consultera le prototype lorsqu’il essaiera d’accéder aux propriétés d’un objet. Ainsi, vous pouvez modifier les classes au moment de l’exécution !
Pour illustrer cela, créons un tableau comme indiqué ci-dessous :
var numbers = ;
Array.prototype.shuffle = function() {
return this.sort(function() {
return Math.round( Math.random() * 2) - 1;
});
};
console.log(numbers.shuffle());
Ici, le tableau numbers existait avant le Array.prototype.shuffle. Mais en JavaScript, les recherches de propriétés remontent la chaîne des prototypes. C’est pourquoi le tableau obtient toujours l’accès à la nouvelle méthode shuffle, puisqu’il existe sur le Array.prototype lorsque nous essayons réellement de l’utiliser.
En termes simples, nous avons créé un tableau, puis nous sommes revenus en arrière et avons donné à tous les tableaux l’accès à une nouvelle méthode.