在 JavaScript 中，this 关键字是一个比较容易出问题的地方。当一个函数被调用时，它的 this 值是由该调用的上下文决定的。但是，当我们把一个方法从对象中取出来，把它当作一个普通函数调用时，this 值就会变得不可靠。为了解决这个问题，我们通常需要使用 bind() 函数来显式地将 this 绑定到对象上。然而，这会需要我们手动做出一系列的绑定操作，代码显得很冗余。这时候就可以使用 auto-bind-es5 这个 npm 包来自动完成这些操作了。
auto-bind-es5 的安装
$ npm i auto-bind-es5
auto-bind-es5 的使用
auto-bind-es5 会自动将类中的所有函数绑定到类实例上，包括构造函数中的函数。使用方式如下：
-- -------------------- ---- -------
----- -------- - -------------------------
----- ------- -
------------- -
-------- - ------
-- --------
---------------
-
-------- -
----------------------
-
-
----- ------- - --- ----------
----- - ------ - - --------
--------- -- ------在上面的例子中，我们首先引入了 auto-bind-es5 包并将其存储在一个变量中。然后，在 MyClass 类的构造函数中调用了 autoBind(this) 函数来执行自动绑定操作。这个操作将所有函数都绑定到 MyClass 类的实例上。最后，我们将 sayFoo 方法从 myClass 实例中解构出来并直接调用，可以看到输出的是 "bar"。
auto-bind-es5 的高级用法
除了把 auto-bind-es5 作为一个函数来使用之外，它还支持一些高级用法。
1. 继承
如果你想要在一个继承类中自动绑定函数，可以使用 inherit 方法。例如：
-- -------------------- ---- -------
----- -------- - -------------------------
----- ----------- -
------------- -
-------- - ---------
-- --------
---------------
-
-------- -
----------------------
-
-
----- ---------- ------- ----------- -
------------- -
--------
-------- - --------
---------------
-
-------- -
----------------------
-
-
----- ---------- - --- -------------
----- - ------- ------ - - -----------
--------- -- ---------
--------- -- --------这里我们声明了一个 ParentClass 父类和一个 ChildClass 子类。在父类中，我们调用了 autoBind(this) 函数，这样我们定义的 sayFoo() 方法就会被自动绑定到父类的实例上。在子类中，我们继承了父类，并且继续使用 autoBind(this) 函数来将 sayBar() 方法绑定到子类的实例上。
2. 排除函数
如果你想要排除一些函数不被自动绑定，可以使用 exclude 方法。例如：
-- -------------------- ---- -------
----- -------- - -------------------------
----- ------- -
------------- -
-------- - ------
-- ------------ --- --
-------------- - -------- ------- ---
-
-------- -
----------------------
-
----- -
-------------------
-
-
----- ------- - --- ----------
----- - ------- --- - - --------
--------- -- ------
------ -- ------------- --- -- --- - --------在这个例子中，我们使用 exclude 参数来指定不要自动绑定的函数，例如排除了 baz 方法。因此，在 myClass 实例中解构出的 baz 方法将会抛出一个 TypeError 错误。
总结
auto-bind-es5 是一款优秀的 npm 包，使用非常简单，并且支持继承、排除函数等高级用法。通过使用它，我们可以让代码变得更简洁、更易于维护，同时也可以避免一些 this 关键字带来的麻烦。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb6f5b5cbfe1ea06116aa