Classes JavaScript

Dans ce didacticiel, vous découvrirez les classes JavaScript à l'aide d'exemples.

Les classes sont l'une des fonctionnalités introduites dans la version ES6 de JavaScript.

Une classe est un plan pour l'objet. Vous pouvez créer un objet à partir de la classe.

Vous pouvez considérer la classe comme un croquis (prototype) d'une maison. Il contient tous les détails sur les sols, les portes, les fenêtres, etc. Sur la base de ces descriptions, vous construisez la maison. La maison est l'objet.

Comme de nombreuses maisons peuvent être fabriquées à partir de la même description, nous pouvons créer de nombreux objets à partir d'une classe.

Créer une classe JavaScript

La classe JavaScript est similaire à la fonction de constructeur Javascript, et ce n'est qu'un sucre syntaxique.

La fonction constructeur est définie comme:

 // constructor function function Person () ( this.name = 'John', this.age = 23 ) // create an object const person1 = new Person();

Au lieu d'utiliser le functionmot - clé, vous utilisez le classmot - clé pour créer des classes JS. Par exemple,

 // creating a class class Person ( constructor(name) ( this.name = name; ) )

Le classmot-clé est utilisé pour créer une classe. Les propriétés sont affectées dans une fonction constructeur.

Vous pouvez maintenant créer un objet. Par exemple,

 // creating a class class Person ( constructor(name) ( this.name = name; ) ) // creating an object const person1 = new Person('John'); const person2 = new Person('Jack'); console.log(person1.name); // John console.log(person2.name); // Jack

Ici, person1et person2 sont des objets de Personclasse.

Remarque : La constructor()méthode à l'intérieur d'une classe est appelée automatiquement chaque fois qu'un objet est créé.

Méthodes de classe Javascript

Lors de l'utilisation de la fonction constructeur, vous définissez les méthodes comme suit:

 // constructor function function Person (name) ( // assigning parameter values to the calling object this.name = name; // defining method this.greet = function () ( return ('Hello'' + ' ' + this.name); ) )

Il est facile de définir des méthodes dans la classe JavaScript. Vous donnez simplement le nom de la méthode suivi de (). Par exemple,

 class Person ( constructor(name) ( this.name = name; ) // defining method greet() ( console.log(`Hello $(this.name)`); ) ) let person1 = new Person('John'); // accessing property console.log(person1.name); // John // accessing method person1.greet(); // Hello John

Remarque : Pour accéder à la méthode d'un objet, vous devez appeler la méthode en utilisant son nom suivi de ().

Getters et Setters

En JavaScript, les méthodes getter obtiennent la valeur d'un objet et les méthodes setter définissent la valeur d'un objet.

Les classes JavaScript peuvent inclure des getters et des setters. Vous utilisez le getmot - clé pour les méthodes getter et setpour les méthodes setter. Par exemple,

 class Person ( constructor(name) ( this.name = name; ) // getter get personName() ( return this.name; ) // setter set personName(x) ( this.name = x; ) ) let person1 = new Person('Jack'); console.log(person1.name); // Jack // changing the value of name property person1.personName = 'Sarah'; console.log(person1.name); // Sarah

Levage

Une classe doit être définie avant de l'utiliser. Contrairement aux fonctions et autres déclarations JavaScript, la classe n'est pas hissée. Par exemple,

 // accessing class const p = new Person(); // ReferenceError // defining class class Person ( constructor(name) ( this.name = name; ) )

Comme vous pouvez le voir, accéder à une classe avant de la définir génère une erreur.

'utiliser strict'

Les classes suivent toujours «use-strict». Tout le code à l'intérieur de la classe est automatiquement en mode strict. Par exemple,

 class Person ( constructor() ( a = 0; this.name = a; ) ) let p = new Person(); // ReferenceError: Can't find variable: a

Remarque : la classe JavaScript est un type spécial de fonction. Et l' typeofopérateur retourne functionpour une classe.

Par exemple,

 class Person () console.log(typeof Person); // function

Articles intéressants...