javascript - jQuery - 这些函数调用之间的区别

Question

我有一个包含一些事件的 JS 类

jQuery(document).on('click', '.btn-details', (e) => {

但我无法访问 .btn-details 的数据属性。

当我做

时

jQuery(document).on('click', '.btn-details', function() {

我可以访问 btn-details 元素的数据属性，但不能访问 this.myvar-class-variable。

这里有什么问题吗？这个 (e) => 到底是什么意思？

Answer 1

它们都是函数调用。不同之处在于，在第一次调用中，您使用 arrow function与事件参数 (e)。

箭头函数

(param1, param2, …, paramN) => { statements }

如文档中所述

An arrow function does not create it's own this context, rather it captures the this value of the enclosing context

所以，我假设您正在尝试使用 this 关键字获取数据属性

$(this).attr('data-test')

但是，在箭头函数中，this 指的是封闭上下文的对象，而不是特定的对象。

<小时/>

第二个是经典的函数调用，this引用clicked元素，因此这里可以成功获取'data-test'属性。

<小时/>

示例

检查这个live example

在这两个按钮中，this 对象都写入 console.log 中。使用普通函数，控制台输出单击的元素(按钮)，但是，使用箭头函数，控制台输出 window 对象。