Objets JavaScript. Partie 8 Cours JavaScript de débutant à avancé en 10 articles de blog

Il s'agit de la partie 8 de la série d'articles de blog JavaScript qui vous mènera du débutant à l'avancé. Si vous n'avez pas lu le précédent article de blog sur les fonctions JavaScript, vous pouvez le vérifier ici. À la fin de cette série, vous connaîtrez toutes les bases dont vous avez besoin pour commencer à coder en JavaScript. Sans plus tarder, commençons par le huitième tutoriel.

Objets JavaScript – table des matières :

1. Objets JavaScript
2. Fonctions du constructeur d'objets

Objets JavaScript

Les objets JavaScript jouent un rôle important. Bien qu'il s'agisse d'un sujet relativement vaste, il peut également être relativement facile de développer une compréhension de ceux-ci. L'une des façons les plus courantes de comprendre les objets est d'y penser comme si vous recréiez une voiture en code. Nous aurons deux concepts principaux lorsque nous traiterons des objets. Ils auront des propriétés et des méthodes. Les propriétés sont les choses que les objets javascript ont et les méthodes sont les choses que les objets peuvent effectuer. Voyons cela avec quelques exemples.

// let's define multiple objects to have a better understanding
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "Plane starts taking off..."},
    land: function(){return "Plane starts landing..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "The car moves forward..."},
    smartSummon: function(){return "The car starts driving itself to you..."}
}

// we can access and console log the properties they have:
console.log("The properties for the plane:");
console.log("Can fly: " + plane.canFly);
console.log("Total number of wings: " + plane.numberOfWings);
// we can also make the plane perform actions
console.log(plane.takeOff());
console.log(plane.land());
// if you take a closer look, you can see that 
// we do not directly console.log the actions inside the methods
// instead we return them from the functions
// and in this case we are console logging them
// this way if we want we can also give the user an alert
// that tells the plane is taking off
alert(plane.takeOff());
// we can also learn about the properties the car has 
// and console log them as well for additional practice
console.log("Is it an electric car? " + car.isElectric);
console.log("What is the brand of the car: " + car.brand);
console.log("How many doors does it have? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Lorsque nous exécutons le code ci-dessus, nous devrions obtenir le résultat suivant :

Nous venons de voir deux exemples principaux d'objets javascript : un avec un avion et un avec une voiture. Tout comme les avions et les voitures ont des propriétés différentes et peuvent faire différentes choses, différents objets que nous créons peuvent faire différentes choses et avoir des propriétés différentes. Si vous regardez de plus près, vous pouvez commencer à voir un modèle dans la façon dont nous définissons les objets, les propriétés et les méthodes.

Nous commençons à définir des objets comme nous définissons des variables ou des constantes, dans ce cas, il suffit généralement d'utiliser des constantes lors de la définition d'objets javascript. Mais plutôt que d'attribuer simplement cette constante à une valeur, comme nous l'avons fait avec des constantes régulières, nous ouvrons et fermons maintenant un ensemble d'accolades et fournissons essentiellement les données dans des paires clé-valeur. Notez que la définition des propriétés et des méthodes est assez similaire. La principale différence est que lors de la définition des propriétés, nous attribuons les noms à une valeur que nous récupérerons plus tard. Cependant, lorsque nous définissons une méthode, nous devons fournir une fonction que nous exécuterons plus tard. Cette différence se reflète également dans la façon dont nous les appelons plus tard. Par exemple:

// when we retrieve a property we do not use brackets at the end
console.log("Can fly: " + plane.canFly);
// when we retrieve methods, 
// we also run them by adding brackets after them
// methods here are essentially functions that 
// belong to a specific object
console.log(plane.takeOff());

Il est important que nous ajoutions la parenthèse après les méthodes, comme nous l'avons fait avec les fonctions régulières. Sinon, nous aurons simplement la fonction elle-même plutôt que d'exécuter la fonction.

// in order to execute the object method we should
// add the parenthesis right after the method name
// otherwise we will get the method definition 
// like in this example
alert(plane.takeOff);

Le résultat affiché est exactement ce que nous avons défini lors de la création de la méthode. Vous pouvez également voir que nous définissons une fonction à la volée. Dans ce cas, nous définissons la fonction sans nom, ce qui est possible en JavaScript. Ce n'est pas toujours préférable, car donner un nom à la fonction la rend plus claire lorsque nous la voyons affichée. Dans ce cas cependant, nous n'utilisons la fonction nulle part ailleurs en dehors de la définition de l'objet, nous n'avons pas directement à donner un nom à la fonction. Au lieu de cela, nous pouvons faire référence à la fonction à partir de l'objet avec le nom de méthode que nous lui attribuons.

Une autre chose que vous devez savoir sur la récupération des propriétés ou des méthodes d'un objet est qu'il existe plusieurs façons d'y parvenir. Nous avons utilisé l'une des pratiques les plus courantes dans les exemples ci-dessus, qui consiste à utiliser la notation par points. Mais il existe également un autre moyen couramment utilisé pour obtenir le même résultat que vous devriez connaître. Cette deuxième notation utilise des crochets et des guillemets.

// both of them are equally valid and 
// give us the same results
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// check out the JavaScript console for the results

C'est formidable que nous puissions stocker de nombreuses propriétés et actions détaillées que nous pouvons effectuer à l'aide d'objets, mais que se passerait-il si nous avions besoin d'utiliser des objets, pas seulement pour 1 voiture, mais disons pour 20 voitures, 100 voitures ou même 1 000 000 voitures chacune avec un ID unique et valeurs de propriété variables. Devrions-nous taper tout ce code à partir de zéro pour chaque voiture ? La réponse est non. Au lieu de cela, nous pouvons tirer parti de quelque chose appelé la fonction de constructeur d'objet.

Fonctions du constructeur d'objets

Les constructeurs d'objets peuvent accélérer considérablement votre processus de codage et peuvent considérablement rendre votre code plus SEC. Avec les fonctions de constructeur d'objet, nous définissons essentiellement un plan pour l'objet. Une fois que nous avons un plan pour l'objet, nous pouvons créer autant d'instances de cet objet d'une manière beaucoup plus claire, avec beaucoup moins de répétitions. Voyons cela avec quelques exemples.

// this is how we define a blueprint for the objects
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// this is how we can instanciate the 
// javascript objects we want to create from 
// the blueprint we defined above
// in this case we create 3 car objects 
// with diffent values for the properties
const car1 = new Car(1, "white", true, 4);
const car2 = new Car(2, "black", true, 2);
const car3 = new Car(3, "red", false, 4);
// we can access object properties just like we did before
console.log("Color of first car is: " + car1.color);
console.log("Color of second car is: " + car2.color);
console.log("Color of third car is: " + car3.color);

L'exécution du code ci-dessus nous donnerait la sortie de code suivante :

Comme vous pouvez le voir dans le code ci-dessus, une fois que nous avons un plan, nous pouvons simplement passer différentes valeurs pour créer différents objets javascript à partir du plan initial. Une chose que vous avez probablement remarquée est que la convention de dénomination pour le constructeur d'objet est d'avoir la première lettre en majuscule. Dans ce cas, plutôt que de le définir comme "voiture", nous l'avons nommé "Voiture". Si nous devions créer une classe d'avion, nous l'appellerions "Plane".

Lorsque nous voulons créer des objets à partir de notre plan défini, nous utilisons le mot-clé "nouveau" puis écrivons le nom de la fonction constructeur d'objet que nous voulons utiliser. Après le nom, nous ouvrons et fermons un ensemble de parenthèses et passons les arguments avec lesquels nous voulons créer notre objet. Notez que nous ne répétons pas les noms des paramètres, nous passons simplement les valeurs dans le même ordre que les paramètres. Vous avez peut-être également remarqué que lors de la création du plan directeur, nous utilisons un mot-clé appelé "ceci". Pour l'instant, ce que vous devez savoir, c'est que le mot-clé "this" permet de faire référence à l'objet lui-même, et il fait partie du code passe-partout que nous devons écrire lorsque nous créons le plan de l'objet.

Lorsque vous apprenez à coder, vous pouvez entendre le terme "code passe-partout", c'est en fait assez courant, en particulier dans le développement Web. Cela signifie essentiellement qu'il y a des parties de code que nous écrivons pour mettre en place certaines configurations. Même s'il n'y a pas de solution unique que nous fournissons avec le code, nous devons écrire ces parties pour avoir un code fonctionnel. Selon le code passe-partout, certains IDE fournissent même des raccourcis pour fournir ces codes passe-partout.

Les objets javascript que nous venons d'apprendre sont un vaste sujet et contiennent de nombreux détails au fur et à mesure que nous approfondissons. Mais à un niveau fondamental, vous devez savoir que nous pouvons imiter des objets réels avec du code utilisant des objets. Ces objets javascript peuvent avoir différentes propriétés et méthodes auxquelles nous pouvons accéder et exécuter.

Dans le prochain tutoriel, nous découvrirons plus de sujets et de concepts assez importants et couramment utilisés en JavaScript.

Auteur : Robert Whitney

Expert JavaScript et instructeur qui coache les départements informatiques. Son objectif principal est d'augmenter la productivité de l'équipe en enseignant aux autres comment coopérer efficacement lors du codage.

Afficher tous les articles

Cours JavaScript de débutant à avancé en 10 articles de blog :

1. Comment commencer à coder en JavaScript ?
2. Principes de base de JavaScript
3. Variables et différents types de données en JavaScript
4. Extraits de code et structures de contrôle
5. Boucles While et boucles for
6. Tableau Java
7. Fonctions JavaScript
8. Objets JavaScript
9. Méthodes JavaScript et plus
10. Résumé du cours JavaScript