Problem: Vererbung in Javascript Klasse (Ajax)

[Marcel]

Guten Tag,

ich will mir eine JavaScript-Klasse für eine Funktion mit Ajax-Abruf schreiben, aber an einer Stelle funktioniert das nicht so wie ich mir das vorstelle.
Erstmal der Code:

  
function AjaxTable(name, action, rows, rowschooseable, count, collector, searchform) {  
	/* constructor */  
	  
	this.name = name;  
	this.action = action;  
	this.rows = rows;  
	this.rowschoosable = rowschooseable;  
	this.count = count;  
	this.collector = collector;  
	this.searchform = searchform;  
	  
	this.xmlHttp = false;  
  
	this.constructor = function() {  
		document.getElementById(this.name).innerHTML = "<p>lädt...</p>";  
		this.update();  
	}  
	  
	this.update = function() {  
		this.xmlHttp = false;  
		  
		start_loading();  
		if (window.ActiveXObject) {  
			try {  
				this.xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
			} catch (e) {  
				try {  
					this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
				} catch (e) {  
				}  
			}  
		} else if (window.XMLHttpRequest) {  
			try {  
				this.xmlHttp = new XMLHttpRequest();  
			} catch (e) {  
			}  
		}  
		  
		var url_searchform = '';  
		// an der Stelle kommt ein bisschen unwichtiger Code  
		  
		var url_order = '';  
		// und hier auch  
		  
		var url_pagination;  
		// den ich der Übersichtlichkeit wegen weggelassen habe  
		  
	    if (this.xmlHttp) {  
	    	this.xmlHttp.open('GET', this.action + url_order + url_pagination + url_searchform, true);  
	    	this.xmlHttp.onreadystatechange = this.handler;  
	    	this.xmlHttp.send(null);  
	    	// ^^ an dieser Stelle ist das Ajax-Objekt noch über "this.xmlHttp" zu erreichen  
	    }  
	}  
  
	this.handler = function() {  
	    	// hier liegt das Objekt plötzlich direkt unter "this", ich müsste also mit this.readyState darauf zugreifen  
		if (this.xmlHttp.readyState === 4 && this.xmlHttp.status === 200) {  
	        var response = this.responseText;  
	  
	        stop_loading();  
	        document.getElementById(this.name).innerHTML = response;  
	    }  
	}  
	  
	this.show = function() {  
		  
	}  
	  
	this.constructor();  
}  

Das Ajax-Objekt befindet sich in "this.xmlHttp" und wird in der Funktion update() verwendet. Dort wird mit "this.xmlHttp.onreadystatechange = this.handler;" auf die Funktion handler() verwiesen. Mit Firebug stelle ich fest, dass in der Funktion handler() das Ajax-Objekt sich nun nicht mehr in "this.xmlHttp" sondern direkt unter "this" befindet.

Meine Frage ist einfach: Warum?

So kann ich nämlich nicht mehr mit "this.name" auf meine oben definierte Variable zugreifen.

Gruß, Marcel

[Cheatah]

Hi,

Das Ajax-Objekt befindet sich in "this.xmlHttp" und wird in der Funktion update() verwendet. Dort wird mit "this.xmlHttp.onreadystatechange = this.handler;" auf die Funktion handler() verwiesen. Mit Firebug stelle ich fest, dass in der Funktion handler() das Ajax-Objekt sich nun nicht mehr in "this.xmlHttp" sondern direkt unter "this" befindet.

Meine Frage ist einfach: Warum?

Gegenfrage: Warum meinst Du, das eine "this" sei etwas anderes als das andere "this"?

So kann ich nämlich nicht mehr mit "this.name" auf meine oben definierte Variable zugreifen.

Das Stichwort, unter dem Du fündig werden solltest, lautet "bind". Ein anderes wäre "closure".

Cheatah

[Marcel]

Hi Cheatah,

ich glaube ich habe meinen Denkfehler gefunden. Mit dem Tipp "closure" bin ich draufgekommen. Ich habe meinen Code dementsprechend umgeschrieben, so dass ich in den verschachtelten Funktionen mit thisObject. auf die Variablen zugreifen kann.

Vielen Dank!

Gruß, Marcel