javascript - 如何模块化 JavaScript 类(从主文件中提取方法，将方法导入主文件)

Question

在JS中是否可以将类方法从类中拉出来？原谅我，我是函数范式，所以使用 React 迫使我使用类和 this 关键字(到目前为止)。我的一些组件越来越大，我不希望这样。

我在 Google 上找不到任何关于提取方法或模块化类的内容。

有没有一种方法我可以只说“从‘./some_method.js’获取这个方法并使用它，就好像它是在这个文件和类中声明的一样”而没有太多侵入性的改变？

如果做不到这一点，我假设让它们都起作用并将 this 传递给它们。然而，这感觉很脏。

对于我需要查看哪些关键字的一些指导，或者只是如何将方法移出以便我没有 2000 行文件需要 20 分钟才能找到，我将不胜感激

toggleFullMenu() {
    this.setState({ menuOpen: !this.state.menuOpen})
}

无需按 CTRL+F。这是我的动力。

我还想知道是否有任何与构造函数有关的专业提示。来自类继承范例的任何警告？我只是想让这些方法单独放在单独的文件中，但我不知道我在寻找什么。我从未见过人们谈论这个。

编辑，我刚刚在 MDN 中找到了这个:

Sub classing with extends

The extends keyword is used in class declarations or class expressions to create a class as a child of another class.

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

这是我需要的吗？我将如何着手拉一堆扩展？不过，我不想要 child 类，这听起来不像我描述的那样。

Answer 1

您可以使用 Function.prototype.bind 来做到这一点，这样您就可以控制 this 的值。

在一个模块中，您可以将“方法”导出为常规函数:

// methods.js
export const toggleFullMenu = () => {
  this.setState({ menuOpen: !this.state.menuOpen })
}

在你的组件模块中:

import React from 'react'
import { toggleFullMenu } from './methods'

class SomeComponent extends React.Component {
  constructor () {
    super()
    this.toggleFullMenu = toggleFullMenu.bind(this)
  }

  render () {
    return <button onClick={this.toggleFullMenu}>Click Me</button>
  }
}

toggleFullMenu 函数也可以绑定(bind)到其他上下文，因此您实际上可以在不同的组件之间共享该方法。

编辑:绑定(bind)函数上下文的方法有很多种，您不仅限于Function.prototype.bind。参见 this chapter以了解执行此操作的各种方法。