时间戳

首页 > 解决方案 > 在引用包含 Ajax 代码的 JS 类时使用“this”请求帮助了解 Ajax 范围

javascript - 在引用包含 Ajax 代码的 JS 类时使用“this”请求帮助了解 Ajax 范围

问题描述

我有一个 django web 项目，其中客户端调用服务器端 python 代码将数据发送到第三方服务并使用 ajax 接收响应。我将所有客户端功能捆绑到一个类中，因为有一些变量我需要 ajax 回调函数才能访问。我希望一个类能帮助解决我似乎遇到的这个范围界定问题，但是我的 ajax 代码在成功时调用的函数不知道它在什么上下文中。

我的服务器响应包含我想要呈现到屏幕上的单词列表。我有一个包装类，其中包含一个无序列表对象，我在主类中创建了一个实例，该对象包含我的函数，该函数包含我的 ajax 代码和 ajax 在成功时调用的另一个函数。在类的成功函数中，我this用来引用我在主类中定义的列表对象。调用 ajax 的函数表示我的列表已定义，但 ajax 调用的函数表示它未定义。

function MainClass(...){

   /* Variable I'm trying to access from my ajax callback. */
   this.wordlist = new UnorderedList();

   this.onAjaxRequest(data){
      console.log(this.wordlist); /* defined */         

      $.ajax({
        type: "POST",
        url: url,
        data: {
            csrfmiddlewaretoken: csrfToken,
            data: data   
        },
        success: this.onAjaxSuccess
    });   
   }

   this.onAjaxSuccess(words){
      this.wordlist.updateList(words); /* undefined */
   }
}

我通过其他海报发现这样做：success: this.onAjaxSuccess(this)似乎有效（对我来说感觉就像类型转换）。现在定义了我的this.wordlist引用，但是传入的参数不再是我的服务器响应，而是我的. 我知道它实际上是因为 传递了整个对象，但是如何让我的服务器响应数据这样做呢？onAjaxSuccessMainClass(this)

标签： javascriptajaxclassscopeundefined

解决方案

您需要将函数引用绑定到对象，以便this在其中正常工作。利用：

success: this.ajaxSuccess.bind(this)

或者您可以使用箭头函数：

success: words => this.ajaxSuccess(this)

推荐阅读