0% ont trouvé ce document utile (0 vote)

8 vues61 pages

Introduction aux Objets en JavaScript

Ce document présente une introduction aux objets en JavaScript, en expliquant la différence entre les types primitifs et les types objets. Il aborde également la syntaxe littérale pour définir des objets, l'accès aux propriétés d'un objet, ainsi que la modification de ces propriétés. Enfin, il traite des objets en tant que paramètres de fonction et des méthodes associées à leur manipulation.

Transféré par

dioumadione004

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

0% ont trouvé ce document utile (0 vote)

8 vues61 pages

Introduction aux Objets en JavaScript

Transféré par

dioumadione004

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Introduction aux objets

en JavaScript
Amadou Lamine NDIAYE

dernière modification 15/11/2023 © ISEP-2024 alndiaye 1

Types primitif / type objet
• Type primitif
• Une variable de type primitif ne stocke qu’une simple valeur (chaîne de caractères,
nombre, booléen…)
• Type objet
• Un objet permet de définir des entités plus complexes en regroupant un ensemble de
valeurs pouvant être soit des valeurs primitives soit d’autres objets.

let jedi = {
nom : 'Skywalker',
let nom = 'Skywalker'; prenom: 'Luke';
}

nom 'Skywalker'
nom 'Skywalker' jedi
prénom 'Luke'

variable de type primitif variable de type objet

la variable stocke la valeur la variable stocke la référence (adresse) de l'objet

dernière modification 15/11/2023 © ISEP-2024 alndiaye 2

JavaScript et programmation orientée objet
• JavaScript permet l'utilisation d'objets et dispose d'objets natifs mais n'est pas
à proprement parler un langage orienté objet au sens classique du terme
• ne fournit pas d'éléments de langage pour supporter ce paradigme (par exemple pas de
notion explicite de classe comme en Java, C++) mais émule certains de ses principes

• Deux types d’objets

• Objets natifs
• types prédéfinis : Array, String, Date …
• objets liés à l'environnement d'exécution
• window , document … dans le navigateur
• process … dans NodeJs
• Objets personnalisés
• types définis par l'application

dernière modification 15/11/2023 © ISEP-2024 alndiaye 3

Syntaxe littérale
• objet JavaScript = une collection de valeurs nommées (propriétés ou attributs).
• sous sa forme littérale un objet est défini par :
• un ensemble de couples nom : valeur, séparés par des , et délimité par { }
un nom : Félicité
des activités préférées:
code JavaScript : Littéral Objet
dormir,
un âge : 10 ans manger du thon, une variable référence
grimper aux arbres

une race :
chat de gouttière let felicite = {
le nom d'une propriété "nom": "Félicité",
peut être n'importe quelle age: 10,
objet représentant ce chat chaîne de caractères (les race: "chat de gouttière",
guillemets sont facultatifs
sauf si le nom est une aime: ["manger du thon",
nom : "Félicité"
chaîne qui ne correspond "grimper aux arbres",
age : 10 pas à un identificateur "dormir"],
race : "chat de goutière" valide *)
aime : [
};
"manger du thon",
"grimper aux arbres"
trailing comma facultative
"dormir"] facilite ajout, suppression, déplacement de propriétés

*chaîne sans espaces ni caractères spéciaux (hormis $ et _ ) et ne commençant pas par un chiffre

dernière modification 15/11/2023 © ISEP-2024 alndiaye 4

Syntaxe littérale
• Objet javascript = un ensemble de propriétés (couples nom : valeur)
• Valeur d'une propriété peut être définie par n'importe quelle expression, et même depuis un autre objet littéral
objet représentant let elodie = {
le chat Félicité nom: "DUPONT",
prenom: "Elodie",
nom : "Félicité" age : 19,
nom : "Félix"
age : 10 age : 10 adresse: {
race : "chat de goutière" race : "siamois" no: 135,
aime : [ aime : [ objet littéral
"manger du thon", rue: "Rue de la Gare",
"grimper aux arbres"
… imbriqué
] codePostal: 38000,
"dormir"] , ,
maitre:
ville: "GRENOBLE"
maitre:
} ,
};
références
d'objets let felicite = {
nom: "Félicité",
nom: "DUPONT" age : 10, let felix = {
prenom : "Elodie"
age : 19 race : "chat de gouttière", nom: "Félix",
adresse: aime : [ age : 10,
"manger du thon", race : "Siamois",
no: 135
objet représentant rue : "Rue de la Gare" "grimper aux arbres", aime : [
Elodie DUPONT codePostal: 38000 "dormir" ...
ville: GRENOBLE ],
],
référence
une adresse maitre: elodie , maitre: elodie ,
}; };

dernière modification 15/11/2023 © ISEP-2024 alndiaye 5

Références
• Pour désigner des objets on utilise des variables d’un type particulier : les références
• Une référence contient l’adresse d’un objet (elle pointe vers la structure de données correspondant aux
propriétés (attributs) de l'objet)
• Affecter une référence à une autre référence consiste à recopier les pointeurs
• Une référence peut posséder la valeur null (aucun objet n’est accessible par cette référence)

point1 x : 10 let point1 = {

y: 10
x : 10,
y : 10
};
point2 x : 10 let point2 = {
y: 10
x : 10,
y : 10
point3 };

let point3 = point2;

une référence n’est pas un objet, c’est un nom pour

point4 accéder à un objet
référence null let point3 = null;

dernière modification 15/11/2023 © ISEP-2024 alndiaye 6

Accès à la valeur d'une propriété d’un objet
• notation pointée [Link]été

if ([Link] > 2) { ne peut être utilisée que si le nom de la propriété est un

[Link]("MAAOUU"); identificateur valide (chaîne sans espaces ni caractères
} else { spéciaux (hormis $ et _ ) et ne correspondant pas à un
[Link]("miaou"); mot réservé du langage)
}

• notation crochets (brackets) ref[expressionDeTypeString]

if (felicite["age"] > 2) { une alternative à la notation pointée, indispensable

... si le nom de la propriété ne correspond pas à un
identificateur valide

dernière modification 15/11/2023 © ISEP-2024 alndiaye 7

Accès à la valeur d'une propriété d’un objet
let myObject = {
nom : "attribut dont le nom est un identificateur",
$nom : "autre attribut 'normal'",
let : 'attribut dont le nom est un mot réservé',
15 : 'attribut dont le nom est un entier',
14 : 'attribut dont le nom est un entier',
1.5 : "attribut dont le nom est un nombre flottant",
"le prenom" : 'attribut dont le nom est un chaîne avec espaces',
"5aaaaa" : "un attribut dont le nom n'est pas un identificateur valide"
};
nom de la propriété notation pointée notation crochets
nom [Link] myObject["nom"]
$nom myObject.$nom myObject["$nom"]
let [Link] myObject["let"]
15 - myObject["15"] mais aussi myObject[15]
Obligatoire si le
14 - myObject["14"] mais aussi myObject[14] nom de la propriété
1.5 - myObject["1.5"] n'est pas un
identificateur
le prenom - myObject["le prenom"] valide
5aaaaa - myObject["5aaaaa"]
dernière modification 15/11/2023 © ISEP-2024 alndiaye 8
Accès à la valeur d'une propriété d’un objet
let elodie = { • accès à la valeur d'attributs d'objets imbriqués
nom: "DUPONT",
prenom: "Elodie", age :
19, adresse: { ex : accès au nom du maître de Félicité
no: 135,
rue: "Rue de la Gare",

• notation pointée
codePostal: 38000, ville:
"Grenoble"
} ,
presenteToi: function() {
return "Bonjour, mon nom est " + [Link];
[Link] + " " +
[Link];
}
}; • notation crochets (brackets)
let felicite = { felicite["maitre"]["nom"]
nom: "Félicité",
age : 10,
race : "chat de gouttière",
• possibilité de mélanger les différentes
aime : [ notations
"manger du thon", felicite["maitre"].nom
"grimper aux arbres" ,
"dormir"
], [Link]["nom"]
maitre: elodie
};
dernière modification 15/11/2023 © ISEP-2024 alndiaye 9
Accès à la valeur d'une propriété d’un objet
• Si on accède à un propriété qui n'existe pas la valeur retournée est undefined
let felicite = {
"nom": "Félicité",
age : 10, [Link] → undefined
race : "chat de gouttière",
aime : [
"manger du thon",
"grimper aux arbres",
"dormir"
]
};

• L'opérateur in permet de tester l'existence d'une propriété

"age" in felicite → true

"poids" in felicite → false

l'opérande gauche de in est une chaîne de caractères ou si c'est une expression d'un autre type elle sera
convertie en chaîne de caractères
dernière modification 15/11/2023 © ISEP-2024 alndiaye 10
Accès à la valeur d'une propriété d’un objet
• chaîne de propriétés
erreur pour
le 2ème chat
(Félix n'a pas
de maître)

P:\M2CCI> node
.\[Link] Félicité
a pour maitre Elodie
habitant à Grenoble
[Link]
a pour maitre ${chats[i].[Link]}
^

TypeError: Cannot read properties of undefined (reading

'prenom') at Object.<anonymous>
(P:\M2CCI\[Link]:39)
...

[Link] v17.7.2
P:\M2CCI>

dernière modification 15/11/2023 © ISEP-2024 alndiaye 11

Accès à la valeur d'une propriété d’un objet
• chaîne de propriétés
• opérateur .? + détails sur MDN
• fonctionne de manière similaire à opérateur . mais si sur le
chemin une référence est undefined ou null l'expression
se court-circuite et renvoie la valeur undefined

dernière modification 15/11/2023 © ISEP-2024 alndiaye 12

Accès à la valeur d'une propriété d’un objet
• la boucle for … in permet d'énumérer toutes les propriétés d'un objet
for (let nomProp in unObjet) {
// exécute le corps de la boucle pour chacun
// des noms de propriété de l'objet unObjet
}

boucle for-in la variable prop contient le

nom de la propriété

for (let prop in felicite) {

[Link]("ce chat a une propriété : " + prop);
c'est une chaîne de caractères
if (prop === "maitre") {
[Link]("Ce chat a pour maitre :");
[Link](felicite[prop]);
}
utilisation de la notation
tableau pour accéder à la
} valeur de la propriété

dernière modification 15/11/2023 © ISEP-2024 alndiaye 13

Accès à la valeur d'une propriété d’un objet
• dans quel ordre les propriétés de l'objet sont-elles accédées avec une boucle for … in ?

Les propriétés "entières" sont triées par

ordre croissant et affichées en premier

Les autres propriétés apparaissent dans

leur ordre de création

dernière modification 15/11/2023 © ISEP-2024 alndiaye 14

Modification des propriétés d’un objet
• changer la valeur d'une propriété
• Par affectation directe
[Link] = "mélange Chartreux et " + [Link];
• Par opérateur
[Link]++;

• Par appel d'une méthode (si la propriété est un objet ou un pseudo objet)
[Link]("faire ses griffes sur le canapé");

• ajouter une propriété

• si une affectation concerne une propriété non définie, une nouvelle propriété est crée
[Link] = 3.5; // à partir de ce point l'objet félicité a une propriété poids

• supprimer une propriété

• opérateur delete permet de supprimer un propriété d'un objet
delete [Link]; // à partir de ce point félicité.poids est undefined