L'auteur du document, dont nous publions la traduction aujourd'hui, dit que lorsqu'elle travaillait en comptabilité, des termes clairs y étaient employés, dont la signification est facile à trouver dans le dictionnaire. Mais après avoir commencé la programmation, et en particulier JavaScript, elle a commencé à trouver de tels concepts dont les définitions ne peuvent plus être trouvées dans les dictionnaires. Par exemple, cela concerne le mot
this clé
this . Elle se souvient de l'époque où elle a rencontré des objets JS et des fonctions constructeurs qui utilisaient ce mot-clé, mais il n'a pas été si facile d'obtenir sa signification exacte. Elle pense que d'autres débutants sont confrontés à des problèmes similaires, en particulier ceux qui n'ont jamais travaillé en programmation auparavant. Ceux qui veulent apprendre JavaScript devront de toute façon s'en occuper. Ce matériel vise à aider tout le monde à aider avec cela.
Qu'est-ce que c'est?
J'attire votre attention sur ma propre définition du
this .
This s'agit d'un mot clé utilisé en JavaScript qui a une signification particulière, selon le contexte dans lequel il est utilisé.
La raison pour laquelle
this crée tant de confusion pour les débutants est que le contexte de
this change en fonction de son utilisation.
This peut être considéré comme un mot clé dynamique. J'aime la façon dont le concept de «contexte» est révélé dans
cet article de Ryan Morr. Selon lui, le contexte est toujours la valeur du
this , qui fait référence à un objet qui "possède" le code en cours d'exécution. Cependant, le contexte qui s'y rapporte n'est pas le même que le contexte d'exécution.
Ainsi, lorsque nous utilisons le mot
this clé
this , nous nous référons en fait à un objet avec son aide. Parlons de ce qu'est cet objet, après avoir examiné quelques exemples.
Situations lorsque cela pointe vers un objet fenêtre
Si vous essayez d'accéder au
this dans la portée globale, il sera lié au contexte global, c'est-à-dire à l'objet
window dans le navigateur.
Lorsque vous utilisez des fonctions disponibles dans le contexte global (cela les distingue des méthodes d'objet), le
this pointera vers l'objet
window .
Essayez d'exécuter ce code, par exemple, dans la console du navigateur:
console.log(this); // Window // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …} function myFunction() { console.log(this); } // myFunction(); // Window! // Window { postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …}
Utiliser cela à l'intérieur d'un objet
Lorsqu'il
this utilisé à l'intérieur d'un objet, ce mot clé fait référence à l'objet lui-même. Prenons un exemple. Supposons que vous ayez créé un objet
dog avec des méthodes et que vous l'ayez appelé dans l'une de ses méthodes. Lorsqu'il
this utilisé dans cette méthode, ce mot-clé représente l'objet
dog .
var dog = { name: 'Chester', breed: 'beagle', intro: function(){ console.log(this); } }; dog.intro(); // dog // {name: "Chester", breed: "beagle", intro: ƒ} // breed:"beagle" // intro:ƒ () // name:"Chester" // __proto__:Object
Cet objet et les objets imbriqués
L'application de
this dans des objets imbriqués peut créer une certaine confusion. Dans de telles situations, il convient de se rappeler que le mot-clé this fait référence à l'objet dans la méthode duquel il est utilisé. Prenons un exemple.
var obj1 = { hello: function() { console.log('Hello world'); return this; }, obj2: { breed: 'dog', speak: function(){ console.log('woof!'); return this; } } }; console.log(obj1); console.log(obj1.hello()); // 'Hello world' obj1 console.log(obj1.obj2); console.log(obj1.obj2.speak()); // 'woof!' obj2
Caractéristiques des fonctions fléchées
Les fonctions fléchées se comportent différemment des fonctions normales. N'oubliez pas: lorsque vous y accédez dans la méthode d'un objet, ce mot-clé correspond à l'objet auquel appartient la méthode. Cependant, cela ne s'applique pas aux fonctions fléchées. Au lieu de cela,
this dans de telles fonctions se réfère au contexte global (l'objet
window ). Considérez le code suivant qui peut être exécuté dans la console du navigateur.
var objReg = { hello: function() { return this; } }; var objArrow = { hello: () => this }; objReg.hello();
Si, dérouté par le problème, regardez
MDN , vous pouvez trouver des informations selon lesquelles les fonctions fléchées ont une forme d'écriture plus courte que les expressions fonctionnelles et ne sont pas liées à leurs propres entités
this ,
arguments ,
super ou
new.target . Les fonctions fléchées sont mieux adaptées pour une utilisation en tant que fonctions ordinaires, plutôt que comme méthodes objet; elles ne peuvent pas être utilisées comme constructeurs.
Nous écouterons MDN et n'utiliserons pas les fonctions fléchées comme méthodes d'objet.
Utilisation de ceci dans des fonctions régulières
Lorsqu'une fonction régulière est de portée globale, le mot-clé this utilisé dans celle-ci sera lié à l'objet
window . Voici un exemple dans lequel la fonction de
test peut être considérée comme une méthode de l'objet
window .
function test() { console.log('hello world'); console.log(this); } test();
Cependant, si la fonction est exécutée en mode strict, alors
undefined sera écrit dans
ceci , car dans ce mode les liaisons par défaut sont désactivées. Essayez d'exécuter l'exemple suivant dans la console du navigateur.
function test() { 'use strict'; return this; } console.log( test() );
L'appeler à partir d'une fonction qui a été déclarée en dehors de l'objet, puis affectée comme méthode
Prenons l'exemple de l'objet
dog que nous connaissons déjà. En tant que méthode de cet objet, vous pouvez affecter la fonction de
chase déclarée en dehors de celui-ci. Il n'y avait aucune méthode dans l'objet
dog , jusqu'à ce que nous ayons créé la méthode
foo , à laquelle la fonction de
chase été affectée. Si vous appelez maintenant la méthode
dog.foo , la fonction de
chase sera appelée. Le mot
this clé
this , qui est accessible dans cette fonction, pointe vers l'objet
dog . Et la fonction de
chase , en essayant de l'appeler en tant que fonction indépendante, se comportera de manière incorrecte, car avec cette approche,
this pointera vers un objet global qui n'a pas les propriétés auxquelles nous, dans cette fonction, accédons par
this biais.
var dog = { breed: 'Beagles', lovesToChase: 'rabbits' }; function chase() { console.log(this.breed + ' loves chasing ' + this.lovesToChase + '.'); } dog.foo = chase; dog.foo();
Nouveau mot-clé et ce
Le mot
this clé
this est utilisé dans les fonctions constructeurs utilisées pour créer des objets, car il permet, de manière universelle, de travailler avec de nombreux objets créés à l'aide d'une telle fonction. JavaScript possède également des fonctions constructeurs standard avec lesquelles, par exemple, vous pouvez créer des objets de type
Number ou
String . Des fonctions similaires, déterminées par le programmeur seul, lui permettent de créer des objets dont la composition des propriétés et des méthodes est définie par eux-mêmes.
Comme vous l'avez déjà compris, j'aime les chiens, nous allons donc décrire une fonction constructeur pour créer des objets comme
Dog qui contiennent des propriétés et des méthodes.
function Dog(breed, name, friends){ this.breed = breed; this.name = name; this.friends = friends; this.intro = function() { console.log(`Hi, my name is ${this.name} and I'm a ${this.breed}`); return this; }; }
Lorsqu'une fonction constructeur est appelée à l'aide du
new mot-clé,
this ci pointe vers un nouvel objet qui, à l'aide du constructeur, est fourni avec des propriétés et des méthodes.
Voici comment travailler avec des constructeurs JavaScript standard.
var str = new String('Hello world'); var str2 = 'Hello world';
Maintenant, travaillons avec la fonction constructeur
Dog nouvellement créée.
// Dog var chester = new Dog('beagle', 'Chester', ['Gracie', 'Josey', 'Barkley']); chester.intro(); // Hi, my name is Chester and I'm a beagle console.log(chester); // Dog {breed: "beagle", name: "Chester", friends: Array(3), intro: ƒ}
Voici un autre exemple d'utilisation de fonctions constructeur.
var City = function(city, state) { this.city = city || "Phoenix"; this.state = state || "AZ"; this.sentence = function() { console.log(`I live in ${this.city}, ${this.state}.`); }; }; var phoenix = new City();
À propos de l'importance du nouveau mot clé
Lors de l'appel de la fonction constructeur à l'aide du
new mot clé, le
this pointe vers un nouvel objet qui, après un certain travail, sera renvoyé par cette fonction. Le mot
this clé
this dans cette situation est très important. Pourquoi? Le fait est qu'avec son aide, il est possible, en utilisant une seule fonction constructeur, de créer de nombreux objets du même type.
Cela nous permet de faire évoluer l'application et de réduire la duplication de code. Afin de comprendre l'importance de ce mécanisme, réfléchissez à l'organisation des comptes de médias sociaux. Chaque compte peut être une instance d'un objet créé à l'aide de la fonction constructeur
Friend . Chacun de ces objets peut être rempli d'informations utilisateur uniques. Considérez le code suivant.
// - var Friend = function(name, password, interests, job){ this.fullName = name; this.password = password; this.interests = interests; this.job = job; }; function sayHello(){ // , , this // console.log(this); return `Hi, my name is ${this.fullName} and I'm a ${this.job}. Let's be friends!`; } // Friend, new var john = new Friend('John Smith', 'badpassword', ['hiking', 'biking', 'skiing'], 'teacher'); console.log(john); // greeting john john.greeting = sayHello; // console.log( john.greeting() ); // , sayHello() console.log( sayHello() ) ;
Résumé
En fait, l'utilisation du
this en JavaScript n'est pas limitée aux exemples décrits ci-dessus. Ainsi, une série de ces exemples pourrait inclure l'utilisation des fonctions
call ,
apply et
bind . Étant donné que ce matériel est destiné aux débutants et vise à expliquer les bases, nous ne les abordons pas ici. Cependant, si vous avez maintenant acquis une compréhension initiale de
this , vous pouvez facilement comprendre ces méthodes. L'essentiel est de se rappeler que si vous ne comprenez pas quelque chose la première fois, n'arrêtez pas d'apprendre, de pratiquer, de lire des documents sur le sujet qui vous intéresse. Dans l'un d'eux, vous rencontrerez sûrement quelque chose (une sorte de phrase réussie, par exemple) qui vous aidera à comprendre ce que vous ne pouviez pas comprendre auparavant.
Chers lecteurs! Avez-vous eu de la difficulté à comprendre ce mot-clé en JavaScript?