[JavaScript] Callback nie ma dostępu to this Opcje

[LowiczakPL]

Piszę klasę w JS i mam problem z dostępem do this z funkcji callback EventListenera.

Czy to dlatego że ta funkcja callback nie staje się częścią wywołujacej ją klasy?

kod online https://jsfiddle.net/eojfb8vc/

Kod

class testObj {
  constructor() {
    this.val = {
      start: 0,                  
    };
    document.addEventListener( "mousedown", this.checkMouseDown );
    document.addEventListener( "mouseup", this.checkMouseUp );
  }

  checkMouseDown(event) {
    console.log('MOUSE DOWN #########');
    console.log(this.val);
    this.val.start = new Date().getTime();              
  }

  checkMouseUp(event) {
    console.log('MOUSE UP #########');              
  }
}

let obj = new testObj();

Ten post edytował LowiczakPL 3.03.2021, 14:01:43

[trueblue]

Wewnątrz listenera this wskazuje na obiekt, do którego jest on podpięty - warto czytać dokumentację.

[HTML] pobierz, plaintext 
document.addEventListener("mousedown", this.checkMouseDown.bind(this));
document.addEventListener("mouseup", this.checkMouseUp.bind(this));
[HTML] pobierz, plaintext 

Ten post edytował trueblue 5.03.2021, 07:49:12

[Pyton_000]

https://developer.mozilla.org/pl/docs/Web/J...m_event_handler

[LowiczakPL]

ojjj, teraz sobie przypomniałem że dokładnie tak samo robiłem, bindowałem this, ale robiłem to tak dawno że o tym niestety zapomniałem ...

dzięki za podpowiedź i przypomnienie

oczywiście napisałem sobie klasę w inny sposób aby obejść ten problem https://jsfiddle.net/9y3Lmezc/, piszę klasy w dwojaki sposób, znam te 2 sposoby

Kod

testObj = (function () {
    val = {
      start: 0,                  
    };  

  function checkMouseDown(event) {
    console.log('MOUSE DOWN #########');
    console.log(val);
    val.start = new Date().getTime();              
  }

  function checkMouseUp(event) {
    console.log('MOUSE UP #########');              
  }
  
  return {
    init: function () {
      document.addEventListener( "mousedown", checkMouseDown );
      document.addEventListener( "mouseup", checkMouseUp );
    }
  }
}());

testObj.init();

Mam w związku z tym pytanie, który sposób Waszym zdaniem jest lepszy, pierwszy czy drugi, niestety moja wiedza na ten temat jest ZEROWA (po prostu tak nauczyłem się pisać bez wgłębiania się dalej) jakie są plusy i minusy klas napisanych w ten sposób?

Ten post edytował LowiczakPL 5.03.2021, 09:40:03