Accès aux propriétés en profondeur

JavaScript est un langage de programmation polyvalent et puissant largement utilisé dans le développement Web. L'une de ses fonctionnalités clés est la possibilité de définir des objets, qui peuvent encapsuler des propriétés et des méthodes. Parmi les différentes manières d’interagir avec ces objets, les accesseurs jouent un rôle crucial.

Approfondissons l'accès aux propriétés en JavaScript.

Recette de gâteau aux carottes avec des objets JavaScript

Créons un objet JavaScript représentant une recette de Carrot Cake. Nous utiliserons à la fois la notation par points et la notation par parenthèses pour accéder à ses propriétés.

Étape 1 : Définir l'objet Carrot Cake

Nous définirons un objet qui inclut des propriétés telles que les ingrédients, le temps de cuisson et les instructions.

const carrotCake = {
    name: 'Carrot Cake',
    ingredients: {
        flour: '2 cups',
        sugar: '1 cup',
        carrots: '2 cups grated',
        eggs: '3 large',
        oil: '1 cup',
        bakingPowder: '2 tsp',
        cinnamon: '1 tsp',
        salt: '1/2 tsp'
    },
    bakingTime: '45 minutes',
    instructions: [
        'Preheat the oven to 350°F (175°C).',
        'In a bowl, mix flour, sugar, baking powder, cinnamon, and salt.',
        'In another bowl, whisk eggs and oil together.',
        'Combine the wet and dry ingredients, then fold in grated carrots.',
        'Pour the batter into a greased cake pan.',
        'Bake for 45 minutes or until a toothpick comes out clean.',
        'Let cool before serving.'
    ]
};

Étape 2 : Accéder aux propriétés à l'aide de la notation par points

Vous pouvez accéder aux propriétés de l'objet carrotCake en utilisant la notation par points :

console.log(carrotCake.name); // Outputs: Carrot Cake
console.log(carrotCake.bakingTime); // Outputs: 45 minutes
console.log(carrotCake.ingredients.flour); // Outputs: 2 cups

Étape 3 : Accéder aux propriétés à l'aide de la notation entre crochets

Vous pouvez également utiliser la notation entre crochets, particulièrement utile pour les propriétés avec des espaces ou lors de l'utilisation de clés dynamiques :

console.log(carrotCake['name']); // Outputs: Carrot Cake
console.log(carrotCake['bakingTime']); // Outputs: 45 minutes
console.log(carrotCake['ingredients']['sugar']); // Outputs: 1 cup

Étape 4 : Parcourir les ingrédients

Vous pouvez parcourir les ingrédients en utilisant une boucle for...in pour afficher tous les ingrédients :

for (const ingredient in carrotCake.ingredients) {
    console.log(`${ingredient}: ${carrotCake.ingredients[ingredient]}`);
}

Cela affichera :

flour: 2 cups
sugar: 1 cup
carrots: 2 cups grated
eggs: 3 large
oil: 1 cup
bakingPowder: 2 tsp
cinnamon: 1 tsp
salt: 1/2 tsp

Que sont les accesseurs d’objets JavaScript ?

Les

Accesseurs sont des méthodes qui obtiennent ou définissent la valeur de la propriété d'un objet. Ils se présentent sous deux formes : les getters et les setters.

Getters : méthodes qui obtiennent la valeur d'une propriété.

Setters : méthodes qui définissent la valeur d’une propriété.

Ces accesseurs fournissent un moyen de contrôler la façon dont les propriétés sont accessibles et modifiées. Cela peut être utile pour la validation des données, l'encapsulation et la fourniture de propriétés calculées.

Définir les getters et les setters

En JavaScript, vous pouvez définir des getters et des setters dans un littéral d'objet ou en utilisant la méthode Object.defineProperty.

Utiliser des littéraux d'objet

Voici un exemple de la façon de définir des getters et des setters dans un objet littéral :

let person = {
    firstName: "Irena",
    lastName: "Doe",
    get fullName() {
        return `${this.firstName} ${this.lastName}`; // Returns full name
    },
    set fullName(name) {
        let parts = name.split(' '); // Splits the name into parts
        this.firstName = parts[0]; // Sets first name
        this.lastName = parts[1]; // Sets last name
    }
};

console.log(person.fullName); // Outputs: Irena Doe
person.fullName = "Jane Smith"; // Updates first and last name
console.log(person.firstName); // Outputs: Jane
console.log(person.lastName); // Outputs: Smith

Définition de l'objet : vous avez défini un objet nommé personne avec les propriétés firstName et lastName.

• Getter : le getter fullName concatène firstName et lastName pour renvoyer le nom complet lors de l'accès.
• Setter : le setter fullName divise une chaîne de nom complet fournie en parties et attribue la première partie à firstName et la deuxième partie à lastName. Usage: Lorsque vous enregistrez person.fullName, il affiche correctement "Irena Doe". Après avoir défini person.fullName sur "Jane Smith", les propriétés firstName et lastName sont mises à jour en conséquence.

Pour illustrer la différence entre les getters/setters et la notation point/support, améliorons un exemple de Carrot Cake. Nous allons créer un objet avec à la fois un accès direct à la propriété et un accès à la propriété via des getters et des setters.
Étape 1 : Définir l'objet Carrot Cake
Nous allons définir un objet carrotCake qui utilise à la fois des propriétés directes et des getters/setters pour des propriétés spécifiques.

const carrotCake = {
    name: 'Carrot Cake',
    ingredients: {
        flour: '2 cups',
        sugar: '1 cup',
        carrots: '2 cups grated',
        eggs: '3 large',
        oil: '1 cup',
        bakingPowder: '2 tsp',
        cinnamon: '1 tsp',
        salt: '1/2 tsp'
    },
    bakingTime: '45 minutes',
    instructions: [
        'Preheat the oven to 350°F (175°C).',
        'In a bowl, mix flour, sugar, baking powder, cinnamon, and salt.',
        'In another bowl, whisk eggs and oil together.',
        'Combine the wet and dry ingredients, then fold in grated carrots.',
        'Pour the batter into a greased cake pan.',
        'Bake for 45 minutes or until a toothpick comes out clean.',
        'Let cool before serving.'
    ]
};

• Étape 2 : Accéder aux propriétés à l'aide de la notation par points et parenthèses Utilisons la notation par points pour accéder et modifier directement les propriétés :

console.log(carrotCake.name); // Outputs: Carrot Cake
console.log(carrotCake.bakingTime); // Outputs: 45 minutes
console.log(carrotCake.ingredients.flour); // Outputs: 2 cups

• Étape 3 : Accéder aux propriétés à l'aide de getters et de setters Maintenant, accédons et modifions les propriétés à l'aide des getters et des setters :

console.log(carrotCake['name']); // Outputs: Carrot Cake
console.log(carrotCake['bakingTime']); // Outputs: 45 minutes
console.log(carrotCake['ingredients']['sugar']); // Outputs: 1 cup

• Étape 4 : Mise à jour des ingrédients Utiliser une méthode pour mettre à jour les ingrédients :

for (const ingredient in carrotCake.ingredients) {
    console.log(`${ingredient}: ${carrotCake.ingredients[ingredient]}`);
}

Récapitulons les différences

Notation par points/supports :

• Acède ou modifie directement les propriétés.
• Aucune validation ou logique n'est appliquée. Par exemple, carrotCake._name = ''; écraserait le nom sans vérification. ###Getters/Setters :
• Fournit un moyen contrôlé d'accéder et de modifier les propriétés.
• Peut inclure une logique personnalisée, comme la validation dans le setter. Par exemple, carrotCake.name = ''; empêche de définir un nom vide.

Cet exemple illustre comment vous pouvez utiliser les deux approches dans un objet JavaScript et met en évidence les avantages des getters et des setters pour encapsuler la logique et garantir l'intégrité des données.

Avantages de l'utilisation des accesseurs

• Encapsulation
  Les accesseurs vous permettent de masquer la représentation interne d'un objet tout en exposant une interface plus propre. Il s'agit d'un principe fondamental de l'encapsulation dans la programmation orientée objet.

• Validation
  Les setters peuvent être utilisés pour valider les données avant de mettre à jour une propriété. Cela garantit que l'objet reste dans un état valide.

Résumé

Dans cet exemple, nous avons créé un objet JavaScript simple pour représenter une recette de gâteau aux carottes. Nous avons accédé à ses propriétés en utilisant à la fois la notation par points et par crochets, démontrant à quel point les accesseurs de propriétés peuvent être polyvalents en JavaScript.

Les accesseurs d'objets JavaScript sont une fonctionnalité puissante qui améliore la façon dont vous interagissez avec les propriétés des objets. En utilisant des getters et des setters, vous pouvez ajouter une encapsulation, une validation, des propriétés calculées et des propriétés en lecture seule à vos objets. Comprendre et utiliser ces accesseurs peut conduire à un code plus robuste, plus maintenable et plus propre. Au fur et à mesure que vous continuez à explorer et à maîtriser JavaScript, l’intégration d’accesseurs dans vos objets sera sans aucun doute un outil précieux dans votre boîte à outils de programmation.

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!