Maison > interface Web > js tutoriel > le corps du texte

Une introduction à la programmation orientée objet JavaScript que même les novices peuvent comprendre

王林
Libérer: 2023-06-15 21:04:56
original
898 Les gens l'ont consulté

JavaScript est un langage de programmation Web qui peut rendre les sites Web plus interactifs, dynamiques et réactifs. Avec le développement continu de JavaScript, la programmation orientée objet est devenue un concept central de la programmation JavaScript. Cependant, les débutants peuvent se sentir confus lorsqu'ils apprennent ce concept, c'est pourquoi cet article vous présentera les bases de la programmation orientée objet en JavaScript.

1. Qu'est-ce que la programmation orientée objet ?

La programmation orientée objet (POO) est un modèle de programmation qui combine des données et des comportements dans des objets soigneusement conçus. En JavaScript, les objets peuvent contenir des propriétés (données) et des méthodes (comportement) qui peuvent être partagées et réutilisées avec d'autres objets. Avec la programmation orientée objet, vous pouvez mieux organiser et gérer les données et le comportement lors de l'écriture de code JavaScript, améliorant ainsi la réutilisabilité et la maintenabilité de votre code.

2. Objets en JavaScript

En JavaScript, les objets sont une structure de données très basique. Chaque objet possède un ensemble de propriétés et de méthodes, accessibles à l'aide de la notation par points ou de crochets.

Par exemple, si nous créons un objet nommé Person, il pourrait avoir des propriétés comme celle-ci :

var Person = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};
Copier après la connexion

Le code ci-dessus définit un objet nommé "Person", et il a trois propriétés : firstName, lastName et age. Ces propriétés sont accessibles en utilisant la notation par points, par exemple :

console.log(Person.firstName); //输出“John”
Copier après la connexion

3. Constructeur en JavaScript

Un constructeur est une fonction qui crée de nouveaux objets et initialise les propriétés et méthodes de ces objets. Le nom d'un constructeur doit commencer par une lettre majuscule pour le distinguer des autres fonctions. En JavaScript, nous pouvons utiliser des constructeurs pour créer des objets. Par exemple, dans l'extrait de code suivant, nous définissons un constructeur appelé "Person":

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}
Copier après la connexion

Lorsque nous créons un nouvel objet à l'aide du constructeur ci-dessus, nous attribuerons des valeurs aux propriétés firstName, lastName et age. Par exemple :

var john = new Person("John", "Doe", 30);
Copier après la connexion

Le code ci-dessus crée un nouvel objet nommé "john" et attribue des valeurs à ses propriétés firstName, lastName et age. Nous pouvons accéder à ces propriétés en utilisant la notation par points ou entre crochets, par exemple :

console.log(john.firstName); //输出“John”
Copier après la connexion

4. Objets prototypes en JavaScript

En JavaScript, chaque objet a un objet prototype, qui contient les propriétés et méthodes partagées par l'objet. Les objets prototypes nous permettent de partager des propriétés et des méthodes entre tous les objets, ce qui réduit la duplication de code et améliore la maintenabilité du code. Dans l'exemple de code suivant, nous définissons un constructeur nommé "Person" et ajoutons une méthode nommée "getFullName" à son objet prototype :

function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}

Person.prototype.getFullName = function() {
    return this.firstName + " " + this.lastName;
};
Copier après la connexion

Le code ci-dessus définit un constructeur nommé "Person" et attachons son objet prototype à une méthode appelée "getFullName". Dans l'exemple suivant, nous créons un objet nommé "john" à l'aide du constructeur et appelons la méthode getFullName de l'objet :

var john = new Person("John", "Doe", 30);
console.log(john.getFullName()); //输出“John Doe”
Copier après la connexion

Avec l'exemple ci-dessus, nous pouvons voir comment utiliser des objets prototypes pour partager du code JavaScript et le rendre plus facile à maintenir.

5. L'héritage en JavaScript

L'héritage est un moyen pour un objet d'obtenir les propriétés et les méthodes d'un autre objet. En JavaScript, nous pouvons utiliser la chaîne de prototypes pour implémenter l'héritage. Le chaînage de prototypes est une technique qui fait pointer le prototype d'un objet vers un autre objet, lui permettant d'obtenir les propriétés et méthodes de l'autre objet. Dans l'exemple de code suivant, nous allons créer un constructeur appelé "Employee" et l'ajouter à l'objet prototype de "Person":

function Employee(firstName, lastName, age, jobTitle) {
    Person.call(this, firstName, lastName, age);
    this.jobTitle = jobTitle;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Copier après la connexion

Le code ci-dessus définit un constructeur appelé "Employee" et l'ajouter à l'objet prototype de "Person ". Lorsqu'un nouvel objet est créé, le constructeur appellera le constructeur de "Person" et l'ajoutera au nouvel objet en tant que nouvel attribut "jobTitle". Enfin, nous implémentons l'héritage en définissant l'objet prototype de « Employé » sur l'objet prototype de « Personne » et en définissant son constructeur sur « Employé ».

6. Conclusion

Dans cet article, nous avons présenté les bases de la programmation orientée objet en JavaScript. En utilisant des constructeurs, des objets prototypes et l'héritage, nous pouvons mieux organiser et gérer le code JavaScript, améliorant ainsi la réutilisabilité et la maintenabilité du code. J'espère que cet article pourra aider les nouveaux arrivants à mieux comprendre la programmation orientée objet JavaScript et à commencer à créer de meilleures applications JavaScript.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!