JavaScript execution context of function argument

Question

function Apple(){
    this.name="apple";
}
function Orange(){
    this.name="orange";

    this.apple = new Apple();
    this.apple.onCalled=function(){
        alert(this.name);
    }
}
Orange.prototype.onCalled=function(){
    this.apple.onCalled();
}
var orange = new Orange();
orange.onCalled();

Currently the code shows "apple". How can I modify the "this.apple.onCalled=function()" line so that it shows "orange"?

i.e. I want to pass a function to another object, but when that function is called, access variables of the object who passed the function, not the variables of the object who is executing the function. An obvious solution would be to use global variables (e.g. orange.name) but I'm looking for a better way because there are many objects and I don't want to global everything.

Members of this have nothing to do with variables. In JS, this has nothing to do with variable scope. Also, you're not passing any functions in your code. — user1106925
– user1106925, Commented Jul 2, 2012 at 16:45
The object that "specified" the function then. In other scenarios I'm passing a callback function that's executed when something is finished, which I believe can be solved by the same solution. — kevin
– kevin, Commented Jul 2, 2012 at 16:55

Kos · Accepted Answer · 2012-07-02 16:42:06Z

4

Use a closure.

function Orange(){
    this.name="orange";

    this.apple = new Apple();
    var that = this;
    this.apple.onCalled=function() {
        alert(that.name);
    }
}

Have a read how keyword this works in JS, it's a bit tricky but easy to grasp.

answered Jul 2, 2012 at 16:42

Kos

72.7k28 gold badges174 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2012-07-02 16:42:03Z

1

You could write:

Orange.prototype.onCalled=function(){
    this.apple.onCalled.call(this);
}

It's hard to give a general answer. The thing to understand is that this is bound upon any function call. That can be explicitly controlled with the call or apply functions, or by the . operator when accessing a function as a property of an object.

The answer Kos gives about using a closure may also be relevant; it depends on the effect you want.

answered Jul 2, 2012 at 16:42

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

CD.. · Accepted Answer · 2012-07-02 16:47:16Z

1

Orange.prototype.onCalled=function(){
    this.apple.onCalled.call(this);
}

Example: http://jsfiddle.net/XrtZe/

Have a look at: Scope in JavaScript

edited Jul 2, 2012 at 16:47

answered Jul 2, 2012 at 16:42

CD..

74.4k25 gold badges160 silver badges170 bronze badges

Collectives™ on Stack Overflow

JavaScript execution context of function argument

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related