bind(this) 是什么意思？

IT技术 javascript reactjs
2021-04-24 18:46:13

我已经知道 bind 做什么，它将给定的对象或函数绑定到你想要的函数，但bind(this)真的让我感到困惑。thisin 的bind真正含义是什么。

以下是我的带有 firebase 数据库的 react 应用程序的代码。

componentWillMount: function() {
    this.firebaseRef = firebase.database().ref('todos');
    this.firebaseRef.limitToLast(25).on('value', function(dataSnapshot) {
      var items = [];
      dataSnapshot.forEach(function(childSnapshot) {
        var item = childSnapshot.val();
        item['key'] = childSnapshot.key;
        items.push(item);
      }.bind(this));

      this.setState({
        todos: items
      });
    }.bind(this));

  },
3个回答

bind(this)这里将您的函数的上下文绑定forEach()到 componentWillMount() 的范围内。

this这里指的范围componentWillMount()。

使用bind(this),this内部函数内的关键字将引用外部作用域。这是必不可少的，因为在这种情况下 this.setState，forEach函数内部可以被调用，因为它的范围仅限于componentWillMount().

根据文档：

bind() 方法创建一个新函数，当调用该函数时，将其 this 关键字设置为提供的值，并在调用新函数时在任何提供的参数之前提供给定的参数序列。

看看这个演示，它说明了bind(this).

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      data: [{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  }]  
    }
  }
  componentDidMount() {
    this.state.data.forEach(function(item) {
      console.log('outer scope ', this);
    }.bind(this))
     this.state.data.forEach(function(item) {
      console.log('Inner scope ', this);
    })
  }
  render() {
    return (
    <div>Hello</div>)
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="app"></div>

您没有显示完整的 React 组件定义，但它很可能是指componentWillMount定义您的 React 组件实例。

您可以this在内部玩得很好forEach- 根据https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach - 而不是将绑定传递this作为forEach语句的第二个参数。

class App extends React.Component {
    constructor() {
      super();
      this.state = {
        data: [{
          "userId": 1,
          "id": 1,
          "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
          "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
        }]
      }
    }

    componentDidMount() {
      this.state.data.forEach(function(item) {
        console.log('outer scope ', this);
      }, this) // be nice for context - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
    }

    render() {
      return ( <div> Hello < /div>)
    }
}

ReactDOM.render( < App / > , document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<div id="app"></div>

其它你可能感兴趣的问题
上一篇在 React-Router 中使用 Link 传递props 下一篇使用react-hooks在 REACTJS 中使用数组填充动态下拉列表的步骤