How to access this keyword within new style anonymous function in javascript

Question

Consider a very simple snippet of HTML and some slightly different methods of assigning an event handler to the HTML SELECT element. The problem lies with the use of anonymous functions of the form ( e )=>{ alert( this.value ) }

<select name='radius'>
    <option>1
    <option>2
    <option>3
    <option>4
    <option>5
    <option>10
</select>



<script>
    /*
        this works fine, as you'd expect
    */
    const changehandler=function(e){
        alert( this.value + ' '+e.target )
    }
    document.querySelector( 'select[name="radius"]' ).addEventListener( 'change', changehandler );


    /*
        this works fine using `this` within the event handler when using the more traditional
        anonymous function
    */
    document.querySelector( 'select[name="radius"]' ).addEventListener( 'change', function(e){
        alert( this.value )
    });


    /*
        this does not work as expected. `this` does not refer to the HTML element in this
        case - it now refers to `[object Window]`
    */
    document.querySelector( 'select[name="radius"]' ).addEventListener( 'change', e=>{
        alert( this.value )
    });
</script>

I thought I might be able to bind to the HTML element, like this:

let select=document.querySelector( 'select[name="radius"]' );
    select.addEventListener( 'change', e=>{ alert( this ) }.bind( select ) );

This however causes an error Uncaught SyntaxError: missing ) after argument list

So, the question is can I access this keyword in these new style anonymous functions somehow and for it to refer to the HTML element to which the event handler is assigned? Is there some little trick I have overlooked?

That's what arrow functions are *for*; they don't bind their own scope. When that's not the behavior you want, use the "traditional" function declarations. — Daniel Beck, Apr 14 '19 at 15:42
Ok, thanks @DanielBeck - I guess there must be text somewhere on the interwebs to make that known but I know not where. Looks like traditional style is the only way in certain instances then. — Professor Abronsius, Apr 14 '19 at 15:57
Function declarations are function declarations. Function expressions are function expressions. Arrow functions are arrow functions. They are all different tools for different jobs. There isn't a "traditional / new" divide. — Quentin, Apr 14 '19 at 16:06
ok - thanks for pointing out the differences - or suggesting the duplicate by@FelixKling. Knwing that they were / are called "arrow functions" would have helped find the answer without having to bug the high heid yins of Stackoverflow — Professor Abronsius, Apr 14 '19 at 18:15

score 2 · Accepted Answer · answered Apr 14 '19 at 16:01

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Arrow functions are useful when you want to retain the parent scope; if you need the function to have its own this, use the "traditional" function() {...} structure.

How to access this keyword within new style anonymous function in javascript

1 Answers1