Class

Adieu perte du this : fonction fléchée

Voici un exemple montrant la perte de la référence du this dans les objets.

function P() {

  this.age = 0;

  setInterval(function () {
    this.age++; // this ref sur global et non l'objet
  }, 1000);
}
var pPerte = new P();


En voici une version corrigée ! Les fonctions fléchées capturent la valeur this de leur contexte.

function Personne() {
  this.age = 0;

  setInterval(() => this.age++, 1000);
}

var p = new Personne();

setInterval(() => console.log(p.age), 3000);


JS Bin on jsbin.com Une autre solution fût l'utilisation de bind

fonction fléchée

Voici un cas d'écriture de fonction fléchées :

var motL = "anticonstitutionnelement myélosaccoradiculographie cyclopentanoperhydrophénanthrène intergouvernementalisation";

motT = motL.split(" ");

console.log(motT.map(el => el.length).reduce((a, b) => Math.max(a, b)));

console.log(motT.reduce((a, b) => a.length > b.length ? a : b));

Voici une utilisation sur le DOM ! 

motL = document.querySelector("div");

motT = motL.innerHTML.split(" ");

var Max = motT.reduce((a, b) => a.length > b.length ? a : b);

motL.innerHTML = motL.innerHTML.replace(Max, "<span>"+Max+"</span>");



https://jsbin.com/pasedu/edit?html,css,js,console,output

JS Bin on jsbin.com

Lire l'article suivant pour découvrir le this lexical dans les fonctions fléchées.