Création d'un objet

class elHandler {

     constructor(el) { // pas de fx arrow
          this.el= el;
          
          this.init();
     }

    init = () => {
      this.el.addEventListener("click",
                event => this._action(event.type,this.el), false);
      return this;
     }
    
    _action = (type,el) => {
       console.log(` Handling + ${type} for ${el.id} `);
       el.classList.toggle("red");
       return this;
    }

};


let objDiv = new elHandler(document.getElementById("para1"));

Remarque : 


Examiner le code pour


class elHandler {

     constructor(el) { // pas de fx arrow
          this.el= el;
          
          this.init();
     }

    init(){
      this.el.addEventListener("click",
                event => this._action(event.type,this.el), false);
      return this;
     }
    
    _action = (type,el) => {
       console.log(` Handling + ${type} for ${el.id} `);
       el.classList.toggle("red");
       return this;
    }

};


var objDiv = new elHandler(document.getElementById("para1"));

Et finalement

class elHandler {

  constructor(el) { // pas de fx arrow
    this.el = el;

    this.init();
  }

  init() {
    this.el.addEventListener("click", function(event) {
      document.body.insertAdjacentHTML('beforeend', `<div id="two">this.ed = ${this.el}</div>`);
      this._action(event.type, this.el)
    }, false);
    return this;
  }

  _action = (type, el) => {
    el.classList.toggle("red");
    return this;
  }

};

Plus de perte du this au passage d'argument : fonction flèchées

Lire article

En Javascript, quand on passe une méthode en argument, on perd le contexte. 

1. class Person{
2.   constructor(age){
3.     this.age = age;
4.   }
5. 
   
6.   birthday(){
7.     this.age++;
8.   }
9. }
10. 
    
11. let denis = new Person(50);
12. console.log(denis.age);
13. 
    
14. // passage fonction en argument 
15. 
    
16. let test = (methode) =>  methode();
17. 
    
18. test(denis.birthday.bind(denis));

code

fonction fléchée

Réécriture de :

const arrA = [];
for (var i=0; i < 3; i++) {
    arrA.push(function(){
      return i;
    });
}

console.log(arrA.map(function(f){
      return f();})
); // [0,1,2]


avec la syntaxe des fonctions fléchées, le code s'écrit :

const arr = [];
for (let i=0; i < 3; i++) {
    arr.push(() => i);
}

console.log(arr.map(f => f())); // [0,1,2]

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.