Comprendre les prototypes JavaScript : une clé pour maîtriser la POO

Étant donné que JavaScript est un langage basé sur des prototypes, les objets du langage héritent des attributs et des fonctions des prototypes. Ce modèle de conception est essentiel pour comprendre la programmation orientée objet (POO) de JavaScript. Comprendre les prototypes et comment les utiliser sera crucial si vous souhaitez en savoir plus sur JavaScript. Cet article discutera de l'idée des prototypes, de la façon de les utiliser et de la manière dont ils permettent d'obtenir un code plus efficace, réutilisable et optimisé.

Qu'est-ce qu'un objet en JavaScript ?

Avant de passer aux prototypes, clarifions ce qu'est un objet JavaScript. Un objet JavaScript est fondamentalement une collection de paires clé-valeur. Les objets JavaScript sont flexibles et peuvent être créés de différentes manières, notamment avec des fonctions d'usine, des fonctions de constructeur et des littéraux d'objet.

Création d'objets

1. Objet littéral

La façon la plus simple de créer un objet consiste à utiliser un littéral d'objet :

let obj = {
    name: 'John',
    age: 30
};

2. Fonction constructeur

Une fonction constructeur est utilisée pour créer des instances d'objets avec des propriétés similaires :

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

let person1 = new Person('Alice', 25);

3. Fonction d'usine

Une fonction d'usine renvoie un nouvel objet à chaque fois qu'elle est appelée :

function createPerson(name, age) {
    return {
        name: name,
        age: age
    };
}

let person2 = createPerson('Bob', 40);

Renvoyer des objets à partir de fonctions

Les fonctions JavaScript sont puissantes car elles peuvent renvoyer des objets, ce qui est utile pour créer des instances avec des propriétés et des méthodes spécifiques.

Exemple : renvoyer un objet à partir d'une fonction

function createCar(make, model) {
    return {
        make: make,
        model: model,
        getDetails: function() {
            return `${this.make} ${this.model}`;
        }
    };
}

let car = createCar('Toyota', 'Corolla');
console.log(car.getDetails()); // Toyota Corolla

Optimiser la création d'objets avec des prototypes

L'un des aspects clés de la nature basée sur les prototypes de JavaScript est la possibilité de définir des méthodes sur le prototype d'un objet. Cela optimise l'utilisation de la mémoire en permettant à plusieurs objets de partager les mêmes méthodes, plutôt que de les définir individuellement pour chaque objet.

Exemple d'optimisation de la mémoire

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

Person.prototype.getDetails = function() {
    return `${this.name} is ${this.age} years old`;
};

let person1 = new Person('Alice', 25);
let person2 = new Person('Bob', 30);

console.log(person1.getDetails()); // Alice is 25 years old
console.log(person2.getDetails()); // Bob is 30 years old

Dans l'exemple ci-dessus, person1 et person2 partagent la même méthode getDetails, qui est définie sur le prototype. Cela signifie qu'ils n'ont pas chacun leur propre copie de la méthode, économisant ainsi de la mémoire.

Object.create() et prototypes

La méthode Object.create() permet de créer un nouvel objet qui hérite d'un prototype spécifique.

Exemple : utilisation de Object.create()

let personProto = {
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

let person = Object.create(personProto);
person.name = 'Charlie';
person.greet(); // Hello, my name is Charlie

Dans ce cas, person hérite de personProto, ce qui signifie qu'elle a accès à la méthode greet.

Comprendre les prototypes en profondeur

Chaque objet en JavaScript possède un prototype, qui est également un objet. Cet objet prototype peut avoir ses propres propriétés et méthodes, dont l'objet hérite. Cette chaîne d'héritage est connue sous le nom de chaîne prototype.

Exemple : prototypes en action

let obj = {
    name: 'John',
    age: 30
};

Dans cet exemple, dog est une instance d'Animal et il hérite de la méthode speak d'Animal.prototype.

Fonctions de constructeur et prototypes

Les fonctions constructeur sont un moyen courant de créer plusieurs instances du même type d'objet. Ces fonctions fonctionnent conjointement avec des prototypes pour partager des méthodes entre instances.

Exemple : fonction constructeur avec méthodes prototypes

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

let person1 = new Person('Alice', 25);

Ici, book1 et book2 partagent la méthode getDetails, grâce à l'héritage du prototype.

Le nouveau mot-clé et le mot-clé this

Lorsque vous utilisez le mot-clé new avec une fonction constructeur, cela crée une nouvelle instance de l'objet et lie le mot-clé this à la nouvelle instance.

Exemple : Utilisation du nouveau mot-clé

function createPerson(name, age) {
    return {
        name: name,
        age: age
    };
}

let person2 = createPerson('Bob', 40);

Dans ce cas, le nouveau mot-clé crée une nouvelle instance de Laptop, et cela fait référence à cette instance dans le constructeur.

Syntaxe de la classe ES6

Dans ES6, JavaScript a introduit la syntaxe de classe, qui offre un moyen plus pratique et familier de définir des fonctions de constructeur et des prototypes. Cependant, il est important de noter que les classes en JavaScript ne sont que du sucre syntaxique par rapport au modèle d'héritage basé sur un prototype.

Exemple : utilisation de classes

function createCar(make, model) {
    return {
        make: make,
        model: model,
        getDetails: function() {
            return `${this.make} ${this.model}`;
        }
    };
}

let car = createCar('Toyota', 'Corolla');
console.log(car.getDetails()); // Toyota Corolla

Ici, la classe Person se comporte de manière similaire à l'exemple de fonction constructeur et de méthode prototype, mais avec une syntaxe plus concise.

Réseaux et prototypes

Les tableaux JavaScript sont des objets, et comme tous les objets, ils héritent des propriétés et des méthodes de leur prototype, Array.prototype. C'est pourquoi vous pouvez appeler des méthodes spécifiques aux tableaux comme push, pop et réduire sur les tableaux.

Exemple : Travailler avec des tableaux et des prototypes

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

Person.prototype.getDetails = function() {
    return `${this.name} is ${this.age} years old`;
};

let person1 = new Person('Alice', 25);
let person2 = new Person('Bob', 30);

console.log(person1.getDetails()); // Alice is 25 years old
console.log(person2.getDetails()); // Bob is 30 years old

Dans cet exemple, nous étendons Array.prototype pour inclure une méthode sum, qui est partagée par toutes les instances du tableau.

Conclusion

Le fondement du paradigme de programmation orientée objet de JavaScript réside dans les prototypes. Vous pouvez écrire du code plus efficace et réutilisable si vous comprenez leur fonctionnement. Voici les principales conclusions :

1. Les Les objets sont des paires clé-valeur, créées à l'aide de littéraux, de constructeurs ou de fonctions d'usine.
2. Les Prototypes permettent aux objets de partager des méthodes et des propriétés, améliorant ainsi l'efficacité de la mémoire.
3. Utilisez Object.create() pour créer des objets avec un prototype spécifié.
4. Les Fonctions constructeur et classes permettent de créer plusieurs instances d'un type d'objet, avec des méthodes définies sur le prototype.
5. Le mot-clé new crée des instances, et this fait référence à l'instance dans le constructeur.
6. Les Arrays héritent des méthodes d'Array.prototype, qui est lui-même un objet.

Vous pouvez utiliser pleinement les fonctionnalités orientées objet de JavaScript et écrire du code réutilisable et efficace en maîtrisant les prototypes. Amusez-vous avec votre codage !

Suivez-moi sur : Github Linkedin

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!