Accessing both 'this' variables in TypeScript

Question

In TypeScript, if you define a function using () => {...}, the this variable will refer to the instance of the surrounding class. But if you use function () {...}, the this variable will have its old JavaScript interpretataion.

Is there any way to access both of these this variables within a TypeScript function?

I occasionally need this when using JQuery in TypeScript:

class X {
    private v : string;
    constructor() {
        $('.xyz').on('change', function() {
            this.v = $(this).prop('value'); // Two different this's
        })
    }
 }

In the central line in the code, the first this should refer to the class X object, whereas the second this should refer to the JQuery object that triggered the event.

Rory McCrossan · Accepted Answer · 2016-07-15 08:04:38Z

6

In the change event handler this will refer to the .xyz element that raised the event only. If you want a reference to the containing X class then you need to store a variable holding that reference, like this:

class X {
    private v : string;
    constructor() {
        var _x = this;
        $('.xyz').on('change', function() {
            _x.v = $(this).prop('value'); 
        })
    }
 }

answered Jul 15, 2016 at 8:04

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Collectives™ on Stack Overflow

Accessing both 'this' variables in TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related