如何在箭头函数中使用“this”来引用单击的元素[重复]答案

【问题标题】：How to use 'this' in an arrow function for referencing the clicked element [duplicate]如何在箭头函数中使用“this”来引用单击的元素[重复]
【发布时间】：2024-05-23 22:40:01
【问题描述】：

HTML

<div class="sym-box" data-card="0">
    <div id="a"><img src="..."></div>
</div>
<div class="sym-box" data-card="1">
    <div id="b"><img src="..."></div>
</div>
<div class="sym-box" data-card="2">
    <div id="c"><img src="..."></div>
</div>

var attribute;

function myFunction() {
    attribute = this.getAttribute('data-card');
}

var symboxes = document.getElementsByClassName('sym-box');

for (i = 0; i < symboxes.length; i++) {
  symboxes[i].addEventListener('click', myFunction, false);
}

上面的代码按预期工作，“this”引用了点击的元素。但是，当我将其编写为箭头函数时，我得到“未捕获的 TypeError：this.getAttribute 不是函数”，因为“this”现在指的是窗口对象。

const myFunction = () => {
    attribute = this.getAttribute('data-card');
};

所以我的问题是如何将 myFunction() 重写为箭头函数，其中“this”指的是被点击的元素？

注意： 我的问题已被标记为重复，但我要求在使用箭头函数时解决相同的问题。只是被告知“你不能”或“不要”并没有回答我的问题。

【问题讨论】：

简单，你不能——箭头函数this定义的很明确，不能是被点击的元素
如果出于某种原因您坚持使用箭头语法，请使用event.currentTarget 而不是this。

标签： javascript ecmascript-6 arrow-functions

【解决方案1】：

所以我的问题是如何将 myFunction() 重写为箭头函数这里的“this”指的是被点击的元素？

将myFunction 定义为箭头函数，this 指的是定义它的范围。

使用event.target（如果你还想使用箭头函数）

const myFunction = (event) => {
    attribute = event.currentTarget.getAttribute('data-card');
};

【讨论】：

@Coffeebean 如果您没有使用箭头函数而是使用常规函数var myFunction = function()... ，那么您可以使用fun.bind (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) - 来实现。 symboxes[i].addEventListener('click', myFunction.bind(symboxes[i])。小提琴：jsfiddle.net/0o1ujo4c。但是发布的答案以一种不错的方式解决了问题。
您将希望使用.currentTarget，而不是.target。图片很可能会被点击，但它没有data-card 属性。
@Bergi 是的，你是对的，img 被返回了
@bergi 进行了更改，感谢您突出显示相同的内容。

【解决方案2】：

您不能覆盖箭头函数的this 值。该箭头函数的this 值将从其执行上下文中获取。一旦绑定，就不能被替换或覆盖。这是基本规则。

const myFunction = () => {
    attribute = this.getAttribute('data-card');
};

因此，在您的代码中，myFunction 变量声明范围内可用的this 值将被获取并绑定到函数。这里的经验法则是，不要对事件监听器使用箭头函数。

您可以阅读有关箭头函数的更多信息here。

【讨论】：