Passing JavaScript function to another function within object loses object variable scope

Question

I have a 3rd-party library that performs Facebook authentication and I need to pass it a callback handler. This works fine, but in the callback function it cannot set other params of the object.

I created this simple test and need help to understand why the 3rd case does not work, to simulate what is happening in my app.

const Test = {
 uid: null,
 test() {
    this.testAgain(this.updateUID);
 },
 testAgain(updater) {
   updater(7);
 },
 updateUID(id) {
   this.uid = id;
 }
};

alert(Test.uid); // expect null, got null

Test.updateUID(3);
alert(Test.uid); // expect 3, got 3

Test.test();
alert(Test.uid); // expect 7, got 3 ???

I appreciate suggestions on how to get the 3rd case to work. I have to pass the function to the Facebook auth library and when FB calls that function, it needs to be able to update params of the object.

Pranesh Ravi · Accepted Answer · 2016-10-13 04:05:54Z

2

When you pass that method in as an argument the reference to the object gets 'stripped' so to speak. So when you are setting this.uid, it's setting a property on an object that is no longer 'Test'. To keep the reference you can use bind

test() {
  this.testAgain(this.updateUID.bind(this));
},

edited Oct 13, 2016 at 4:05

Pranesh Ravi

19.2k10 gold badges51 silver badges70 bronze badges

answered Oct 13, 2016 at 4:01

jhummel

1,76414 silver badges23 bronze badges

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

1 Comment

Mike S. Over a year ago

This worked. Thanks. I will accept answer in 5 minutes when it allows me.

Collectives™ on Stack Overflow

Passing JavaScript function to another function within object loses object variable scope

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related