Introduction à la programmation orientée objet JavaScript Tutorial_Basic Knowledge

Bien qu'il existe des différences entre JavaScript orienté objet et d'autres langages, qui ont déclenché certains débats, il ne fait aucun doute que JavaScript possède de puissantes capacités de programmation orientée objet

Cet article commence par une introduction à l'objet- programmation orientée Commence, puis passe en revue le modèle objet JavaScript et enfin démontre les concepts de programmation orientée objet en JavaScript.

Révision JavaScript

Si vous n'êtes pas sûr des concepts JavaScript tels que les variables, les types, les fonctions et les étendues, vous pouvez lire Réintroduire ces sujets en JavaScript. Vous pouvez également consulter le Guide de base JavaScript 1.5

Programmation orientée objet

La programmation orientée objet est un paradigme de programmation qui utilise des abstractions pour créer des modèles basés sur le monde réel. Il utilise plusieurs techniques paradigmatiques précédemment établies, notamment la modularité, le polymorphisme et l'encapsulation. Aujourd'hui, de nombreux langages de programmation populaires (tels que Java, JavaScript, C#, C, Python, PHP, Ruby et Objective-C) prennent en charge la programmation orientée objet (POO).

La programmation orientée objet peut être considérée comme l'utilisation de collections d'objets collaborant pour concevoir des logiciels, contrairement à la vision traditionnelle des programmes comme des collections de fonctions, ou réduits à des listes d'instructions informatiques. Dans la programmation orientée objet, chaque objet possède les capacités suivantes : recevoir des messages, traiter des données et envoyer des messages à d'autres objets. Chaque objet peut être considéré comme une petite machine indépendante avec différents rôles ou responsabilités.
La programmation orientée objet vise à promouvoir une plus grande flexibilité et maintenabilité dans la programmation et est très populaire dans le génie logiciel à grande échelle. En raison de l'accent mis sur la modularité, le code orienté objet est conçu pour rendre le développement plus simple, plus facile à comprendre ultérieurement et facilite l'analyse, le codage et la compréhension de situations et d'étapes complexes que les méthodes de programmation directes moins modulaires.

Conditions particulières

Classe
~ Définit les caractéristiques de l'objet.
Objet
~ Instance de la classe.
Propriété
~ Caractéristique d'un objet, comme la couleur.
Méthode
~ Certaines capacités d'objet, comme la marche.
Constructeur
~ Méthode appelée lors de l'instanciation.
Héritage
~ Une classe peut hériter des caractéristiques d'une autre classe.
Encapsulation
~ Une classe définit uniquement les caractéristiques de l'objet, et une méthode définit uniquement la manière dont la méthode est exécutée.
Abstraction
~ Combine l'héritage complexe, les méthodes et les propriétés d'un objet, et doit être capable de simuler un certain modèle de réalité.
Polymorphisme
~ Différentes classes peuvent définir les mêmes méthodes ou propriétés.
Pour une description plus détaillée de la programmation orientée objet, consultez l'entrée Wikipédia sur la programmation orientée objet.

Programmation basée sur des prototypes

La programmation basée sur des prototypes est un style de programmation orienté objet dans lequel les classes n'existent pas et la réutilisation des comportements (appelée héritage dans les langages basés sur les classes) est déguisée en prototypes. Cela se fait en utilisant des objets existants. Ce modèle est également appelé programmation sans classe, orientée prototype ou basée sur des instances.
L'exemple original (et très canonique) de langage basé sur un prototype est le langage de programmation Self développé par David Ungar et Randall Smith. Cependant, ce style de programmation sans classe est devenu de plus en plus populaire récemment et a été adopté par plusieurs langages de programmation tels que JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (lors de l'utilisation du framework Viewer pour manipuler des composants Morphic) , et plusieurs autres langues.

Programmation orientée objet JavaScript

Objets de base

JavaScript contient plusieurs objets inclus dans son noyau ; par exemple, les objets Math, Object, Array et String. L'exemple suivant montre comment obtenir un nombre aléatoire à l'aide de la méthode random() de l'objet Math.

Copier le code Le code est le suivant :

alert(Math.random());

Astuce : Cet exemple et tous les autres supposent que l'alerte de nom de fonction a été définie globalement (car l'alerte est incluse dans les navigateurs Web). La fonction d'alerte ne fait pas réellement partie de JavaScript lui-même.

Pour une liste des objets principaux JavaScript, consultez Référence principale JavaScript 1.5 : Objets globaux.

Chaque objet en JavaScript est une instance d'un objet Object et hérite donc de toutes ses propriétés et méthodes.

Objets personnalisés

La Classe

JavaScript est un langage basé sur un prototype qui ne contient pas d'instructions de classe comme celles que l'on trouve en C ou Java. Cela peut parfois confondre les programmeurs habitués aux langages avec une instruction de classe. Cependant, JavaScript utilise des fonctions comme classes. Définir une classe est aussi simple que définir une fonction. Dans l'exemple suivant, nous définissons une nouvelle classe appelée Person.

Copier le code Le code est le suivant :

function Person() { }

L'objet (instance de classe)

Pour créer une nouvelle instance de l'objet obj, nous utilisons l'instruction new obj et attribuons le résultat (son type est obj) Donnez-lui un variable afin qu'elle puisse être consultée plus tard.
Dans l'exemple suivant, nous définissons d'abord une classe nommée Person puis créons deux instances (person1 et person2).

Copier le code Le code est le suivant :

function Person() {}
var person1 = new Person( );
var person2 = new Person( );

Voir également la nouvelle alternative d'instanciation Object.create.

Le Constructeur

Le constructeur est appelé lors de son instanciation (au moment où une instance d'objet est créée). Un constructeur est une méthode d'une classe. En JavaScript, une fonction est utilisée comme constructeur de l'objet ; il n'est donc pas nécessaire de définir explicitement une méthode constructeur. Chaque comportement déclaré dans une classe est exécuté lors de son instanciation.

Le constructeur est utilisé pour définir les propriétés de l'objet ou appeler des méthodes pour préparer l'objet à l'utilisation. Plus loin dans cet article, vous apprendrez comment ajouter des méthodes de classe et leurs définitions en utilisant une syntaxe différente.

Dans l'exemple suivant, lorsqu'une Personne est instanciée, le constructeur de la classe Personne affiche une boîte d'alerte.

Copier le code Le code est le suivant :

fonction Personne() {
alerte (« Personne instanciée »);
>
var person1 = new Person();
var person2 = new Person();

La propriété (attribut objet)

Les propriétés sont des variables contenues dans une classe ; chaque instance d'objet possède ces propriétés. Les propriétés doivent être définies dans l'attribut prototype de la classe (fonction) pour que l'héritage fonctionne correctement.
La manipulation des attributs dans une classe s'effectue grâce au mot-clé this, qui fait référence à l'objet actuel. L'accès (lecture ou écriture) à une propriété depuis l'extérieur d'une classe s'effectue via la syntaxe suivante : InstanceName.Property ; il s'agit de la même syntaxe que celle utilisée en C, Java et certains autres langages. (Utilisez la syntaxe this.Property à l'intérieur de la classe pour obtenir ou définir la valeur de la propriété).

Dans l'exemple suivant, nous définissons l'attribut genre pour la classe Person, puis définissons l'attribut lors de l'initialisation.

Copier le code Le code est le suivant :

fonction Personne(sexe) {
this.gender = genre;
alert('Person instanciated');
>
var person1 = new Person('Male'); // Mâle : male
var person2 = new Person('Female') ; // Femme : 女
//Afficher le sexe de la personne1
alert('person1 est un 'person1.gender //person1 est un homme

);

Les méthodes

Les méthodes suivent la même logique que les propriétés ; la différence est qu'elles sont des fonctions et sont définies comme des fonctions. L'appel d'une méthode est similaire à l'accès à une propriété, mais vous ajoutez () à la fin du nom de la méthode, qui peut contenir des arguments. Définir une méthode consiste à affecter une fonction à un attribut nommé sur l'attribut prototype de la classe ; le nom attribué à la fonction est le nom sous lequel la méthode est appelée sur l'objet.
Dans l'exemple suivant, nous définissons et utilisons la méthode sayHello() pour la classe Person.

Copier le code Le code est le suivant :

fonction Personne(sexe) {
this.gender = genre;
alert('Personne instanciée');
}
Person.prototype.sayHello = function() {
alert('bonjour');
};
var person1 = new Person('Male');
var person2 = new Person('Female'); // Appelez la méthode sayHello de Person.
person1.sayHello(); // bonjour

En JavaScript, les méthodes sont des objets fonction ordinaires qui sont liés à une classe/objet en tant que propriétés, ce qui signifie qu'elles peuvent être appelées « hors du contexte ». Considérons l'exemple de code suivant :

Copiez le code Le code est le suivant :

fonction Personne (genre) {
this.gender = genre;
}
Person.prototype.sayGender = function() {
alert(this.gender);
};
var person1 = new Person(' Male');
var GenderTeller = person1.sayGender;
person1.sayGender(); // alertes 'Male'
genderTeller(); // alertes non définies
alert(); GenderTeller === person1 .sayGender); // alerts true
alert(genderTeller === Person.prototype.sayGender); // alerts true

Cet exemple illustre plusieurs concepts à la fois. Cela montre qu'il n'y a pas de « méthodes par objet » en JavaScript, car toutes les références à la méthode pointent exactement vers la même fonction, celle que nous avons initialement définie sur le prototype. Lorsqu'une fonction est appelée en tant que méthode (ou propriété pour être précis), JavaScript "lie" le "contexte d'objet" actuel à la variable "this" spécifique. Cela équivaut à appeler la méthode "call" de l'objet fonction, comme suit :

Copiez le code Le code est le suivant :

genderTeller.call(person1); //alertes 'Male'e

Pour plus d'informations, voir Function.call et Function.apply

Héritage

L'héritage est une méthode permettant de créer une classe qui est une version spécialisée d'une ou plusieurs classes. (JavaScript ne prend en charge que l'héritage d'une seule classe). Cette classe spécialisée est souvent appelée l’enfant, et les autres classes sont souvent appelées le parent. En JavaScript, pour terminer l'héritage, vous devez attribuer une instance de la classe parent à la sous-classe, puis spécialiser la sous-classe.

Astuce : Puisque JavaScript ne détecte pas le prototype.constructor (constructeur du prototype) d'une sous-classe, voir Core JavaScript 1.5 Core Reference : Global Objects:Object:prototype attribut, nous devons donc spécifier manuellement cette valeur .

Dans l'exemple suivant, nous définissons la classe Student comme une sous-classe de Person. Ensuite, nous redéfinissons la méthode sayHello() et ajoutons la méthode sayGoodBye().

Copier le code Le code est le suivant :

// Définir la classe Personne
function Person() {}
Person.prototype.walk = function() {
alert('Je marche !');
} ;
Person.prototype.sayHello = function() {
alert('hello');
};
// Définir la classe Student
function Student() {
// Appelez le constructeur de la classe parent
Person.call(this);
}
// Inherit Person
Student.prototype = new Person(); // Corrigez le pointeur du constructeur, car il pointe vers Person
Student.prototype.constructor = Student; // Remplacer la méthode sayHello
Student.prototype.sayHello = function() {
alert('salut, je suis étudiant');
}
// Ajouter la méthode sayGoodBye
Student.prototype.sayGoodBye = function() {
alert('goodBye');
>
var student1 = new Student();
student1. sayHello( );
student1.walk();
student1.sayGoodBye(); // Vérifier l'héritage
alert(student1 instanceof Person); // true
alert(student1 instanceof Student); /vrai

Emballage

Dans l'exemple ci-dessus, Student n'a pas besoin de savoir comment la méthode walk() de la classe Person est implémentée, mais il peut toujours utiliser cette méthode ; la classe Student n'a pas besoin de définir explicitement cette méthode, sauf si nous le souhaitons ; changez-le. C'est ce qu'on appelle l'encapsulation, dans laquelle chaque classe hérite des méthodes de sa classe parent et définit uniquement ce qu'elle souhaite modifier.

Résumé

L'abstraction est un mécanisme qui permet de modéliser la partie actuelle du problème traité. Ceci peut être réalisé par héritage (spécialisation) ou par composition. JavaScript réalise la spécialisation grâce à l'héritage et à la composition en permettant aux instances de classe de devenir les valeurs de propriété d'autres objets.
La classe Function de JavaScript hérite de la classe Object (cela illustre la spécialisation du modèle), et la propriété Function.prototype est une instance de Object (cela illustre la composition).

Copier le code Le code est le suivant :

var foo = function() {};
alert(' foo est une fonction : ' (foo instanceof Function));
alert('foo.prototype est un objet : ' (foo.prototype instanceof Object));

Polymorphe

Tout comme toutes les méthodes et propriétés sont définies dans les attributs du prototype, différentes classes peuvent définir des méthodes portant le même nom ; la portée des méthodes est limitée à la classe dans laquelle elles sont définies. Cela n'est vrai que lorsqu'il n'y a pas de relation parent-enfant entre les deux classes (lorsqu'une classe n'hérite pas des autres classes de la chaîne d'héritage).

Conseils

Les techniques de mise en œuvre de la programmation orientée objet proposées dans cet article ne sont pas seulement applicables à JavaScript, car elles sont très flexibles en termes de programmation orientée objet.
Encore une fois, les techniques présentées ici n'utilisent aucun hack de langage ni n'imitent les implémentations de la théorie des objets dans d'autres langages.
Il existe d'autres techniques de programmation orientée objet plus avancées en JavaScript, mais celles-ci dépassent le cadre de cet article d'introduction.