JSFiddle - React, Tailwind, and code Playground

by CYRIL MOREAU

HTML

<button id='actAmnesique'>Comment tu t'appelles ? (PersonneAmnesique)</button>
<button id='actNormal'>Comment tu t'appelles ? (PersonneNormale)</button>

JavaScript

// this réfèrera à l'objet qui l'appelle ...
function PersonneAmnesique(nom){
  this.monNom = nom;
  this.ditBonjour = function() {
    alert('Coucou ! Je suis ' + this.monNom);
  }
};

// ... le contexte de this dans la fonction ditBonjour pointera donc sur l'élément <button> 'actToto'. Or, cet élément n'a pas de propriété monNom : cela renvoit donc undefined
var toto = new PersonneAmnesique('toto');
document.getElementById('actAmnesique').onclick = toto.ditBonjour;

function PersonneNormale() {
  this.monNom = 'titi';
    
  var that = this; // on sauvegarde la référence de this (occurrence de PersonneNormale) dans that.
  this.ditBonjour= function() {
    alert('Coucou ! Je suis ' + that.monNom); // quand le button appellera la fonction ditBonjour, that pointera bien sur notre objet de PersonneNormale et non plus sur l'élément <button>
  }
};
var titi = new PersonneNormale('titi');
document.getElementById('actNormal').onclick = titi.ditBonjour;