在 React 中经常会用到 ES6 中的 class，但是在 class 中使用箭头函数绑定 this 时，往往需要手动添加 bind 方法来处理 this 的绑定问题，这种方式在代码中并不优雅。本文将介绍如何使用“Decorators”（装饰器）来优雅地处理 ES6 中的 bind 绑定 this 问题。
为什么需要处理 bind 绑定 this
在 ES6 中，箭头函数已经取代传统的 function 关键字作为定义函数的方式，箭头函数具有自身的 this 绑定机制。箭头函数中的 this 永远指向其上下文环境的 this，而不是其自身。
而当我们在 class 中使用箭头函数时，在组件中调用定义在组件中的方法时，由于 this 的绑定问题，无法访问到组件实例的属性和方法，这时就需要手动使用 bind 方法来正确地绑定 this。
例如，下面的代码中，当我们使用 buttonClick 方法来设置 state 中 count 的值时，由于 this 的绑定问题，无法访问到组件实例中的 state 属性。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ------ ------- --------- -
------------------ -
-------------
---------- - - ------ - --
-
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
------- --------------------------------------
----- ------ ------------------
---------
--
-
-使用 Decorators 处理 bind 绑定 this
为了优雅地解决上述问题，我们可以使用 ES7 中的 Decorators（装饰器）来处理 bind 绑定 this 问题。
Decorators 是 ES7 中新增的一个提案，可以用来在编译时修改类和类方法的行为。其基本用法是在类、类属性、类方法等前添加 @ 符号，来表明该类或类属性、类方法是被装饰的。
使用 Decorators 处理 bind 绑定 this 的方法非常简单，我们只需要定义一个 @autobind 的装饰器，然后在组件定义时使用该装饰器即可。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
-------- ---------------- ----- ----------- -
----- -- - -----------------
------ -
------------- -----
----- -
----- ------- - --------------
--------------------------- ----- -
------ --------
------------- -----
--------- -----
---
------ --------
--
--
-
----- ------ ------- --------- -
------------------ -
-------------
---------- - - ------ - --
-
---------
------------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
------- ---------------------------
----- ------ ------------------
---------
--
-
-在上面的代码中，我们定义了一个 @autobind 的装饰器函数，它的作用是修饰类中的方法，使方法在定义时自动绑定 this，无需手动添加 bind 方法。
在装饰器中，我们使用了 Object.defineProperty 来动态地给实例对象添加新的属性并绑定函数。然后，我们再使用 Object.defineProperty 来修改方法的 descriptor，将其返回。
接着，在组件中，我们使用 @autobind 装饰器来修饰类中的 buttonClick 方法，这样我们无需手动绑定 this，即可访问组件实例中的 state 属性。
总结
在使用 React class 组件开发时，处理 bind(this) 的问题是我们不可避免的任务。使用 Decorators 装饰器优雅地解决这个问题，让代码更简洁、易读。在实际开发中，使用装饰器可以显著减少代码量，并且更好地遵循“单一职责原则”的设计原则。
示例代码
完整的示例代码可以在下面的链接中找到：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f041c5f6b2d6eab3a3913a