I have JS code roughly like this:
function myObject()
{
this.a = 13;
this.fetchData = function()
{
alert(this.a);
getData(this.processData);
}
this.processData = function(data)
{
// do stuff with data
alert(this.a);
}
this.fetchData();
}
function getData(callback)
{
// do async request for data and call callback with the result
}
My problem is: The function fetchData has access to my a variable via the this keyword, but the other function processData does not when called by getData. I understand why this happens, but don't know how to work around it.
How would you approach this problem preferably in OOP style? (The function getData has to be available to multiple classes)
Two options:
1) Have getData accept a context parameter (usually called context or thisArg) and use callback.apply(context, ...) or callback.call(context, ...) to call it. So:
function getData(callback, context) {
// ...when it's time to call it:
callback.call(context, arg1, arg2);
// or
callback.apply(context, [arg1, arg2]);
}
2) Create a function that, when called, will turn around and call the original callback with this set to the correct value. (This is sometimes called "binding".)
For example, using an explicit closure:
this.fetchData = function()
{
var self = this;
alert(this.a);
getData(getDataCallback);
function getDataCallback(arg1, arg2) {
self.processData(arg1, arg2);
}
}
Or have a generic bind function to do it (which will also involve a closure, but in a nice controlled context so it's not closing over stuff you don't need). See link below for an example of a simple bind function.
More: You must remember this
I think that you only need to define "a" as a local variable so that it is in the cope of both fetchData and getData, something like this:
function myObject() {
var a = 13;
this.fetchData = function() {
alert(a);
getData(this.processData);
}
this.processData = function(data) {
// do stuff with data
alert(a);
}
this.fetchData();
}
You could also do,
function myObject() {
this.a = 13;
var that = this;
this.fetchData = function() {
alert(that.a);
getData(this.processData);
}
this.processData = function(data) {
// do stuff with data
alert(that.a);
}
this.fetchData();
}
Related
I have a class where I bind a method on initialization as follows -
function MyClass() {
this.onHttpCallback = _.bind(onHttpCallback, this);
}
function onHttpCallback(){
//...
}
How do I test if the onHttpCallback when called, is always called with an object of MyClass as context?
I am using sinon.js to mock and the following code doesn't work -
it('should be binded', function () {
//ctrl is an object of MyClass
var dummy_obj = {};
var spy = sinon.spy(ctrl.onHttpCallback);
spy.call(dummy_obj);
spy.alwaysCalledOn(ctrl).should.be.ok;
});
Update
As per the comments in the following answer, it seems like it is impossible to test the binding for a method.
My Take on the problem
//Source.js
function MyClass() {
}
MyClass.prototype.init = function(){
this.onHttpCallback = _.bind(MyClass.onHttpCallback, this);
}
MyClass.onHttpCallback(){
//...
}
//Test.js
it('should bind onHttpCallback', function () {
sinon.spy(_, 'bind');
ctrl.init();
_.bind.calledWith(ctrl.constructor.onHttpCallback, ctrl).should.be.ok;
_.bind.restore();
});
Works like a charm!
In case you wonder why this changes even though you clearly bound it to be MyClass before, that's because you use call with dummy_obj on the spy.
The spy wraps the original function, so it has no concept of that function's binding. It will still accept a different binding on the wrapper function, then try to call the original with that this, which is then ignored by the original function.
var context = {foo: 'bar'};
var original = _.bind(function () { console.log(this); }, context);
var spy = function (original) {
var spyFn = function () {
var _this = this;
spyFn.calledOn = function (ctx) { return ctx === _this; };
return original.apply(this, arguments);
};
return spyFn;
};
var originalSpy = spy(original);
// Will call the spyFn with a different `this`, but will not affect the original binding
originalSpy.call({something: 'else'});
>> {foo: 'bar'}
// Since the spy cannot know the original binding, it will think the assumption is false.
originalSpy.calledOn(context) === false;
I cannot access the constructor of a class when I return from an asynchronous call using a callback.
In this case I cannot access the test variable defined in the Myclass1 constructor
I can't find a solution for this, what am I doing wrong ?
var MyClass1 = function () {
this.test = 5;
};
MyClass1.prototype = function () {
//This is the function which calls another Myclass2 which contains the function for ajax //request
test = function () {
myClass2 = new MyClass2();
myClass2.getRequest.call(this, callback);
},
//This is the call Back
callback = function () {
alert(this.test); /*<---Cannot access this,shows undefined.In firebug it show this.test is not defined*/
};
return {
test: test,
callback: callback
}
}
MyClass2.prototype = function () {
getRequest = function () {
//make an async call set the success to the callback .I have propagated the data to //myclass1
$.ajax({
url: "test.html",
success: callBack.call(this, data) //<--I call the callback using myClass1
})
}
return {
getRequest: getRequest;
}
}
Ok, so there are many points:
First
On the prototype creation, please, declare variables. Right now you are creating "test", "callback", and "getRequest" global variables because you dont use "var"
MyClass1.prototype = function () {
var test = function () {
// some code...
};
var callback = function () {
// some code...
};
// And more code...
};
And the comma at the end of "test" declaration works because of it's a operator, but I'm pretty sure it does not what you mean to do.
Or you can directly create functions:
MyClass1.prototype = function () {
function test() {
// some code...
}
function callback() {
// some code...
}
// And more code...
};
Second
You are assigning "prototype" property to a function
MyClass1.prototype = function() { ... };
This means the prototype of your class is a function, who has methods "call", "apply", "bind" but not "test" nor "callback". Probably you wanted to create a Immediately-Invoked Function Expression (IIFE)
MyClass1.prototype = (function() {
function methodA() {
// some code...
}
return {
methodA: methodA
};
})();
Or a simple object:
MyClass1.prototype = {
methodA: function() {
// some code...
},
methodB: function() {
// some code...
}
};
Third
I don't understand what is your code doing, where is "MyClass2" defined, it extends "MyClass1"?
Fourth
You are assigning the "test" property on MyClass1's prototype to a function, but then, on the constructor you assign the "test" property to a number, maybe you wanted to use different properties.
Fifth
On this line:
success: callBack.call(this, data)
You are invoking function "callback" (I don't know where it does come from), I repeat, you are invoking it, not setting it as a callback, you're just calling the function and telling $.ajax than the callback will be the value returned by "callback.call(this, data)", probably "undefined".
If you wanted to set "callback" function as callback for the ajax petition you need to pass a function and inside of this function you do whatever you want to do when the array arrives, in this case invoke "callback", but you must save "this" variable in order to use it:
var self = this;
$.ajax({
url: "test.html",
success: function(data) {
callBack.call(self, data);
}
})
I suppose data variable comes from the ajax petition...
As you see is really difficult to give a accurate response when the code is not tested so the next time please, provide a fiddle with your code.
If all my assumptions are right: this is a code like the one you need: http://jsfiddle.net/pw3hj/
excuse the pseudo code, my actual file is much larger:/
I want to call a function (with parameters) from inside a class. However, that function should be passed to the class as a variable.
someObject = {
itWorked:function(answer){
alert(answer);
},
plugins:{
somePlugin:function(){
var callback;
this.doSomething = doSomething;
function setCallback(c){
callback = c;
}
function doSomething(){
var answer = "hello";
[callback](answer); // how do I call this?
}
}
},
widgets:{
something:function(){
var doIt = new someObject();
doIt.setCallback(someObject.itWorked()); // how do I send this?
doIt.doSomething();
}
}
}
So how would I pass itWorked() to the class?
And how would I call that itWorked(answer) function within the class as well as passing a variable to if?
You will need to change
setCallback = function (c) {callback = c;}
to
this.setCallback = function (c) {callback = c;}
so the setCallback function will be public.
If you also want to scope the callback, you can call it like this
callback.call(scope, param1, param2);
If you don't know how many parameters, you can call it like this
callback.apply(scope, parameters);
Scope could be any object, even an empty one {} if you want.
By the way, I really like your use of private variables in this example, great work with the javascript. Here is a good way to write your javascript object to help with the initialization and readability
var mynamespace = {};
(function () {
function MyObject(param1, param2) {
this.initialize(param1, param2);
}
MyObject.prototype = {
initialize: function (param1, param2) {
var privateScope = {
param1: param1,
param2: param2,
callback: null
};
this.setCallback = function (c) {
privateScope.callback = c;
}
this.doSomething = function () {
if (privateScope.callback) {
privateScope.callback.call();
}
}
}
}
mynamespace.MyObject = MyObject;
}());
Then to use it
var obj = new mynamespace.MyObject("value1", "value2");
Remove the parentheses to pass the function as a variable.
doIt.setCallback( someObject.itWorked );
You can then use the callback as you would any other function.
callback( answer );
I have the following code example to use an object that receives the action from the callback. Doesn't seem like this is a good design pattern. Or is it?
When setTimeOut() fires on the function after 1 second, it uses the objInstance global variable (DOM scope) to access the ClassExample object instance. Can someone recommend a better way to utilize callbacks within an object oriented design?
The whole idea is so I can use the callback to update data within my object instance (increment a variable for example).
function ClassExample{
this.initiate = function() {
setTimeOut(objInstance.afterTimeOut,1000); //using the objects global handle
}
this.afterTimeOut = function() {
alert("Received!");
}
}
var objInstance = new ClassExample(); //instance
objInstance.initiate();
No, you're not. You'll want to do this:
this.initiate = function() {
setTimeOut(objInstance.afterTimeOut,1000); //using the objects global handle
}
Now, if "afterTimeout" needs the proper object context, you could do this:
this.initiate = function() {
var instance = this;
setTimeout(function() { instance.afterTimeOut(); }, 1000);
}
OK well you changed the question considerably with that little edit :-) If I were you, I'd just do this (like my original second example):
this.initiate = function() {
var instance = this;
setTimeout(function() { instance.afterTimeOut(); }, 1000);
}
Then you don't need any ugly global variables around at all.
edit — Stackoverflow user #Christoph comments that this isn't particularly pretty. One thing that might help would be to use a "bind" facility, as provided by newer browsers natively (as a method on the Function prototype) or by some libraries (Prototype or Functional for example). What "bind" lets you do is create a little wrapper function like I've got above:
this.initiate = function() {
setTimeout(this.afterTimeOut.bind(this), 1000);
}
That call to "bind" returns a function that is effectively the same sort of thing as the little wrapper I coded explicitly in the example.
function ClassExample{
this.afterTimeOut = function() {
alert("Received!");
}; // Don't forget these
setTimeOut(afterTimeOut, 1000); // Don't use () if you're passing the function as an argument
}
var objInstance = new ClassExample(); //instance
That way you don't need the initiate() method.
If you really want the initiate() method, I'd do it like this:
function ClassExample{
var self = this;
self.afterTimeOut = function() {
alert("Received!");
};
self.initiate = function() {
setTimeOut(self.afterTimeOut, 1000);
};
}
var objInstance = new ClassExample(); //instance
objInstance.initiate();
This is how I'd do it to allow timer reuse and minimize the number of closures:
function Timer(timeout, callback) {
this.timeout = timeout;
this.callback = callback;
}
Timer.prototype.run = function(thisArg /*, args... */) {
var argArray = Array.prototype.slice.call(arguments, 1);
var timer = this;
setTimeout(function() {
timer.callback.apply(thisArg, argArray);
}, timer.timeout);
};
var timer = new Timer(1000, alert);
timer.run(null, 'timer fired!');
And just for fun, a golfed version which is functionally equivalent, but replaces the object with a closure:
function delay(func, timeout) {
return function() {
var self = this, args = arguments;
setTimeout(function() { func.apply(self, args); }, timeout);
};
}
delay(alert, 1000).call(null, 'timer fired!');
You are right it is not the optimal way of doing what you are aiming for. however i have to wonder why you need to break the callstack as part of the initiation, it seems very academic.
apart from that if i had to do that, i'd probably use a closure like so:
function ClassExample{
this.initiate = function() {
setTimeOut((function(self) { return function() { self.afterTimeout();}})(this),1000); //using the objects global handle
}
this.afterTimeOut = function() {
alert("Received!");
}
}
var objInstance = new ClassExample(); //instance
objInstance.initiate()
this.initiate = function() {
var instance = this;
setTimeOut(function() {
instance.afterTimeOut();
}, 1000);
};
By saving this to a local variable, you can avoid using the global handle at all. Also this prevent the afterTimeout() from losing it's this.
Building on Znarkus answer...
I really don't know in which environment his code is running but for me the first approach just do not works. I got: 'ReferenceError: afterTimeOut is not defined'...
The second one, nevertheless, is really cool... I just changed setTimeOut for setTimeout (using lowercase 'o') and included parenthesis after the class name definition turning the first line of code into 'function ClassExample(){'; solved my problem.
My snippet of example code:
Oop with private behaviour, intern callback calling and etc.
function MyTry (name){
// keep this object pointer... that's the trick!
var self = this;
// create private variable
var d = new Date()toJSON().slice(0, 10);
// create a private function
function getName(){return name}
// create public access method
self.hello = function(){alert('Hello '+getName()+'!\nToday is: '+d)}
// note instance method hello passed as a callback function!
self.initiate = function(){setTimeout(self.hello, 3000)}
}
I have a javascript function (class) that takes a function reference as one paremter.
function MyClass ( callBack ) {
if (typeof callBack !== 'function')
throw "You didn't pass me a function!"
}
For reasons I won't go in to here, I need to append something to the function by enclosing it in an anonymous function, but the only way I've been able to figure out how to do it is by adding a public function to MyClass that takes the callBack function as a parameter and returns the modified version.
function MyClass () {
this.modifyCallBack = function ( callBack ) {
var oldCallBack = callBack;
callBack = function () {
oldCallBack(); // call the original functionality
/* new code goes here */
}
return callBack;
}
}
/* elsewhere on the page, after the class is instantiated and the callback function defined */
myCallBackFunction = MyClassInstance.modifyCallBack( myCallBackFunction );
Is it possible to make this work when passing the callBack function as a parameter to the class? Attempting to modify the function in this manner when passign it as a parameter seems to only affect the instance of it in within the class, but that doesn't seem like it's a valid assumption since functions are Objects in javascript, and are hence passed by reference.
Update: as crescentfresh pointed out (and I failed to explain well), I want to modify the callBack function in-place. I'd rather not call a second function if it's possible to do all of this when the class is instantiated.
Function objects don't provide methods to modify them. Therefore, what you want to do is impossible the way you want to do it. It's the same thing Jon Skeet likes to point out about Java: Objects are not really passed by reference, but instead a pointer to them is passed by value. That means that changing the value of an argument variable to a new one won't affect the original one at all.
There are only two ways to do what you want in call-by-value languages like Java and JavaScript: The first one would be to use the (function) object's methods to modify it. As I already stated, function objects don't have those. The other one is to pass the object of which the function object is a property as a second argument and set the appropriate property to a new function which wraps the old one.
Example:
var foo = {};
foo.func = function() {};
function wrapFunc(obj) {
var oldFunc = obj.func;
obj.func = function() {
// do some stuff
oldFunc.call(obj, _some_argument__);
};
}
wrapFunc(foo);
This works for global functions as well: they are properties of the window object.
As Javascript uses lexical scoping on variables the following is possible:
var modifiableCallback=function() { alert('A'); };
function ModifyCallbackClass(callback)
{
modifiableCallback=function() { callback(); alert('B'); };
}
function body_onload()
{
var myClass=new ModifyCallbackClass(modifiableCallback);
modifiableCallback();
}
This does what you want, however the function "modifiableCallback" must be referred to with the same name inside ModifyCallbackClass, otherwise the closure will not be applied. So this may limit the usefulness of this approach for you a little.
Using eval (performance may suffer a bit) it is also possible to make this approach more flexible:
var modfiableCallback1=function() { alert('A'); };
var modfiableCallback2=function() { alert('B'); };
var modfiableCallback3=function() { alert('C'); };
function ModifyCallbackClass(callbackName)
{
var temp=eval(callbackName);
var temp2=eval(callbackName);
temp= function() { temp2(); alert('Modified'); };
eval(callbackName + " = temp;");
}
function body_onload()
{
var myClass=new ModifyCallbackClass("modfiableCallback1");
modfiableCallback1();
myClass=new ModifyCallbackClass("modfiableCallback2");
modfiableCallback2();
myClass=new ModifyCallbackClass("modfiableCallback3");
modfiableCallback3();
}
I assume you are saving this callback somewhere... Any reason this won't work?
function MyClass ( callBack ) {
var myCallBack;
if (typeof callBack !== 'function')
throw "You didn't pass me a function!"
var oldCallBack = callBack;
callBack = function () {
oldCallBack(); // call the original functionality
/* new code goes here */
}
myCallBack = callback;
}
You want to do something like:
function MyClass () {
this.modifyCallBack = function ( callBack ) {
var oldCallBack = callBack;
callBack = function () {
oldCallBack(); // call the original functionality
alert("new functionality");
}
return callBack;
}
}
/* elsewhere on the page, after the class is instantiated and the callback function defined */
var myCallBackFunction = function () {alert("original");};
var MyClassInstance = new MyClass();
myCallBackFunction = MyClassInstance.modifyCallBack( myCallBackFunction );
myCallBackFunction();