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: stackoverflow.com/questions/3127429/… — Johannes Merz
– Johannes Merz, Commented Sep 2, 2016 at 15:33

TimoStaudinger · Accepted Answer · 2016-09-02 15:34:07Z

1

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({});

answered Sep 2, 2016 at 15:34

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

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

Comments

guest271314 · Accepted Answer · 2016-09-02 15:36:42Z

1

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>

answered Sep 2, 2016 at 15:36

guest271314

1

Collectives™ on Stack Overflow

Accessing object properties in listener method

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related