pass 'this' to callback in a class ecmascript 6

Question

I have a Class in ecmascript 6 . I need to pass a value of 'this' to a callback.

I tried using .bind(this). So far does not seem to work. I also tried setting var _this = this; and using _this within the callback. it still does not work

     class Modal {
        constructor(modal) {
        this._modal = modal;
        this.id = this._options.id;      
       }
    }

    open(opts) {
        let modalOptions = {
            size: opts.size || '',
                templateUrl: 'modal.html',
                controller: function controller($scope, $uibModalInstance) {
                    var _this = this; 
                    this._options = {
                        id: opts.id
                    };
                    this.hcbuttons: [{id: '1', name: 'test'}, {id: '2', name: 'abc'}];
                    publisher.subscribe('triggered', this._options.id, function(event, creator) {
                        //as soon as we subscribe to the published event
                        var result = this.hcbuttons.filter(function( obj ) {
                            return obj.id == creator;
                        })[0];
                        if(result.sync === true) {
                            console.log('disabledall');
                        }                         
                    }).bind(this);


        }

}

the modalinstance, i basically want to pass 'this.hcbuttons' to the callback — looneytunes, Apr 24 '16 at 07:18
@looneytunes, please fix the indentation and the brackets first, then explain what you've actually built there. Then we can talk on the same level — Thomas, Apr 24 '16 at 08:32
`this.hcbuttons: [{id: '1', name: 'test'}, {id: '2', name: 'abc'}];` is not valid syntax. If you want `this` to refer to the `Modal` instance, then you need to call `var _this = this;` in a context where `this` refers to the index (which is certainly not in the `controller` function). — Felix Kling, Apr 24 '16 at 08:43

Rajaprabhu Aravindasamy · Answer 1 · 2016-04-24T07:31:50.527

3

You are wrongly binding the this. You are calling the bind over the returned value of subscribe function. Function object only has the function bind in its prototype. So chance your code from this }).bind(this); to }.bind(this)).

Since you want to set this as the modal class,

 //change one
 open(opts) {
        var _this = this;
        let modalOptions = {
 //~~~~~~~~~~~~~~~~~~~~~~~~~~~
 //change two
 }.bind(_this));

edited Apr 24 '16 at 07:31

answered Apr 24 '16 at 07:22

Rajaprabhu Aravindasamy

66,513
17
101
130

tried it , still does not work @Rajaprabhu Aravindasamy – looneytunes Apr 24 '16 at 07:27
@looneytunes If you want `modalOptions` to be the `this` inside of that event then my first suggestion would work. If you want the `Modal` to be the `this` then use my second suggestion. – Rajaprabhu Aravindasamy Apr 24 '16 at 07:34

score 2 · Answer 2 · answered Apr 24 '16 at 07:30

If you are using ES2015, why not use lambdas (arrow functions)? They bind this automatically

open(opts) {
  let modalOptions = {
    size: opts.size || '',
    templateUrl: 'modal.html',
    controller: function controller($scope, $uibModalInstance) {
      this._options = {
        id: opts.id
      };
      this.hcbuttons = [{
        id: '1',
        name: 'test'
      }, {
        id: '2',
        name: 'abc'
      }];
      publisher.subscribe('triggered', this._options.id, (event, creator) => {
        let result = this.hcbuttons.filter(obj => obj.id === creator)[0];
        if (result.sync) {
          console.log('disabledall');
        }
      });
    }
  }
}

Here you can read more on arrow functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions and how they work (might help you in the future).

pass 'this' to callback in a class ecmascript 6

2 Answers2