在 JavaScript 中轻松处理 this每日前端夜话0xD1

每日前端夜话0xD1

每日前端夜话，陪你聊前端。

每天晚上18:00准时推送。

正文共：1515 字

预计阅读时间：10 分钟

作者：Dmitri Pavlutin

翻译：疯狂的技术宅

来源：dmitripavlutin

我喜欢 JavaScript 中能够更改函数执行上下文（也称为 ）的特性。

例如，你可以在类似数组的对象上使用数组方法：

但是从另一方面来说， 关键字很难掌握。

你可能会经常去检查 的值不正确的原因。以下各节将会教给你一些把 绑定到所需的值简单的方法。

在开始之前，我需要一个辅助函数 。它只是用来执行作为参数的函数：

现在，让我们继续了解围绕 的错误的本质：方法分离。

1. 方法分离问题

类包含字段 和 。另外，它还有 方法，返回全名。

的一种可能的实现方式是：

你会看到 函数作为构造函数被调用：。在 函数内部创建新的实例。

返回 的全名：。不出所料， 方法中的 等同于 。

如果帮助函数执行 方法将会发生什么：

执行结果不正确：。这个问题是由 值不正确引起的。

现在，在方法 中， 的值是全局对象（浏览器环境中的 window）。假设 等于 ，则对 的评估为 。

发生这种情况的原因是在调用 时该方法已与对象分离。基本上只是发生在常规函数调用上（而不是方法调用）：

这种效果就是我所说的与对象分离的方法。当方法被分离并随后执行时，它与其原始对象没有任何关系。

为了确保方法中的 指向正确的对象，你必须：

以属性访问器的形式执行该方法：

或将 静态绑定到包含的对象（使用箭头函数， 方法等）

在方法分离问题中，返回的 不正确，以下面不同的形式出现：

在设置回调时

在设置事件处理程序时

让我们继续了解一些有用的方法，来解决即使方法与对象是分开的，也能使其始终指向所需对象的问题。

2. 关闭上下文

使 指向类实例的最简单方法是使用附加变量 ：

会静态关闭 变量，从而有效地手动绑定到 。

现在，当调用 时返回 ，因为 方法始终具有正确的 值，所以能够正常工作。

3. 使用箭头功能对 this 进行语义化

有没有一种可以在没有其他变量的情况下静态绑定 的方法？是的，这正是箭头函数的作用。

为了使用箭头函数，让我们重构 ：

箭头函数用词法绑定 。简而言之，它使用定义在其中的外部函数的 值。

我建议在所有需要使用外部函数上下文的情况下都使用箭头函数。

4.绑定上下文

让我们再向前迈出一步，并使用 ES2015 类来重构 。

不幸的是，即使用了新的类语法， 仍会返回 。

在使用类的情况下，不能使用附加的变量 或箭头函数来固定 的值。

但是有一个涉及 bind() 方法的技巧，它将方法的上下文绑定到构造函数中：

构造函数中的 把 方法绑定到类实例。

可以正常工作，返回 。

5. 胖箭头方法

上述使用手动上下文绑定的方法需要样板代码。幸运的是，仍有改进的空间。

你可以用 JavaScript 的类字段建议来定义胖箭头方法：

胖箭头函数 已绑定到类实例，即使你将方法与其对象分离开也是如此。

这是在类中绑定 的最有效，最简洁的方法。

六. 结论

与对象分离的方法对 产生了许多误解。你应该意识到这种影响。

要静态绑定 ，你可以手动使用一个附加变量 来保存正确的上下文对象。但是更好的选择是使用箭头函数，它天生被设计为按词法绑定 。

在类中，你可以使用 方法在构造函数内部手动绑定类方法。

如果你想跳过编写样板代码，那么新的 JavaScript 建议类字段会带来胖箭头方法，该方法会自动将 绑定到类实例。

原文：https://dmitripavlutin.com/fix-this-in-javascript/

下面夹杂一些私货：也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新，这是我们第一次将全部课程列表对外开放。

愿你有个好前程，愿你月薪30K。我们是认真的 ！

唠一唠怎样才能拿高薪