methode einer Klasse gibt kein Objekt sondern das 'document' zurück

[msd]

Hallo zusammen,

ich hab ein Problem mit einem Objekt:

sobald ich darin mit dem eventListener arbeite (in welchem ich keine Parameter übergeben kann ) - oder liegt es daran, dass ich den listener an das 'window' hänge?, gibt 'this' in der aufgerufenen Methode nicht das Objekt, sondern das 'document' zurück - ich kann also von dort aus das Objekt nicht mehr erreichen... Hat da jemand einen Tipp, wie man das lösen kann?

Lib.Plugin.Object = Lib.Plugin.Abstract.extend({
	
	trend: 0,
	
	construct: function(elem) {
		window.addEventListener('DOMMouseScroll', this.setState, true);
	},
	
	event: function(elem) {
		this.element = jQuery(elem);
		this.element.find('mousewheel').text(this.getState());
	},
	
	setState: function(delta) {
		console.log(this.getState());
	},
	
	getState: function(delta) {
		return delta.detail;
	}
});

[Falk Prüfer]

Hallo,

das hängt damit zusammen, dass this in JavaScript nicht exakt das ist was man von this in anderen Programmiersprachen erwartet. In JavaScript repräsentiert this in erster Linie eine Referenz auf den "owner" der die Funktion ausführt und erst danach auf das Objekt dem die Methode gehört. Also jenachdem in welchem Context die Methode aufgerufen wird, stellt this immer etwas anderes dar.

Ich behelfe mir damit, dass ich Methoden, die aus einem anderen Context heraus aufgerufen werden, nicht über this, sondern über eine zusätzliche Referenz innerhalb einer lokalen Funktion ausführe.

Um es zu verdeutlichen:
[highlight=javascript]
function myObject(pName)
{
this.Name = pName;
// Das funktioniert nicht!
// window.addEventListener('click', this.getName, true);

// Das jedoch funktioniert
var self = this;
window.addEventListener('click', function() {
self.getName();
}, true);
}

myObject.prototype.getName = function()
{
alert(this.Name);
}

var iMyObject = new myObject('iMyObject');
[/highlight]

Gruß Falk

[msd]

hallo,

und vielen Dank erstmal! Ich hab das nun ähnlich gelöst (vielleicht gibt es ja den ein oder anderen interessierten).

Was das ganze macht? ganz einfach... hier wird lediglich das Event des Mousewheels abgefangen, als Ergebnis erhält man +1 oder -1 (als int), damit kann man dann tun, was man will z.b. divs etc. scrollen.

Hintergrund ist einfach die Vermeidung des unnötigen zusammen suchens aller jQuery Plugins... daher eine kleine, eigene Lib (die trotzdem auf jQuery basiert und minified immer noch kleiner ist, als 5-10 gepackte plugins).

Lib.Plugin.Object = Lib.Plugin.Abstract.extend({
	onscroll: null,
	
	construct: function(elem) {
		var self = this;
		
		this.element = jQuery(elem);
		this.element[0].addEventListener('DOMMouseScroll', function(event) { return self.handleWindowScroll(event) }, false);
	},
	
	handleWindowScroll: function(event) {
		var delta = 0;

		if (event.wheelDelta) {
			delta = event.wheelDelta / 120;
		}
		
		if (event.detail) {
			delta = -event.detail / 3;
		}
		
		if (this.onscroll) {
			var stopPropagation = this.onscroll(delta);
			if (stopPropagation) {
				event.preventDefault();
			}
		}
		
		return true;
	},
	
	setOnScroll: function (func) {
		this.onscroll = func;
	}
});