How to access an instance variable within a Promise callback?

Question

Let's say I have a basic dumb javascript class :

var FunctionX = function(configs) {
this.funcConfigs = configs;
}

FunctionX.prototype.getData = function() {
  return $.get('/url');
}

FunctionX.prototype.show = function(promise) {
  console.log(this.funcConfigs); // <-- this here is the promise itself, I'm looking to get the instance's configs
}

FunctionX.prototype.setup = function() {
  this.GetData().then(show);
}

var f = new FunctionX({ "a": "b" });
f.setup();

Now I'm trying here in the show function to access the instance variable "funcConfig". "This" is the promise, and "funcConfigs" directly returns undefined.

I tried to resolve this issue with a .resolveWith(this) but it does not solve this issue.

How can I access the instances variables in this scope context?

Nothing to do with promises, only this in functions invoked with different contexts. — user2864740
– user2864740, Commented Dec 3, 2013 at 22:19
See stackoverflow.com/questions/14561723/this-in-callback-functions , stackoverflow.com/questions/346015/… , stackoverflow.com/questions/10120271/… and similar — user2864740
– user2864740, Commented Dec 3, 2013 at 22:21
I put back in the jquery-deferred tag for use of resolveWith, which tries to approach the problem from the opposite way (e.g. specifies a context, doesn't bind to an existing context). If that "does not solve the issue" then this is already wrong in the context resolveWith is used. — user2864740
– user2864740, Commented Dec 3, 2013 at 22:26
Does that code actually run? I could understand this.getData().then(this.show); (though you may still have the same issue). — Beetroot-Beetroot
– Beetroot-Beetroot, Commented Dec 4, 2013 at 5:36

jeremyalan · Accepted Answer · 2013-12-03 22:54:21Z

7

In agreement with user2864740, the issue is most likely caused because this is not what you expect it to be when show is invoked as a callback. To make this work properly, you need to capture the proper this in a closure (e.g. var that = this;), and invoke it explicitly.

In other words...

FunctionX.prototype.setup = function() {
   var that = this;

   this.getData().then(function () {
      that.show();
   });
}

EDIT: For a slightly cleaner syntax (using underscore.js):

FunctionX.prototype.setup = function() {
   var that = this;

   this.getData().then(_.bind(this.show, this));
}

edited Dec 3, 2013 at 22:54

answered Dec 3, 2013 at 22:32

jeremyalan

4,8262 gold badges32 silver badges40 bronze badges

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

6 Comments

Erick Over a year ago

Yep but then it defeats completely the goal of the use of promises which is to chain to make the code cleaner.

jeremyalan Over a year ago

Hmm... I'm not sure I agree with you about defeating the purpose of promises. We're still using the callback nature of promises to chain functions together, we're just chaining a new function that wraps the existing function. If it's just a matter of cleaner syntax, see my edit.

Beetroot-Beetroot Over a year ago

Where did underscore suddenly come from?

Erick Over a year ago

@Beetroot-Beetroot it comes from underscorejs (underscorejs.org/#bind). The idea is nice but I can't use UnderscoreJS. Fortunately enough, the native js function bind was enough to solve the problem via this.getData().then(this.show.bind(this));.

jeremyalan Over a year ago

@Beetroot-Beetroot Fair question, I prefer the original syntax, it's not worth pulling in underscore.js just for this purpose, but useful if you're already using it for other things.

|

Collectives™ on Stack Overflow

How to access an instance variable within a Promise callback?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related