JavaScript : this is it by Delicious Insights

JavaScript : this is it

Vous allez enfin comprendre comment this fonctionne en JavaScript… et ça vaut le coup !

Enfin comprendre this !

Si un sujet représente à lui seul, et ce depuis toujours, bien la moitié des questions posées en ligne sur JavaScript, c’est bien le fonctionnement de this. « Mais ?! J’ai perdu mon this ! » ou «mais qu’est-ce que c’est que ce this ?!» sont monnaie courante. On vient d’un autre langage, et on trimballe nos habitudes avec.

Franchement, c‘est surtout parce que les développeurs ne lisent pas la doc. Le comportement de this est indiqué clairement… mais pas aussi clairement que dans ce cours. 😉 Au niveau langage, une seule règle simple détermine le comportement de this. C’est tout. Après, les API qu’on utilise peuvent y déroger explicitement, comme par exemple le DOM et les flux Node.js.

À la sortie de ce cours, vous serez officiellement des Maîtres Du This™, et vous ne serez plus jamais pris·e au dépourvu par son fonctionnement. La libération !

Des slides et du code

Parce qu’il est tout aussi important de bien saisir les concepts de fond et la théorie que de savoir les implémenter concrètement, le cours alterne entre des éléments de « cours magistral » clairs (à la Powerpoint) et des exemples concrets de code exécutables dans Node ou les navigateurs.

Qui plus est, le contenu des slides est soigneusement synthétique, et offre un complément bienvenu aux explications plus détaillées de la piste audio, tout en permettant de « suivre » même en regardant le cours dans un environnement bruyant.

L'ensemble des exemples de code sont fournis en plus des vidéos. Et vous conservez un accès gratuit à vie aux mises à jour et compléments que nous pourrions ajouter !

De quoi ça parle ?

Voici le plan du cours :

Le grand malentendu
  • Méthodes ou fonctions ?
  • Fonctions de premier ordre et références sur fonctions
Comment savoir ce que vaut this ?
  • La seule règle à connaître : « Sujet, verbe, complément »
  • Dérogations des API courantes (DOM Events, Node Streams…)
Et les fonctions fléchées alors ?
  • Contexte d’exécution
  • Résolution lexicale
Définir explicitement this
  • call()
  • apply()
  • L’opérateur de liaison est gelé
Garantir un this donné
  • bind()
  • Réimplémenter bind()
  • Garantie explicite à la construction
  • Garantie implicite par initialiseur de champ + fonction fléchée
  • Garantie explicite par décorateur

Questions fréquentes

😎 Quelle expérience faut-il déjà avoir de JS ?

Si vous n’avez jamais fait de JS ou jamais lutté avec this, vous ne tirerez sans doute pas tout le bénéfice de ce cours. Mais dès l'instant où vous avez déjà rencontré des soucis ou interrogations autour de this, que ce soit dans le DOM, dans React, dans Node ou ailleurs, ce cours va vous aider !

🦕 Le cours est-il compatible avec IE ?

Le monde n’est pas compatible avec IE. 😜

Plus sérieusement, 100% du cours est valide sur IE. On touche ici à des fondamentaux du langage qui sont vrais depuis sa toute première version.

En revanche, les syntaxes apparues après 2009 (fonctions fléchées, initialiseurs de champs, décorateurs) ne sont pas disponibles nativement sur IE : il faudrait par exemple les transpiler avec Babel.

🎁 Les exemples de code sont-ils fournis ?

Naturellement ! Chaque début de section contient un lien vers un Zip regroupant tous les exemples de code de la section.

Certains rares exemples ne sont pas exécutables tels quels (ceux supposant une base de données par exemple), mais dans leur immense majorité ils sont exécutables tels quels dans Node et/ou un navigateur moderne.

📥 Puis-je télécharger les vidéos pour les regarder hors-ligne ?

Oui ! Chaque début de section contient un lien vers un Zip regroupant les vidéos MP4 de la section, que vous pouvez télécharger si vous souhaitez les voir ou revoir dans un contexte de connectivité pourrie. Notez qu'une faible bande passante suffit à les consulter en ligne, ceci dit, et puis vous bénéficiez ainsi des transcripts et autres contenus associés.

🆓 Avez-vous plus de contenu gratuit autour de JavaScript ?

Tellement ! Nos articles techniques sur JavaScript sont nombreux et approfondis ; vous trouverez aussi des vidéos de nos présentations en conférences ou meetups sur JavaScript, Node.js et tout l’écosystème. Quelques exemples :

🎓 Faites-vous des formations présentielles ?

Absolument ! Nous avons sans doute la formation JS la plus avancée au monde : ES Total. 3 jours pour voir 100% du langage y compris les toutes dernières nouveautés, à destination des personnes utilisant déjà JS au quotidien.

Nous avons aussi Web Apps Modernes pour tout ce qui touche aux applis web riches côté client, Node.js pour la partie API back-end (REST et GraphQL) et Webpack pour le bundling, toutes plébiscitées par nos apprenant·e·s !

Un cours de Christophe Porteneuve

Christophe Porteneuve fait du JavaScript depuis… JavaScript. Et à titre pro depuis 1996. Ancien contributeur noyau à Prototype.js, co-auteur de spec au TC39 et expert JS de renommée internationale, fort de plus de 15 000 heures en tant que formateur et de dizaines de présentations en conférences, il transmet ici avec humour et clarté toute son expertise technique.