how to change the behavior of `this` keyword

Question

How to change the behavior of `this' in the below code. Currently, it is pointing to a click event on the HighChart. I want `this` here to refer to function in the class.
Hello.ts
 getPlotBands() {
.....
        click: function(e) {
          for(var p = 0; p < this.axis.plotLinesAndBands.length; p++) {
            var currentPlotBand = this.axis.plotLinesAndBands[p]; 
            currentPlotBand.svgElem.attr({fill: currentPlotBand.options.color});
            }
            this.svgElem.attr({fill:'#660066'});
            // this.fromSystemTime = String(new Date(this.options.from));
            this.fromSystemTime = moment(this.options.from).format("MM/DD/YY h:mm:ss");
            this.toSystemTime = String(new Date(this.options.to));
            console.log(moment(this.options.from).format("MM/DD/YY h:mm:ss"));
            (<HTMLInputElement>document.getElementById('fromSys')).value = 
                                      moment(this.options.from).zone("America/Los_Angeles").format('MM/DD/YY HH:mm');
            (<HTMLInputElement>document.getElementById('toSys')).value = 
                                         moment(this.options.to).zone("America/Los_Angeles").format('MM/DD/YY HH:mm');
            console.log('to date -', moment(1556906400000).utcOffset(-420).format('MM/DD/YY HH:mm'));  
            console.log(moment(1556906400000).zone("America/Los_Angeles").format('MM/DD/YY HH:mm'));
            // console.log('from', this.options.from);   
            // console.log('to', this.options.to);     
            console.log(this.options.from + 'and' + this.options.to)
            tagStartTimeForDetailsPage = +moment(this.options.from);
            tagEndTimeForDetailsPage = +moment(this.options.to);
`  this.storedResponse.setTagStartTimeForDetailsPage(+tagStartTimeForDetailsPage);
  this.storedResponse.setTagEndTimeForDetailsPage(+tagEndTimeForDetailsPage); 
        }` }
    I want here `this' to refer my storedResponse service injected in the class not chart obj.

The below 2 lines are giving the error 
`this.storedResponse.setTagStartTimeForDetailsPage(+tagStartTimeForDetailsPage);
  this.storedResponse.setTagEndTimeForDetailsPage(+tagEndTimeForDetailsPage); `

The above code is there inside Hello.Ts file having 1 method called getplotBands().so here i need to change the context of this.

any idea how to get it done?

you have to bind the click function to the class. `Whatever.click.bind(this)` - probably in the constructor of the `Whatever` class (you didn't disclose what class `click` is a member of) — Randy Casburn, Jun 19 '19 at 17:01
Have you tried creating an external function and calling that instead of an anonymous function? This should change the meaning of the "this" keyword. — Seano666, Jun 19 '19 at 17:01
Use arrow functions: read this https://stackoverflow.com/questions/40822109/typescript-how-to-keep-class-methods-event-handlers-context-to-this-instance — Michael Beeson, Jun 19 '19 at 17:02
if i use `click: (e) => {`... i'm unable to acces these lines for(var p = 0; p < this.axis.plotLinesAndBands.length; p++). is there anyway, i can change the below staements this.storedResponse.setTagStartTimeForDetailsPage(+tagStartTimeForDetailsPage); this.storedResponse.setTagEndTimeForDetailsPage(+tagEndTimeForDetailsPage); — AMARJIT KUMAR SINGH, Jun 19 '19 at 17:09
I have a doubt that have you written this click: function(e) {} in some typescript function such as func1(){click: function(e) {}}?? — Debabrata Paul Chowdhury, Jun 19 '19 at 17:14
@DebabrataPaulChowdhury, yes its there inside typescript function. — AMARJIT KUMAR SINGH, Jun 20 '19 at 00:14
func1(){ let self =thiis; click: function(e) {//use self for class reference}} use self to point class reference and use this will point HighChart in side the click.Hope this will be helpful. — Debabrata Paul Chowdhury, Jun 20 '19 at 02:44
@DebabrataPaulChowdhury, Thanks Debabrata, that is what I wanted. Thanks for the help. — AMARJIT KUMAR SINGH, Jun 21 '19 at 05:02

score 1 · Answer 1 · answered Jun 19 '19 at 17:01

1

Use an arrow function instead of function keyword:

click: (e) => {
  // ...
}

Plenty of questions about this on here, can't find one though :)

answered Jun 19 '19 at 17:01

Poul Kruijt

69,713
12
145
149

1

https://stackoverflow.com/questions/40822109/typescript-how-to-keep-class-methods-event-handlers-context-to-this-instance (for example) – Michael Beeson Jun 19 '19 at 17:02
If you search for `this callback`, you will find [the generic question/answer](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback). – ConnorsFan Jun 19 '19 at 18:10

how to change the behavior of `this` keyword

1 Answers1