Accessing Object property from within another object method

Question

I have a Javascript object that stores a bunch of methods, and also stores some variables. In the normal case when the methods are trying to access each other or the variable it works fine, but if the methods are called from out of scope (say, via another callback) they are no longer able to access the variable.

Example JSFiddle here: http://jsfiddle.net/3Lkuz2Lk/2/

Below is the sample code to illustrate the issue:

    var obj = {
      x: null,
      func1: function() {
     console.log('func1, x is ' + this.x);
      },

      func2: function() {
     console.log("func2");
        this.func1();

     var func1 = this.func1;
        func3(function() {
         func1();
        });
      }
    };

    function func3(callback) {
   console.log("func3");
   return callback();
    }

    obj.func2();

The output from the above code is:

func2
func1, x is null
func3
func1, x is undefined

What's not clear to me is why the second time func1 is called x is undefined?

If I need to accomplish this (i.e., be able to access the methods and variables within the object no matter which context they're called from), how can I accomplish that? I find the above approach to be unclean since I need to store the func1 reference in order to be make it available to the call to func3, and I'm hoping there's a cleaner/simpler approach.

score 1 · Answer 1 · answered Oct 08 '17 at 09:57

1

You have to use bind(this), read more about it here:

var func1 = this.func1.bind(this);

answered Oct 08 '17 at 09:57

Sebastian Kaczmarek

8,120
4
20
38

score 1 · Accepted Answer · answered Oct 08 '17 at 09:57

var obj = {
      x: null,
      func1: function() {
    console.log('func1, x is ' + this);
      },

      func2: function() {
    console.log("func2");
        this.func1();

    var func1 = this.func1;
        func3(func1);
      }
    };

    function func3(callback) {
  console.log("func3");
  return callback();
    }

obj.func2();

This is because this is different in both cases, in the first case this points to the Object while in the next one this refers to the global object/ window. you would have to do

var obj = {
      x: null,
      func1: function() {
    console.log('func1, x is ' + this.x);
      },

      func2: function() {
    console.log("func2");
        this.func1();

    var func1 = this.func1.bind(this);
        func3(func1);
      }
    };

    function func3(callback) {
  console.log("func3");
  return callback();
    }

obj.func2();

Mouser · Answer 3 · 2017-10-08T10:04:26.750

I've simplified the code. The problem is the reference. You call upon func3, which is in its own scope and not part of the scope chain of obj. So this refers to the scope of the func3. If you bind the this from obj to the callback it works.

var obj = {
  x: null,
  func1: function() {
    console.log('func1, x is ' + this.x);
  },

  func2: function() {
    console.log("func2");
    this.func1();

    func3(this.func1.bind(this));
  }
};

function func3(callback) {
  console.log("func3");
  return callback();
}

obj.func2();

Another solution using call is in this fiddle http://jsfiddle.net/3Lkuz2Lk/3/

Accessing Object property from within another object method

3 Answers3