Javascript arrow function this keyword issue

Question

I have following code:

window.$(".my-class").datepicker({
    ...
    onSelect: function() {

        var event = new CustomEvent("input", {});
        this.dispatchEvent(event);
    },
    ...

and it works. But once I change the function to arrow function

window.$(".my-class").datepicker({
    ...
    onSelect: () => {

        var event = new CustomEvent("input", {});
        this.dispatchEvent(event);
    },
    ...

i get error on this saying it doesn't have param dispatchEvent. Why my arrow function has different this?

Cause arrow functions have no context at all. `this` therefore refers to the function the datepicker code is in, therefore probably being *window* — Jonas Wilms, Nov 19 '17 at 11:28
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this — caramba, Nov 19 '17 at 11:30
I see..strange is when I put a brakepoint into source file in browser devtools and I run the `this.dispatchEvent()` it works. — n1_, Nov 19 '17 at 11:33

score 0 · Accepted Answer · answered Nov 19 '17 at 11:29

0

In the second case , this refers to the function the datepicker function, not the actual window

if an arrow function appears in the top scope, its this argument will always refer to the global scope, when an arrow function inside a regular function will have its this argument the same as its outer function

answered Nov 19 '17 at 11:29

Sajeetharan

216,225
63
350
396

Obvious duplicates don't need answers, just close votes and comments (if needed). – T.J. Crowder Nov 19 '17 at 11:38
@T.J.Crowder i am not aware of that question – Sajeetharan Nov 19 '17 at 11:39
It just takes a quick search. This question is asked at least weekly in the [js] tag. – T.J. Crowder Nov 19 '17 at 11:39

Javascript arrow function this keyword issue

1 Answers1