javascript - 点击处理程序 ECMAscript 6 中的范围

Question

这个问题已经有答案了:

Javascript - arrow functions this in event handler? (5 个回答)

Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? (5 个回答)

已关闭 6 年前。

作为 this 的范围可用于 ES6箭头函数。

但在这种情况下我无法访问 this在箭头函数中，当它与普通的匿名函数一起使用时

示例

示例 1

$(document).ready(function() {
    $('.principal').click(() => {
        alert($(this).parent().html()); // 'this' is undefined here
    });
})

示例 2

$(document).ready(function() {
    $('.principal').click(function() {
        alert($(this).parent().html()); // 'this' is available here
    });
})

Answer 1

原因是 jQuery 将单击处理程序中的 this 对象显式绑定(bind)到捕获事件的元素。获取该上下文的唯一方法是使用标准函数，因为箭头函数实际上会忽略此绑定(bind)。

所以你需要:

• 坚持使用标准回调函数，或者
• 使用 jQuery 传递给回调的事件对象参数的 currentTarget 属性

后者看起来像这样:

$(document).ready(function() {
    $('.principal').click((e) => {
        console.log($(e.currentTarget).parent().html());
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><button class="principal">Click me</button></div>

输出:

<button class="principal">Click me</button>