ceci dans les objets JavaScript
Qu'est-ce que ceci ?
En JavaScript, le mot-clé ceci fait référence à un objet .
Le mot-clé ceci fait référence à différents objets selon la manière dont il est utilisé :
Seul, ceci fait référence à l' objet global . |
Dans une fonction, ceci fait référence à l' objet global . |
Dans une fonction, en mode strict, ceci est indéfini . |
Dans une méthode d'objet, ceci fait référence à l' objet . |
Dans un événement, ceci fait référence à l' élément qui a reçu l'événement. |
Des méthodes comme call() , apply() , et bind() peuvent référencer ceci à n'importe quel objet . |
Remarque
ceci n'est pas une variable.
ceci est un mot-clé.
Vous ne pouvez pas changer la valeur de ceci .
ceci dans une méthode
Lorsqu'il est utilisé dans une méthode d'objet, ceci fait référence à l' objet .
Dans l'exemple en haut de cette page, ceci fait référence à l'objet personne .
Cela est dû au fait que la méthode fullName est une méthode de l'objet personne .
Exemple
const personne = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return ceci .firstName + " " + ceci .lastName;
}
}; Liaison de méthode d'objet
Dans ces exemples, ceci est l' objet personne :
Exemple
const personne = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return ceci ;
}
}; Exemple
const personne = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return ceci .firstName + " " + ceci .lastName;
}
}; Autrement dit, ceci.firstName est la propriété firstName de ceci (l'objet personne).
Liaison explicite de fonction
Les méthodes call() et apply() sont des méthodes JavaScript prédéfinies.
Elles peuvent toutes deux être utilisées pour appeler une méthode d'objet avec un autre objet comme argument.
Voir aussi :
L'exemple ci-dessous appelle person1.fullName avec person2 comme argument, ceci fait référence à person2, même si fullName est une méthode de person1 :
Exemple
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
// Retourne "John Doe" :
person1.fullName.call(person2);
Emprunt de fonction
Avec la méthode bind() , un objet peut emprunter une méthode d'un autre objet.
Cet exemple crée 2 objets (personne et membre).
L'objet membre emprunte la méthode fullName de l'objet personne :
Exemple
const personne = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const membre = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = personne.fullName.bind(membre); Ceci Précédence
Utilisez la priorité suivante pour déterminer à quel objet ceci fait référence :
| Ordre | Objet | Parce que |
|---|---|---|
| 1 | bind() | ceci est dans une fonction appelée avec bind() |
| 2 | apply() | ceci est dans une fonction appelée avec apply() |
| 2 | call() | ceci est dans une fonction appelée avec call() |
| 3 | Méthode d'objet | ceci est dans une fonction d'objet (méthode) |
| 4 | Portée globale | ceci est dans une fonction dans la portée globale |
JavaScript Global Ceci
En JavaScript, globalThis est un objet intégré spécial qui fournit un moyen standard d'accéder à l'objet global, peu importe l'environnement dans lequel votre code s'exécute - que ce soit un navigateur, Node.js, un Web Worker ou un autre runtime JS.
L'objet global est l'objet de niveau supérieur dans un environnement JavaScript :
- Dans les navigateurs, c'est window .
- Dans Node.js, c'est global .
- Dans les Web Workers, c'est self .
Chaque environnement avait autrefois son propre nom pour cet objet. Cela a causé des problèmes de compatibilité pour le code destiné à s'exécuter partout.
globalThis a été introduit dans ECMAScript 2020 (ES11) pour résoudre ce problème. C'est une référence unifiée à l'objet global, peu importe l'environnement.
Exemple
globalThis === window); // vrai dans les navigateurs
globalThis === global); // vrai dans Node.js En savoir plus :
Définitions d'objets JavaScript
Constructeurs d'objets JavaScript
Déstructuration d'objets JavaScript
Prototypes d'objets JavaScript
Itérations d'objets JavaScript
Accesseurs et mutateurs d'objets JavaScript