Maison >interface Web >js tutoriel >Maîtriser les cours JavaScript : un guide complet de la POO moderne
Les classes JavaScript sont un sucre syntaxique par rapport à son système d'héritage prototypique. Introduites dans ES6, les classes offrent un moyen clair et structuré de définir des objets et de travailler avec l'héritage en JavaScript, rendant le code plus lisible et organisé.
Vous pouvez définir une classe en utilisant le mot-clé class.
Exemple :
class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); } } const person1 = new Person("Alice", 25); person1.greet(); // Hello, my name is Alice and I am 25 years old.
Exemple :
class Car { constructor(brand) { this.brand = brand; } } const myCar = new Car("Toyota"); console.log(myCar.brand); // Toyota
Exemple :
class Animal { sound() { console.log("Animal makes a sound"); } } const dog = new Animal(); dog.sound(); // Animal makes a sound
Exemple :
class MathUtils { static add(a, b) { return a + b; } } console.log(MathUtils.add(3, 5)); // 8
Exemple :
class Rectangle { constructor(width, height) { this.width = width; this.height = height; } get area() { return this.width * this.height; } } const rect = new Rectangle(10, 5); console.log(rect.area); // 50
L'héritage permet à une classe d'acquérir des propriétés et des méthodes d'une autre classe à l'aide du mot-clé extends.
Exemple :
class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a sound.`); } } class Dog extends Animal { speak() { console.log(`${this.name} barks.`); } } const dog = new Dog("Rex"); dog.speak(); // Rex barks.
Les champs et méthodes privés, introduits dans ES2022, commencent par un # et ne sont pas accessibles en dehors de la classe.
Exemple :
class BankAccount { #balance; constructor(initialBalance) { this.#balance = initialBalance; } deposit(amount) { this.#balance += amount; console.log(`Deposited: ${amount}`); } getBalance() { return this.#balance; } } const account = new BankAccount(100); account.deposit(50); // Deposited: 50 console.log(account.getBalance()); // 150 // console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class
Les classes peuvent également être définies comme des expressions et affectées à des variables.
Exemple :
const Rectangle = class { constructor(width, height) { this.width = width; this.height = height; } getArea() { return this.width * this.height; } }; const rect = new Rectangle(10, 5); console.log(rect.getArea()); // 50
Bien que les classes soient du sucre syntaxique, vous pouvez toujours les combiner avec l'héritage basé sur un prototype de JavaScript.
Exemple :
class Person {} Person.prototype.sayHello = function () { console.log("Hello!"); }; const person = new Person(); person.sayHello(); // Hello!
Encapsulation :
Utilisez des champs privés pour protéger les données sensibles.
Réutilisabilité :
Tirez parti de l'héritage pour réutiliser le code dans plusieurs classes.
Éviter les complications excessives :
Utilisez les cours uniquement lorsque cela est nécessaire. Des objets ou des fonctions simples peuvent suffire pour de petites tâches.
Cohérence :
Suivez les conventions de dénomination des méthodes et des propriétés pour plus de lisibilité.
Les classes JavaScript offrent un moyen propre et efficace de gérer la programmation orientée objet en JavaScript. Avec des fonctionnalités telles que l'héritage, les méthodes statiques, les champs privés et l'encapsulation, ils offrent des outils puissants pour structurer et gérer le code, facilitant ainsi la création d'applications évolutives et maintenables.
Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!