访问子元素内的父作用域's onclick回调(Atom包）

Access parent scope inside child element's onclick callback (Atom Package)

本文关键字：回调 onclick Atom 元素 作用域 访问      更新时间：2023-09-26

我不确定您通常应该如何在Atom包中处理这一问题，但现在的情况是：

我创建了一个漂亮的按钮

playButton = document.createElement('button');
playButton.onclick = @funkyFreshCallback;

这将调用我的回调，定义为so

  funkyFreshCallback: (event, element) ->
    console.log(@);

现在，我想要的是能够使用元素的父作用域。看到@符号了吗？现在它返回按钮元素（因为这是当前这个，我知道）

现在我该如何访问作用域？定义funkyFreshCallback的是同一个？

此外，我真的不觉得这是我应该做的事情，但我没有找到太多文档。。。完全

在将父上下文设置为事件处理程序之前，可以将其绑定到函数上。

playButton.onclick = @funkyFreshCallback.bind(@);

避免上下文问题的另一种方法是设置一个调用funkyFreshCallback的函数。事件处理程序应该只处理事件，然后将所需的最小数据集传递给回调，如下所示：

playButton.onclick = (event, element) =>
    timePressed = Date.now();
    @funkyFreshCallback(timePressed);

使用上面的代码，funkyFreshCallback将使用您期望的上下文进行调用，并且不会接收到一个非常复杂的事件对象作为参数。这有助于为funkyFreshCallback编写单元测试变得更容易，并且应该简化回调，因为它们不必处理事件。

可维护JavaScript第7章中的更多内容

相关文章：