时间戳

首页 > 解决方案 > LitElement 和 .bind(this)

lit-element - LitElement 和 .bind(this)

问题描述

我发现有时您需要将上下文绑定到函数调用而有时不需要，这有点令人困惑。什么时候可以避免，什么时候不能？

这些行之间有什么区别？

<a @click="${this.handler.bind(this)}">link</a>

<a @click="${this.handler()}">link</a>

<a @click="${this.handler}">link</a>

<a @click="${()=>this.handler()}">link</a>

有时在constructor()你需要的时候

this.handler = this.handler.bind(this)

要使函数调用有效，有时您不会。所有这些案例之间有什么区别？

标签： lit-element

解决方案

在前 4 行中，我猜您通常将它们包装在${和之间}。提到这三行：

<a @click="${this.handler.bind(this)}">link</a>
<a @click="${this.handler}">link</a>
<a @click="${()=>this.handler()}">link</a>

效果会很相似。当您附加事件处理程序时，您需要传递对要调用的函数/方法的引用，而第二行：

<a @click="${this.handler()}">link</a>

很可能只是错误的。那是因为您将this.handler()在渲染完成后立即调用。唯一可能有意义的方法是该handler方法返回一个函数。

回到前 3 行：它们确实会产生非常相似的效果，因为在所有这些行中，您都将引用传递给本地方法渲染，但是：

  • 第一个不需要绑定，因为无论如何都会在this上下文中调用该方法（但我想它也没有伤害）
  • 第三个添加了匿名函数的定义作为事件处理程序，当被调用时它将调用this.handler

所以第二个基本上是最简单易读的。

在某些情况下需要调用 bind 时：从另一个上下文调用您的方法时需要这样做。假设您将它作为回调参数传递给在另一个类中运行的方法。当您的方法在那里被调用时，默认情况下它将具有该其他对象的上下文。因此，您需要使用 .bind(this) 来确保在元素的上下文中调用该方法时。

您的方法确实有效，但它是从另一个this. 所以也许这就是为什么有些时候你没有注意到需要.bind(this). 如果该方法只是显示一条消息，调用一些其他外部服务，或任何其他不属于您的对象定义的部分（不使用this.something），那么它可以在不使用绑定的情况下工作。

更新：事实上，我认为事件处理程序将始终在发起该事件的元素的上下文中运行。我猜.bind(this)当我们使用该@click=语法时， lit 就是这样做的，因为它很有意义。

推荐阅读