How to use in-scope variables in functions passed as parameter

Question

This is probably a basic question, and I am aware that there have been some similar questions around here, but still I did not find an answer. Please consider the following code:

function Outer(inner2) {
  var x = 5;
  this.inner1 = function() {return (x);}
  this.inner2 = inner2.bind(this);
}
var outer = new Outer(function() {return (x);});
alert(outer.inner1()); // works
alert(outer.inner2()); // does not work

If I would replace the second line by this.x = 5;, the second alert would work. So I guess the problem is that x when declared with var is not part of this, so that bind will have no effect.

Is there any way to make this work without using this.x?

You can't. There's no way JavaScript can know you're referring to a local variable inside the constructor while outside it unless you attach it to this or lift it out somehow. — Andrew Li
– Andrew Li, Commented Feb 9, 2018 at 0:13
If you do not want to expose your local variable with this.x, you might want to pass it as an argument to your inner2 method : var outer = new Outer(function (x) { return (x); }); and this.inner2 = inner2.bind(this, x) — Flo Schild
– Flo Schild, Commented Feb 9, 2018 at 0:20
@Li357 True at declaration time, but note that I never call the anonymous function given as parameter directly but only outer.inner2(). So, the compiler could infer the context. — Remirror
– Remirror, Commented Feb 9, 2018 at 0:21
@Flo-Schield-Bobby But then I had to change the signature of the anonymous function (add a parameter). Further, in reality, there are a lot of variables such as x, and I do not want to pass each of them... — Remirror
– Remirror, Commented Feb 9, 2018 at 0:23

Bergi · Accepted Answer · 2018-02-09 00:48:11Z

1

Is there any way to make this work without using this.x?

No.

Btw, you probably don't even need to use bind, just calling inner2 as a method on the object would suffice when both the constructor and the method use this.x.

If you don't want to make x a property of the object, but keep it as a local variable, the usual strategy would be to pass it to the callback as an argument, not trying to somehow make it available in its scope implicitly:

function Outer(callback) {
  var x = 5;
  this.inner1 = function() { return x; };
  this.inner2 = function() { return callback(x); };
//                                          ^^^
}
var outer = new Outer(function(y) { return y; });
//                             ^           ^
alert(outer.inner1()); // works
alert(outer.inner2()); // works

answered Feb 9, 2018 at 0:48

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

Comments

Maiya · Accepted Answer · 2018-02-09 03:10:53Z

1

I think you need clarification on what the word "this" is referring to.

"this" is not pointing to the function "Outer."

When you invoke a constructor function with the "new" keyword, a few things happen.

The constructor function returns an object.
The "this" variable is changed, so that it is set to point to that object that is returned.
(Also, the .proto of the object returned is set to the .prototype of the constructor function, but that step is not relevant here).

So, you are binding the callback function to the object that you are returning from the constructor function, not the constructor function itself.

Thus, the callback function is bound to outer (with a lower-case), not outer (with an upper-case).

Also, when you bind, you are not binding to the scope of a function. X is not assigned to any property. I think you only can bind to an object and access its properties with this.a etc.

The x in the first function worked because its value was assigned in the scope of the function.

answered Feb 9, 2018 at 3:10

Maiya

9902 gold badges11 silver badges29 bronze badges

1 Comment

Remirror Over a year ago

Thanks, this was helpful in understanding this

Angel Politis · Accepted Answer · 2018-02-09 00:56:20Z

0

I found an, albeit ugly, solution:

function Outer(inner2) {
  var x = 5;
  this.inner1 = function() {return (x);}
  eval('this.inner2 = ' + inner2.toString());
}

This works and shows my point: the parameter inner2 is just a prescription of how this.inner2 should look like; it is never invoked itself.

Let me know, if you have a neater solution than this.

edited Feb 9, 2018 at 0:56

Angel Politis

11.4k15 gold badges51 silver badges67 bronze badges

answered Feb 9, 2018 at 0:45

Remirror

7747 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to use in-scope variables in functions passed as parameter

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related