Can not use the `this` in my callback function

Question

I have a Util method:

util.delete_selection = function (context, delete_url_func, selection, cb=undefined) { ... }

and when I use the delete_selection method, I pass the cb like bellow, there will get a issue, I can not in the callback function to use the this:

Util.delete_selection(
      this,
      this.delete_url_function,
      this.selection,
      function (bool) {
        debugger
        this.$emit('callback')   // there the `this` is undefined.
        console.log('cb')
      }
    )

And I tried use the arrow function to replace it, find it can not use the arrow function there.

EDIT

When I use the arrow function like bellow, the WebStorm will report error there:

If I change the bool to other param name, it still get error:

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Durga, Apr 06 '18 at 09:06

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

you might want to replace
function (bool) {
with
bool => {

but since you don't even use bool itself, you could omit it and write: () => { instead.

why?

that's a lambda. it does not have it's own context.
function however has.
this inside function blocks always refer to the function scope and not the scope of the upper layer.

you can always override the context of a function using either .bind(context) to cause a rebind or use .call(context, ...arguments) or .apply(context, [...arguments]) but a lambda would probably be a good idea here.

using a lambda should actually work here. just run this and you see it in action:

const data = [{
  some: 'thing',
  text: 'foo'
}, {
  some: 'thing else',
  text: 'bar'
}];

const doSomething = function (arg, func) {
  console.log('some:', arg.some);
  func();
};

data.map(context => {
  (function () {
    
    doSomething(this, () => {
      console.log('text:', this.text);
    });
    
  }).call(context);
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 06 '18 at 08:58

GottZ

4,824
1
36
46

hi, bro, see my EDIT, why I use the `bool => {}` will report error? – sof-03 Apr 06 '18 at 09:07
hm. maybe your webstorm setup does not allow es6 javascript yet. wich is weird since all browsers do. – GottZ Apr 06 '18 at 09:48
just replace `bool` with `()` and see if that works. – GottZ Apr 06 '18 at 09:49
it seems like webstorm thinks `bool` is a reserved word – GottZ Apr 06 '18 at 09:50
just added a snippet. seems to work as intended. you might want to figure out why webstorm is giving you a bad day. – GottZ Apr 06 '18 at 10:00

score 0 · Accepted Answer · answered Apr 06 '18 at 08:59

0

Since, this gives the reference of the container inside which it is being used, when you use this inside callback it gives you the scope of the callback function and not the parent function. Thus, you can bind this in the callback as:

Util.delete_selection(
      this,
      this.delete_url_function,
      this.selection,
      function (bool) {
        this.$emit('callback')
        console.log('cb')
      }.bind(this)
    )

answered Apr 06 '18 at 08:59

Ankit Agarwal

30,378
5
37
62

thank you, this solved my problem, but why i can not use the arrow function? – sof-03 Apr 06 '18 at 09:02
i wonder who downvoted mine. it essentially explains this quite well too. – GottZ Apr 06 '18 at 09:03
the time is not yet, there is a interval. – sof-03 Apr 06 '18 at 09:03
Tell me whether is your download the @GottZ 's answer? – sof-03 Apr 06 '18 at 09:24
@sof-03 why should I downvote his answer? As his answer and mine answer is completely different. – Ankit Agarwal Apr 06 '18 at 09:27
@sof-03 you can also do upvote to mark it as useful. – Ankit Agarwal Apr 06 '18 at 13:35

score 0 · Answer 3 · answered Apr 06 '18 at 09:02

this in javascript is a bit confusing. Have a look: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

You need to bind this to the callback

Util.delete_selection(
      this,
      this.delete_url_function,
      this.selection,
      function (bool) {
        debugger
        this.$emit('callback')   // there the `this` is undefined.
        console.log('cb')
      }.bind(this)
    )

Can not use the `this` in my callback function

3 Answers3

why?