在引用Ajax代码所在的JS类时使用'this‘时，请求帮助理解Ajax作用域
在引用Ajax代码所在的JS类时使用'this‘时，请求帮助理解Ajax作用域
提问于 2018-07-24 02:05:04
我有一个django web项目，其中客户端调用服务器端python代码将数据发送到第三方服务，并使用ajax接收响应。我将所有客户端功能捆绑到一个类中，因为有一些变量需要ajax回调函数才能访问。我希望一个类可以帮助解决我似乎遇到的这个作用域问题，但是在成功时被ajax代码调用的函数并不知道它在什么上下文中。
我的服务器响应包含一个我想要呈现到屏幕上的单词列表。我有一个包装类，其中包含一个无序列表对象，我在主类中创建了一个实例，其中包含包含ajax代码的函数和ajax成功调用的另一个函数。在该类的success函数中，我使用this来引用我在主类中定义的list对象。调用ajax的函数说my list是已定义的，但是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)似乎可以工作(对我来说，它就像类型转换)。现在定义了onAjaxSuccess中的this.wordlist引用，但是传入的参数不再是我的服务器响应，而是我的MainClass的引用。我知道由于(this)，它实际上是在传递整个对象，但是我如何获得服务器响应数据呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-24 02:44:24
您可以在函数声明本身中将this函数上下文绑定到onAjaxSuccess。
function MainClass(){
/* Variable I'm trying to access from my ajax callback. */
this.wordlist = ['hi','buddy'];
this.onAjaxRequest = function(data){
console.log(this.wordlist, 'onAjaxRequest'); /* defined */
$.ajax({
type: "POST",
url: 'https://jsonplaceholder.typicode.com/posts',
data: {
csrfmiddlewaretoken: null,
data: data
},
success: this.onAjaxSuccess
});
}
this.onAjaxSuccess = (function(words){
console.log(this.wordlist, 'onAjaxSuccess'); /* defined */
}).bind(this);
}
var mainClass = new MainClass();
mainClass.onAjaxRequest();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Stack Overflow用户
发布于 2018-07-24 02:38:01
您需要将函数引用绑定到对象，这样this才能在其中正常工作。使用：
success: this.ajaxSuccess.bind(this)或者您可以使用箭头函数：
success: words => this.ajaxSuccess(this)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51484835
复制相关文章
相似问题
腾讯云开发者
