JavaScript Inheritance Patterns. In this post, I am going to introduce to you 3 different ways of how you can implement inheritance in JavaScript.
You will see inheritance implemented in languages such as Java by allowing a class to inherit state and behavior from a superclass, where each superclass can have many subclasses. This means that in Java an object is an instance of a class, which can inherit other classes. Now in JavaScript, being prototypal by nature, an object can inherit from an object. For the rest of this post, I will introduce the Pseudoclassical, Functional and Prototypal inheritance patterns in JavaScript.
Pseudoclassical pattern The Pseudoclassical pattern tries to replicate inheritance in a way that is familiar to those who come from a Java or C like background. A pattern which uses a constructor function and the new operator, combined with a prototype added to the constructor is said to be Pseudoclassical. In JavaScript, one way to do this inheritance is: Functional pattern Prototypal pattern Summary.
Nested inheritance in Javascript. Most examples of javascript inheritance only go one level deep (for example, Student inherits (→) from Person).
That’s all well and good, but what if you have a long chain for things you want to inherit from? Say we have A → B → C → D → E, and each has its own methods and attributes. How can they inherit from each other cleanly? Here is the initial solution: So, what’s special about the above. //you need to make sure you don't override your functions //Good: X.prototype = new Y(); X.prototype.foo = function(){ .... }; //Bad (trashes foo!)
Adding methods and properties Once we have a chain, we naturally want to make objects created from that chain do something useful. Lets say we have the following inheritance chain of vehicle types: Vehicle → LandVehicle → Car → SportsCar → RacingCar We assume that all Vehicles have a “registration” property that is unique for each vehicle we create: The problem when we run the above is that the registration is not unique! Le point sur Javascript et l’héritage prototypal « naholyr.fr. Javascript n’est pas à proprement parler un langage objet, mais il dispose quand-même d’un opérateur new et de trucs qui ressemblent vachement à des propriétés et des méthodes.
Donc par raccourci, on parle d’objet. Dans les différents tutoriels sur le sujet, quand on aborde l’héritage, la méthode proposée est souvent celle-là: Cette méthode n’est pas parfaite puisque pour implémenter l’héritage on va instancier un objet de la classe parente. WTF ? Du coup, faisons un petit tour des méthodes alternatives. D’abord, comprendre… Comme on le sait, en Javascript il n’y a pas de classes, pas vraiment non plus d’objets, juste des « hashs ». La différence entre un objet anonyme et un autre ? De ce point de vue une « méthode » est une propriété comme une autre, si ce n’est qu’il s’agit d’une propriété de type Function. Jouons un peu avec this pour comprendre comment il est défini: Réaliser un héritage en JavaScript. Introduction La Programmation Orientée Objet (POO) offre l'avantage indéniable de fournir un code modulaire.
En effet, celle-ci se base sur deux concepts que sont les niveaux de visibilité et l'héritage. Les niveau de visibilité sont un peu des moyens de protections pour sécuriser les classes. Il en existe quatre : Default : Seuls les entités de la classe et et les classes filles accédent aux éléments de la classePublic : Toutes les entités externes accédent aux éléments de la classe Private : Seuls les entités de la classe accédent aux éléments de la classeProtected : Seuls les classes filles accédent aux éléments de la classe Une fois ces barrières misent en place, on peut maintenant faire communiquer les classes entres elles. Prenons un exemple concret : Nous utiliserons ici un point de vue géographique en se basant sur l'API d'OpenLayers est son concept de couche. Faire hériter une classe en JavaScript Il existe trois manières de faire hériter des classes en JS.
Exemple 1 :