Sprawdzanie pozycji myszki wewnątrz obiektu

Question

Witam,

mam taki oto kod:

var App = (function(){
	this.posX = 0;
	this.posY = 0;
	this.init = (function(){
	     window.onmousemove = (function(event){
	     event = event || window.event;
	     //console.log(event);
	     this.posX = event.clientX;
	     this.posY = event.clientY;
	     });
	     this.timeStep();
	});

	this.timeStep = (function(){
	     console.info(this.posX + "\t" + this.posY);
	     var _this = this;
	     setTimeout((function(){
		  _this.timeStep();
	     }), 2000);
	});
});

(function(){
var text = new App();
text.init();
})();

Dlaczego po wyświetleniu event widzę że pola clientX i Y mają wartość a w metodzie timeStep wywala mi 0.

Answer 1

Wydaje mi się, że problemem są te dwie linijki:

this.posX = event.clientX;
this.posY = event.clientY;

This w ty miejscu wskazuje na obiekt Window. Powinieneś użyć zmiennej pomocniczej, np. self

var App = (function(){
    this.posX = 0;
    this.posY = 0;
    this.init = (function(){
	     var self = this;
         window.onmousemove = (function(event){
         event = event || window.event;
         self.posX = event.clientX;
         self.posY = event.clientY;
         });
         this.timeStep();
    });
 
    this.timeStep = (function(){
         console.info(this.posX + "\t" + this.posY);
         var _this = this;
         setTimeout((function(){
          _this.timeStep();
         }), 2000);
    });
});

 

Answer 2

Sprawdź czy this wewnątrz metody timeStep() na pewno wskazuje na to, co powinno, a nie na window Object. Może musisz zastosować tutaj pomocniczą zmienną "typu" self i do niej przypisać this.

P.S. Po co Ci tyle funkcji przypominających IIFE, jeśli nie korzystasz z cechy IIFE i nei wywołujesz ich od razu? Jeśli stosujesz function expression, to nie musisz go zamykać w nawiasy okrągłe - jeśli nie chcesz potem od razu wywołać takiej funkcji i tym samym stworzyć IIFE.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Comments

Okrągłe nawiasy nic nie zmieniają a dla mnie to jest nieco czytelniejsze

---

Czy jest czytelniejsze? Może zależy od gustu :) Zwróć uwagę na to, że gdy stosujesz dodatkowe nawiasy, to jest do dodatkowy element który musisz domykać na końcu - więc jak dla mnie trochę więcej jest z tym zachodu.

Gdy widać napis function, to wiadomo, że to funkcja - nawias z przodu daje mi natomiast do zrozumienia, że będzie to IIFE i wtedy na końcu całej funkcji oczekiwałbym dwóch nawiasów (), które to IIFE wywołają. W przypadku Twojego zapisu, widzę nawias otwierający przed function, myślę "stosujesz IIFE", ale na końcu nawiasów nie ma, więc to trochę mylące.

Answer 3

A ja polecam pobawić się ES6, gdzie są arrow functions i klasy ;)