JSFiddle - React, Tailwind, and code Playground
JavaScript
$(document).ready(function testApp() {
new X();
});
function X() {
console.dir(this);
var initUrl = "/echo/json/";
this._instanceVariable = "I AM defined!";
// Init X by making Ajax call, passing the func to be called on ajax return
this._makeAjaxCall(initUrl, this.onSuccessInit(), this.onError);
// Make another ajax call to init another component
this._makeAjaxCall(initUrl, this.onSuccessSomeOtherAjaxCall(), this.onError);
}
X.prototype.onSuccessInit = function(){
//this.doStuff(...);
var self = this;
return function() {
alert("onSuccessInit, _instanceVariable="+self._instanceVariable);
}
}
X.prototype.onSuccessSomeOtherAjaxCall = function(){
var self = this;
return function() {
alert("onSuccessSomeOtherAjaxCall, _instanceVariable="+self._instanceVariable);
}
}
/**
* make an ajax call, and call the provided success/error handler
*/
X.prototype._makeAjaxCall = function(url, onSuccessHandler, onError){
$.ajax({
url : url,
context: this,
success : function (jsonData, textStatus, XMLHttpRequest) {
// If I don't user 'this', the func called but I've lost my reference
// to my instance of X
onSuccessHandler();
// If I use 'this', it points to the ajax call object, not to my X object.
//this.onSuccessHandler();
}
});
}