在 ES6 中引入了 class 关键字，使得面向对象的编程方式更加方便，同时也在一定程度上解决了 ES5 中面向对象的一些限制。在 ES7 中，继续完善了 class 的使用方式，但在实际开发中，还是会遇到一些问题。本文主要介绍如何解决 ES7 中使用 class 定义的问题。
问题描述
在 ES7 中，使用 class 定义一个类，然后在该类中定义一个静态方法或属性时，使用了 this 关键字，然后该静态方法或属性被其他类或模块调用时，会出现错误，例如：
-- -------------------- ---- -------
----- ------ -
------ ------- - --
------ ------------ -
------ ------------- -- ---------- ------ ---- -------- --------- -- ---------
-
-
------ ------- -------上述代码中，定义了一个 Person 类，并在其中定义了一个静态属性 version 和一个静态方法 getVersion。在方法中，通过 this.version 获取静态属性 version 的值。但当其他类或模块调用该静态方法时，会报错：TypeError: Cannot read property 'version' of undefined。如下所示：
import Person from './Person'; console.log(Person.getVersion()); // 报错：TypeError: Cannot read property 'version' of undefined
解决方案
上述问题的出现是因为，在静态方法或属性中，this 关键字指向的是该类本身，而不是实例对象。由于静态方法或属性是类本身的方法或属性，而不是实例对象的方法或属性，因此当其他类或模块调用该静态方法时，this 就会指向其他类或模块本身。因此，需要在静态方法或属性中手动指定 this 关键字指向该类本身。
具体地，可以使用箭头函数来定义静态方法或属性，因为箭头函数中的 this 关键字在定义时就已经绑定了。因此，在使用箭头函数来定义静态方法或属性时，this 关键字指向的就是该类本身。
例如，可以将上述代码中的静态方法 getVersion 重构为箭头函数，如下所示：
-- -------------------- ---- -------
----- ------ -
------ ------- - --
------ ---------- - -- -- -
------ -------------
-
-
------ ------- -------通过上述方式重新定义了静态方法 getVersion，使用箭头函数定义，并手动指定 this 关键字指向类本身。然后在其他类或模块中调用 getVersion 静态方法时，就不会出现错误了，如下所示：
import Person from './Person'; console.log(Person.getVersion()); // 输出：1
总结
本文主要介绍了在使用 ES7 中 class 定义静态方法或属性时的一个问题，并给出了解决方案。通过指定 this 关键字指向类本身，可以避免在静态方法或属性被其他类或模块调用时出现错误。这对于使用 ES7 进行面向对象编程的开发者来说，是值得注意和实践的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b0fdb6add4f0e0ffa52828