使用带有jQuery回调的箭头函数时，“this”关键字的行为有所不同

Question

我有一个包含多行的表格，每行都有一个edit和delete按钮。

简而言之，当使用类.edit触发编辑按钮时，会弹出一个表单。除了课程名称，我还添加了一个独特的id id="edit-32"，其中数字会根据用户点击的行而变化。

我想解决的问题是在短划线后捕获id属性编号。以前，在ES5中，我只使用this keywoard来定位当前被点击的元素。但是在ES6中，this keywoard正在引用类环境。

ES5方法（返回唯一ID）

    //  Open edit form
    $('.edit').click(function(){

        // Return id attribute
        const id = $(this).attr('id'); 

        // print to console
        console.log(id); 
    }); 

ES6方法（返回undefined）

    //  Open edit form
    $('.edit').click(() => {

        // Return id attribute
        const id = $(this).attr('id'); 

        // print to console
        console.log(id); 
    });

有没有办法让箭头功能与ES5采用类似的方法？

Answer 1

普通函数中的

this解析为调用函数的对象，因此在这种情况下，this是被单击的元素。

箭头函数中的

this没有定义自己的this，而是使用了封闭执行上下文的this值。

在这种情况下，它不适用于箭头功能。你必须坚持使用沼泽标准功能。