Home / Questions / 40917
Accepted
Andrés Muñoz
Asked: 2020-12-26 09:13:23 +0800 CST 2020-12-26 09:13:23 +0800 CST

在 JS 的方法中使用 bind(this) 有什么意义？

  • 772

为什么在方法filter中我必须使用.bind(this)如下：onChange={this.filter.bind(this)}，而不是只使用filter没有.bind(this)as in的方法onChange={this.filter}？

export default class TodoList extends React.Component {
  filter(event) {
    this.props.store.filter = event.target.value
  }

  render() {
    return <div>
      <h1>toDos</h1>
      <input className="filter" onChange={this.filter.bind(this)} />

    </div>
  }
}
javascript

2 Answers

  1. Best Answer

    这是一个 javascript 限制，因为您传递给事件处理程序的参数onChange可以来自任何来源，而不一定来自当前组件。以以下示例为例，其中函数filter在使用 a 的组件中定义 TodoList：

    export default class TodoApp extends React.Component {
  filter(event) {
    this.props.store.filter = event.target.value
  }

  render() {
    return 
      <div>
        <TodoList filter={this.filter} />
      </div>
  }
}


export default class TodoList extends React.Component {
  render() {
    let { filter } = this.props
    return 
      <div>
        <h1>toDos</h1>
        <input className="filter" onChange={filter} />
      </div>
  }
}

    在这种情况下，在函数的上下文中filter， 的值应该是this什么？组件TodoApp或TodoList？
    所以 ES6 强制你手动指定this. 对于所描述的示例，如果您希望它this是，您将TodoApp使用：

            <TodoList filter={this.filter.bind(this)} />

    如果你想要它TodoList，你会使用：

            <input className="filter" onChange={filter.bind(this)} />

    一种更简洁的方法是bind在组件的构造函数中定义它们，而不是内联：

    export default class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.filter = this.filter.bind(this);
  }

  filter(event) {
    this.props.store.filter = event.target.value
  }

  render() {
    return <div>
      <h1>toDos</h1>
      <input className="filter" onChange={this.filter} />

    </div>
  }
}

    另一种方法，你可以在互联网上的几个反应示例中找到，是使用React.createClass，它在内部带来了一些语法糖来避免你bind自己做：

    const TodoList = React.createClass({
  filter(event) {
    this.props.store.filter = event.target.value
  },

  render() {
    return 
      <div>
        <h1>toDos</h1>
        <input className="filter" onChange={this.filter} />
      </div>
  }
});

export default TodoList;

    请注意，这里使用的是 ES5，与扩展类时不同，因为React.Component它是 ES6。尽管它们基本上做同样的事情，但两者之间还有其他细微差别，您可以在本文中查阅。

    最后一个选项是使用=>ES6 箭头，它在bind(this)内部执行：

    export default class TodoList extends React.Component {
  filter = (event) => {
    this.props.store.filter = event.target.value
  }

  render() {
    return <div>
      <h1>toDos</h1>
      <input className="filter" onChange={this.filter} />

    </div>
  }
}

    但是，如果您打算将参数传递给您的函数（例如 ）onChange={this.filter('name')}，则需要格外小心操作符=>。您的函数应如下所示：

    export default class TodoList extends React.Component {
  filter = (element) => (event) => {
    event.preventDefault();
    this.props.store.filter = element;
  }

  render() {
    return <div>
      <h1>toDos</h1>
      <input className="filter" onChange={this.filter('name')} />

    </div>
  }
}
    • 6

  2. 在 ES6 中，箭头运算符允许您以更自然的方式“绑定”“this”（立即在上方执行上下文），而不是在构造函数中手动执行。

    export default class TodoApp extends React.Component {
    filter = (event) => {
        this.props.store.filter = event.target.value
    }

    render() {
        return (
            <div>
                <TodoList filter={this.filter} />
            </div>
        )
    }
}

    此外，它不是 ES6 的限制，在以前的版本以及原型中定义的 bind() 函数中可以观察到该问题。

    语法增强是 ES6 与上述箭头运算符引入的增强功能，React 仅在 React.Component 中定义的函数（如渲染函数、componentDidMount）中为您将类作为值分配给“this”关键字的工作等等，但是如果您在 React.Component 的子类中定义自己的函数，则必须使用箭头运算符手动为每个函数设置“this”的值。

    此外，您必须了解，在 javascript 中，'this' 的工作方式与其他语言不同，在 javascript 中，'this' 采用直接上级执行上下文的值而不是类的值，因此这并不总是采用类的值在哪里定义函数，你必须手动设置它。

    • 1