`this` variable is not accessible outside js methods or packages in angular2 typescript

Question

this variable is not accessible outside js methods or packages in angular2 typescript.

public mousekeyAction() {
            var mc=0,kc=0;           
        gkm.events.on('key.pressed', function (data) {
          this.keyscount= kc++;
          console.log(this.keyscount);
        });
        // Listen to all mouse events (click, pressed, released, moved, dragged)
        gkm.events.on('mouse.*', function (data) {
            this.mousecount=mc++;
           console.log(this.mousecount);
        });
    }

Assign this to another variable outside callbacks

Jyothi Babu Araja
– Jyothi Babu Araja

2017-03-22 05:26:53 +00:00
Commented Mar 22, 2017 at 5:26 — Jyothi Babu Araja
– Jyothi Babu Araja, Commented Mar 22, 2017 at 5:26

Pardeep Jain · Accepted Answer · 2017-03-22 05:27:43Z

1

you have to use fat arrow as function/callback instead of simple function. this will maintain the scope of this even outside the function too.

Use your function like this :-

public mousekeyAction() {
        var mc=0,kc=0;           
        gkm.events.on('key.pressed', (data) => {
            this.keyscount= kc++;
            console.log(this.keyscount);
        });
        // Listen to all mouse events (click, pressed, released, moved, dragged)
        gkm.events.on('mouse.*', (data) => {
            this.mousecount=mc++;
            console.log(this.mousecount);
        });
    }

for more info refer here

https://basarat.gitbooks.io/typescript/docs/arrow-functions.html

answered Mar 22, 2017 at 5:27

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

1 Comment

RobG Over a year ago

The scope of this is always the current execution context. For arrow functions, this is lexical and adopted from the this of the execution context in which they are defined.

Jyothi Babu Araja · Accepted Answer · 2017-03-22 05:30:14Z

0

Assign this to another variable as below

public mousekeyAction() {
  var mc = 0,
    kc = 0,
    self = this;
  gkm.events.on('key.pressed', function(data) {
    self.keyscount = kc++;
    console.log(self.keyscount);
  });
  // Listen to all mouse events (click, pressed, released, moved, dragged)
  gkm.events.on('mouse.*', function(data) {
    self.mousecount = mc++;
    console.log(self.mousecount);
  });
}

Since callback context is different from context of expected this.

edited Mar 22, 2017 at 5:30

answered Mar 22, 2017 at 5:29

Jyothi Babu Araja

10.3k3 gold badges33 silver badges41 bronze badges

6 Comments

Jyothi Babu Araja Over a year ago

@PardeepJain Y so?

Pardeep Jain Over a year ago

this will refer to the gkm.events.on function instance thats y this will not work according to me

praveenkumar s Over a year ago

can i use self.keyscount anywhere as global?

Jyothi Babu Araja Over a year ago

@praveenkumars not anywhere only inside the method it is defined.

praveenkumar s Over a year ago

@jyithi I found a complete solution using arrow function allows to use this inside jsfunction

|

Collectives™ on Stack Overflow

`this` variable is not accessible outside js methods or packages in angular2 typescript

2 Answers 2

1 Comment

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Related