.bind(this) 在 ajax 回调结束时的目的？

Question

从 reactjs 教程中，在 ajax 回调末尾添加 .bind(this) 的目的是什么？没有它，代码能正常工作吗？

        data: JSON.stringify({text: text}),
        success: function (data) {
            this.setState({data: data});
        }.bind(this),

Answer 1

在 ajax 回调末尾添加 .bind(this) 的目的是让 this 与您的反应类相关。换句话说，您可以添加：

var self = this;

在 ajax 之外，它的工作原理是一样的。 你的代码等于：

var self = this;
$.ajax({
    .
    .
    data: JSON.stringify({text: text}),
    success: function (data) {
        self.setState({data: data});
    },
    .
    .
});

Answer 2

它确保this 将是回调中的正确对象。见Function.prototype.bind()。

特定于 react 的替代方法是：

myAjaxFunction: function(){
  $.getJSON('/something', this.handleData);
},
handleData: function(data){
  this.setState({data: data});
}

这是可行的，因为 React 会为您处理组件方法的绑定。

如果你在没有绑定的情况下运行你的原始代码，你会得到这个错误：TypeError: undefined is not a function 因为this === window 在回调中；

或在严格模式下：TypeError: Cannot read property 'setState' of undefined，其中this === undefined 在回调中。