this and passing function as parameter in Javascript

Question

I have following Javascript objects:

function Alfa() {
  this.status='';
  this.setStatus = function(value) {
    this.status=value
  }
}

function Beta() {
  this.setSomething = function(setter) {
    setter('Something');
  }
}

And than execution:

alf=new Alfa();
alf.setStatus('foo');

This works fine, if you look into values of alf, the status is set to 'foo', but:

bet=new Beta();
bet.setSomething(a.setStatus);

What I have expected is that bet will execute setStatus function of alf and set status value to 'something', however, this is not happening. setStatus of alf is executed, but this points not to alf instance but to Window, so the property status is set for Window not for alf.

What is the proper approach to get desired functionality?

This is of course simplified implementation, in real life i want to pass those functions of alf to event handlers, so I cannot change Beta implementation, eg:

$('xxx').click(alf.setStatus)

I can at least one error: you pass a.setStatus to bet.setSomething() but where is a declared? — Fabio Buda
– Fabio Buda, Commented Jan 22, 2012 at 13:44

J. Holmes · Accepted Answer · 2012-01-22 13:43:32Z

4

JavaScript functions are unbound. That means this is determined by how it's invoked rather than how it was defined. Because you are invoking the method from within bet, then this is bet

To get around this you need to make a bound function, which creates a stable this no matter how the function is invoked.

If you are using an ES5 compatible JavaScript interpreter then you can use: Function.bind

alf.setStatus.bind(alf)

Or if you arent there are several es5 shims that provide this functionality in older interpreters. In fact one is provided on the mdn reference for bind. JQuery has a version called $.proxy

A simple implementation is that you want a function that takes a function and a scope. And then calls your method in that scope specifically, rather than using this. Something like.

function bind(func,o) { return function() { func.call(o); } }

edited Jan 22, 2012 at 13:43

answered Jan 22, 2012 at 13:38

J. Holmes

18.6k5 gold badges49 silver badges52 bronze badges

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

3 Comments

Marcelo Diniz Over a year ago

the correct would be alf.setStatus.bind(alf), as the syntax is fn.bind(context)

J. Holmes Over a year ago

Yes sorry. I'm on the train and trying to type this on my phone. Auto correct also got my a few times. Making an edit.

Marcelo Diniz Over a year ago

+1 for mentioning $.proxy, as I usually use underscore.js _.bind()

xdazz · Accepted Answer · 2012-01-22 13:39:55Z

1

Change setter('Something'); to setter.call(this, 'Something'); will be work.

answered Jan 22, 2012 at 13:39

xdazz

161k38 gold badges255 silver badges278 bronze badges

1 Comment

KrzysDan Over a year ago

"so I cannot change Beta implementation"

gion_13 · Accepted Answer · 2012-01-22 13:40:09Z

1

function Alfa() {
    this.status='';
    this.setStatus = function(value) {
        this.status=value
    }
}
function Beta() {
    this.status='';
    this.setSomething = function(setter) {
        setter.call(this,'Something');
     }
}

answered Jan 22, 2012 at 13:40

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

Comments

BenMorel · Accepted Answer · 2014-01-04 19:39:27Z

1

Functions in JavaScript don't have a context attached to them, like e.g. bound methods in Python. So what you can do is to call setStatus functions with a context, like this:

bet.setSomething(function(value) {
    a.setStatus.call(a, value);
});

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call

edited Jan 4, 2014 at 19:39

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Jan 22, 2012 at 13:39

Tomasz Zieliński

16.4k8 gold badges64 silver badges85 bronze badges

2 Comments

KrzysDan Over a year ago

"so I cannot change Beta implementation"

KrzysDan Over a year ago

And additionally this reduces the functionality of Beta objects (as it has to know that there is method setStatus of alfa objects) So not the best idea

Collectives™ on Stack Overflow

this and passing function as parameter in Javascript

4 Answers 4

3 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related