Forum PHP.pl > [JavaScript] Callback nie ma dostępu to this

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Callback nie ma dostępu to this

LowiczakPL

3.03.2021, 14:00:17

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();

trueblue

5.03.2021, 07:48:58

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

Pyton_000

5.03.2021, 07:51:05

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

LowiczakPL

5.03.2021, 09:29:03

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?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.