Javascript 为什么需要将方法绑定到'；这'；当该方法已经拥有它时'；s上下文为'；这'；在基于类的组件中

我正在努力理解下面的代码

this.handleFilterTextChange = this.handleFilterTextChange.bind(this);

在下面的片段中（摘自Reacts官方网站）

类搜索栏扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleFilterTextChange=this.handleFilterTextChange.bind（this）；
}
handleFilterTextChange（e）{
this.props.onfiltextchange（e.target.value）；//除非我们在构造函数中绑定此方法，否则props将给出未定义的。
}
render（）{
返回(
);
}
}

我在某种程度上了解bind（），这不是bind（）的用法问题。 我很困惑，因为这个.handleFilterTextChange已经在上下文中了，为什么需要这样做 再次将其绑定到“this”，为什么this.props不能在构造函数外部访问，除非方法

---

它包含在中，但不与此绑定？

@VLAZ，实际上我对特定代码感到困惑，我想我在某种程度上知道“this”和“bind”的用法。如果您直接执行

this.foo（）

，那么您就可以使用

this

作为上下文运行函数。但是，如果您将其作为函数引用传递并执行（例如，事件处理程序），那么您所做的基本上就是

f=this.foo；f（）

以这种方式执行时，根据您是否处于严格模式，您将获得

未定义的

或

窗口

的上下文。好的，您是说在我的示例中绑定中的“this”具有其他上下文（可能来自称为“SearchBar”的组件）除了类SearchBar.this.handleFilterTextChange.bind（this）的上下文之外——这一行让我很困惑，第一个“this”和最后一个“this”有何不同？如果不是，为什么我们要再次设置相同的上下文？这可能是个愚蠢的问题，但我很困惑，一点也不。让我们澄清一下——方法没有上下文。当涉及到上下文时，您拥有

this.foo=function（）{}

这一事实并不意味着什么。您只需将某些函数分配给某些属性。上下文是在您调用某个对象时确定的。因此，如果调用

foo.bar（）

则使用

this=foo

调用

bar

，但如果调用

baz=foo.bar；baz（）

您调用

baz

（与

foo.bar

相同），但现在

这=未定义的
。我希望你们能更详细地了解这一点。
class SearchBar extends React.Component {
  constructor(props) {
    super(props);
       this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
  }

  handleFilterTextChange(e) {
    this.props.onFilterTextChange(e.target.value); // props will give undefined unless we bind this method in the constructor.
  }


  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={this.props.filterText}
          onChange={this.handleFilterTextChange}
        />
      </form>
    );
  }
}