I have a function:

myObject.myFunction = function(callback){
  callback();
}

and a callback

randomObject.callBack = function(){
  console.log(this);
}

if I call randomObject.callBack() directly, I get the parent object in the console. However, if I call myObject.myFunction(randomObject.callBack), it logs a DOM Element.

How can I access the parent object?

Note

I do not know the name of the callbacks parent object ahead of runtime.

I have a function:

myObject.myFunction = function(callback){
  callback();
}

and a callback

randomObject.callBack = function(){
  console.log(this);
}

if I call randomObject.callBack() directly, I get the parent object in the console. However, if I call myObject.myFunction(randomObject.callBack), it logs a DOM Element.

How can I access the parent object?

Note

I do not know the name of the callbacks parent object ahead of runtime.

• javascript
• oop
• callback
• this

3 Answers 3

The context (i.e. this value) of an object is determined at the time the function is run, not at the time it is defined. Passing randomObject.callBack to another function does not send the context (the randomObject bit); it just sends the function.

Presumably the context is set when myFunction calls it. Since you aren't explicitly providing a context (e.g. with call or apply), the context will be the window object.

You can change this by explicitly saying what the context of the function should be before it is run. You can do this with the bind method:

myObject.myFunction(randomObject.callBack.bind(randomObject))

Now when you call callback inside myFunction, randomObject will be logged.

Note that bind is relatively new; not all browsers support it. The MDN page I linked to above has a bit of code that will make it work in all browsers.

This happens because when you invoke a function without an object, inside the function this will point to Window object.To avoid this we usually do like this

myObject.myFunction = function(callback){
  callback();
}


randomObject.callBack = function(){
  console.log(this);
}

function proxyCallback(){
     randomObject.callBack();
}

myObject.myFunction(proxyCallback);

In javascript, this refers to the object context in which a function is called. This is not necessarily related to any object on which it has been defined.

You can think of it as though functions are not defined as members of objects, but called as members of objects.

There are four things that this might resolve to, depending on context.

1. A newly created object, if the function call was preceded by the new keyword.
2. The Object to the left of the dot when the function was called.
3. The Global Object (typically window), if neither of the above are provided.
4. The first argument provided to a call or apply function.

In your situation, something like this might be appropriate:

myObject.myFunction(function(){randomObject.callBack()});

This creates a closure so that within myFunction, callback is called as a member of randomObject.