什么是 @mgjm/autobind？
@mgjm/autobind 是一个轻量级的 npm 包，它能够自动绑定类方法的 this 上下文。这使得在类实例化的过程中，我们可以通过简单的语法让类方法始终保持正确的 this 上下文。
安装
你可以使用 npm 或 yarn 安装 @mgjm/autobind 包。
使用 npm：
--- ------- --------------
使用 yarn：
---- --- --------------
使用
要使用 @mgjm/autobind 包，我们需要在类的 constructor 方法里面为我们想要自动绑定 this 上下文的方法加上装饰器 @autobind。具体的代码实现可以参考下面的示例：
------ - -------- - ---- -----------------
----- ------- -
------------- -
------------- - ----------
-
---------
-------- -
---------------------------
-
-
----- ------- - --- ----------
----- - ------ - - --------
--------- -- -- ---------在上面的示例代码中，我们先定义了一个名为 Example 的类。在 Example 类的 constructor 方法中，我们初始化了一个名为 property 的属性，然后在 method 方法上使用了 @autobind 装饰器。
在 method 方法内，我们尝试输出了 property 属性的值。此时我们将 method 方法绑定到了 example 实例上，因为我们使用了解构赋值的方式将 method 取出来了。如果不使用 @autobind 装饰器的话，在调用 method 方法时，它的 this 上下文将会是 undefined。
使用场景
在现代的 React 项目开发中，我们的代码通常会使用 ES6 classes 来定义 React 组件。然而，在类组件的方法中访问 this 上下文通常会遇到困难。
在 React 组件中，我们的 render 方法中通常会返回一些嵌套的组件，而这些组件是通过 props 传入的，因此在子组件中访问 this 上下文时，通常会发生一些错误。使用 @mgjm/autobind，我们可以轻松地让组件的方法保持正确的 this 上下文。
下面是一个使用 React 的示例代码：
------ ------ - --------- - ---- --------
------ - -------- - ---- -----------------
----- ------- ------- --------- -
------------------ -
-------------
---------- - -
------ ---
--
---------------------- - ----------------------------------
----------------- - -----------------------------
-
---------
------------------------ -
---------------
------ -------------------
---
-
---------
------------------- -
-----------------------
------------------------------
-
-------- -
----- - ----- - - -----------
------ -
------
-------
-----
------ ----------- ------------- --------------------------------- --
--------
------- ------------- -------------------------------------------
-------
--
-
-在上面的示例代码中，我们先定义了一个名为 Example 的组件。在 Example 组件的 constructor 方法中，我们初始化了一个名为 value 的状态，并使用了 @autobind 绑定了 handleInputChange 和 handleSubmit 方法。
在 render 方法中，我们渲染了一个表单，这个表单包含一个输入框和一个按钮。我们将 value 状态和 handleInputChange 方法和输入框绑定，将 handleSubmit 方法和按钮绑定。
现在，无论是在 handleInputChange 还是 handleSubmit 方法中，我们都可以轻松地访问到正确的 this 上下文，而不需要担心遇到各种奇怪的错误。
结论
@mgjm/autobind 是一款轻量级的 npm 包，它能够自动绑定类方法的 this 上下文。这使得在类实例化的过程中，我们可以通过简单的语法让类方法始终保持正确的 this 上下文。使用 @mgjm/autobind，我们可以在 React 组件中轻松地维护正确的 this 上下文，从而更加专注于我们的业务代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600568f981e8991b448e4a84