Question

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

在第一种情况下

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

由于您正在使用箭头函数，此处的this对象将属于上下文外部函数$(document).ready，因此您可以看到整个DOM元素，如下面的代码段所示而不是点击的元素。

在第二种情况下

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

this引用click函数的上下文，因此返回单击的DOM元素

$(document).ready(function() {
        $('.principal').click(() => {
            console.log(this); 
        });
    })

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

Answer 2

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

所以你需要：

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

后者看起来像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

输出：

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

Answer 3

也将外部功能更改为箭头功能。

$( document ).ready ( ( ) => {
    $( '.principal' ).click ( ( ) => {
        alert ( $( this ).parent().html() ); 
    } );
} );

您也可以尝试（根据评论添加此选项）：

$( document ).ready ( function {
    $( '.principal' ).click ( ( ) => {
        alert ( $( this ).parent().html() ); 
    } );
}.bind ( this ) );

Answer 4

在箭头函数中，this从封闭的上下文中有其原始含义。在第一个示例中，this内部ready回调指向document，因此作为点击处理程序传递的箭头函数内的this也指向document。 /> 在具有正常功能的第二个示例中，点击处理程序this由jQuery内部绑定到调用click方法的元素。箭头函数不绑定this参数但使用封闭上下文 - 这就是为什么this不能像正常函数的cacse那样绑定。

在您的示例中，您不需要在点击处理程序中访问外部上下文，因此在这种情况下您不应使用箭头功能，请使用正常功能。

点击处理程序ECMA脚本6

4 个答案: