JQuery绑定Ajax成功事件

Question

为什么我们要在 AJAX 的 success 回调函数上调用 bind 方法？

看一下这段代码：

$.ajax({
    url: myurl,
    dataType: 'json',
    success: function(data){
        this.setState({data: data});
    }.bind(this)
});

如果我们不调用bind，那么使用bind会有什么区别或优势吗？

- shubham

Answer 1

在IT技术中，为了确保回调函数的上下文（this）正确无误，您需要调用bind()方法。否则，默认情况下会在全局上下文中调用它（显然，jQuery使用jqXHR对象作为上下文来调用它）。bind()将函数的上下文设置为this所代表的值。

- Scimonster

---

抱歉我没听懂。您能详细解释一下吗？ - shubham

如果你不调用bind，回调函数内部的this会是错误的。 - Scimonster

我同意Scimonster的观点。bind()将函数的上下文设置为它应该是什么，否则你的函数会出现错误，如：Uncaught TypeError: this.setState不是一个函数。 - angelia

Answer 2

@shubham，这是JavaScript中使用当前this关键字在回调函数中的语法，就像你在以下提到的：

success: function(data){
    this.setState({data: data});
}

bind()函数的第一个参数将作为调用函数中的this，你应该去了解apply()和call()函数，因为这对你会有帮助。

- Naveen Dahiya

Answer 3

我猜你的代码是来自于React。因为最近我也遇到了处理React类似问题的情况。

回到你的问题上。我认为bind是一个转换函数。代码如下：

componentDidMount: function() {
var _this = this;
$.ajax({
  url: this.props.url,
  dataType: 'json',
  cache: false,
  success: function(data) {
    _this.setState({data: data});
  }
 });
},

等同于：

componentDidMount: function() {
$.ajax({
  url: this.props.url,
  dataType: 'json',
  cache: false,
  success: function(data) {
    this.setState({data: data});
  }.bind(this)
 });
},

到目前为止，我认为你已经理解了bind函数是什么以及为什么要使用bind来实现它。

- Todd Mark