Accessing object properties in listener method

Question

Let's say I have the following code:

var Obj = function() {
   this.property = 1;
   this.arr = [...] // array containing elements we want to add event listeners to
   for (...) {
      this.arr[i].addEventListener("click", this.listener, false);
   }
}

Obj.prototype.listener = function() {
   console.log( this.property ); // DOES NOT WORK! *this* does not point to Obj.
}
var a = new Obj();

How do I access object properties (and methods) within a listener? I would assume I'd need to pass it as a parameter? Is the way I'm going about this structurally wrong?

Might be helpful to understand whats going on: http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work — Johannes Merz, Sep 02 '16 at 15:33

score 1 · Accepted Answer · answered Sep 02 '16 at 15:34

When the function is called as an event listener, the context (this) is changed to something other that the object itself.

To resolve this, manually bind the context to the object instance in the constructor using bind(). This way, this will always point to the object instance, independent of the calling context:

var Obj = function() {
  this.property = 'foo';
  this.listener = this.listener.bind(this);
}

Obj.prototype.listener = function() {
  console.log(this.property);
}

var a = new Obj();
a.listener.call({});

score 1 · Answer 2 · answered Sep 02 '16 at 15:36

As suggested by @Tushar, you can use Function.prototype.bind() and pass this.property as parameter

<body>
  click
  <script>
    var Obj = function() {
        var obj = this;
        this.property = 1;
        this.arr = [document.body];
        for (var i = 0; i < obj.arr.length; i++) {
          obj.arr[i].addEventListener("click"
          , obj.listener.bind(obj.arr[i], obj.property), false);
        }
      }
    // note order of parameters; e.g., `prop`, `e`
    Obj.prototype.listener = function(prop, e) {
      console.log(prop, e); // `1`, `event` object
    }
    var a = new Obj();
  </script>
</body>

Accessing object properties in listener method

2 Answers2