Accessing object values within anonymous function

Question

I have an object (Thing) that keeps track of some value, as well as a set of conditions:

var Thing = function(currentValue) {
    this.currentValue = currentValue;
    this.conditions = [];
};

Conditions can be added to this list:

Thing.prototype.addCondition = function(condition) {
    this.conditions.push(condition);
}

I want conditions to take the form of some function such that I could do

thing.addCondition(thing.exampleCondition(valueToCheckFor));

and these conditions could all be checked via

Thing.prototype.evaluateConditions = function() {
    this.conditions.forEach(function(condition) {
        if (condition()) {
            //Do something
        }
    });
};

Currently I have one such condition function:

Thing.prototype.exampleCondition = function(value) {
    return function() {
        return this.currentValue === value;
    };
};

This obviously doesn't work - this.currentValue is undefined within the anonymous function. My problem is that I need the value passed into exampleCondition to be evaluated against currentValue's value at the time that evaluateConditions() is invoked - therefore I can't do

Thing.prototype.exampleCondition = function(value) {
    var c = this.currentValue;
    return function() {
        return c === value;
    };
};

I'm kind of a javascript noob, but hopefully you brilliant people can point me in the right direction here.

Augusto Altman Quaranta · Accepted Answer · 2014-08-25 12:31:10Z

1

In javascript, each function is always evaluated against a context, which defines the value for the this.

A function's context could be set explicitly or implicitly at the moment of calling the function. For setting the context implicitly you have to call a function like this:

//z will be the context, in other words, inside method: this = z
a.b.c.d...z.method();

For setting the context explicitly there are two functions in the prototype of the Function object that you can use: apply and call. These two are compatible with every browser so you won't have problems. The thing is that, with these two, you are setting the context each time you call the function so it wouldn't help you with your problem if you use them directly.

You must define a function that always evaluates against the same context every time you call it. For this you could use the bind function, defined in the Function object prototype, the problem is that it is not compatible with old browsers because is a recent addition to ECMA-262, 5th edition. Nevertheless the solution could be bind every condition function to your object in the addCondition function:

Thing.prototype.exampleCondition = function(value) {
    return function() {
        return this.currentValue === value;
    };
};

Thing.prototype.addCondition = function(condition) {
    //The bind function will return a function that will always execute with your object as context
    this.conditions.push(condition.bind(this));
}

For the browser compatibility thing you could try this code. Put it at the beginning of your script and you can be sure that you will have the bind function for every browser.

Another possible solution could be:

Thing.prototype.exampleCondition = function(value) {
    var self = this;
    return function() {
        return self.currentValue === value;
    };
};

The thing is that, in this case, you are not using the context, you are ignoring it inside the returned function. Instead of using the context you are replacing it with some variable defined in the scope. For doing this you are forcing every function defined as a condition function to do that little trick. I think that the first solution is better.

edited Aug 25, 2014 at 12:31

answered Aug 25, 2014 at 0:00

Augusto Altman Quaranta

1,5861 gold badge21 silver badges33 bronze badges

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

2 Comments

RobG Over a year ago

Regarding "…a context, which defines the value for the this object" A function's this is defined only by how the function is called or by the use of bind. this is just one parameter of an execution context. In strict mode, this isn't necessarily an object, it can have any value (including undefined).

Augusto Altman Quaranta Over a year ago

You are right. I wanted to make another point in my answer so i didn't pay attention to that detail. Nevertheless, thank you, i've just edited my answer.

Oriol · Accepted Answer · 2014-08-24 22:40:55Z

0

The problem is that this changes inside each function.

Then, inside the function returned by exampleCondition, this won't be your Thing instance, it will be window in non-strict mode and undefined in strict mode.

Therefore, you can do

Thing.prototype.exampleCondition = function(value) {
    var that = this;
    return function() {
        return that.currentValue === value;
    };
};

Or, if you prefer, you can use ES5 bind:

Thing.prototype.exampleCondition = function(value) {
    return (function() {
        return this.currentValue === value;
    }).bind(this);
};

edited Aug 24, 2014 at 22:40

answered Aug 24, 2014 at 22:35

Oriol

291k71 gold badges459 silver badges535 bronze badges

3 Comments

RobG Over a year ago

The optional second parameter to forEach is the object to use as this in the callback, so the OP could also do: this.conditions.forEach(function(condition, this) {...}) so there is no need for the closure or use of bind.

Oriol Over a year ago

@RobG But the desired this isn't the one of the forEach callback, is the one of condition. So OP would need something like this.conditions.forEach(condition=>condition.call(this), this)

RobG Over a year ago

@Oriol—yes, the this object needs to keep being passed along.

Collectives™ on Stack Overflow

Accessing object values within anonymous function

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related