Question

考虑一个非常简单的HTML代码段，以及将事件处理程序分配给HTML SELECT元素的一些稍微不同的方法。问题在于使用( 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>

我认为我可以bind到HTML元素，如下所示：

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

但这会导致错误Uncaught SyntaxError: missing ) after argument list

因此，问题是我可以以某种方式访问这些新样式的匿名函数中的this关键字，并使其引用事件处理程序分配给的HTML元素吗？我忽略了一些小技巧吗？

Answer 1

箭头函数表达式在语法上是常规函数表达式的紧凑选择，尽管没有自己绑定到this，arguments，super或new.target关键字。

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

当您想保留父范围时，箭头功能很有用；如果您需要该函数具有自己的this，请使用“传统” function() {...}结构。

如何在JavaScript中的新型匿名函数中访问此关键字

1 个答案: