Javascript – 如何在对象文字的ajax调用中绑定’this’

我有一个对象文字router ，包含一个ajax调用。 我想在ajax调用中调用this.printMovies()其他函数，但这引用了ajax对象。

如何逃避它并使其引用router对象本身？

 var router = { //... init : function() { this.getData("api/movies", "movies", callback); }, getData : function (url, htmlType, callback) { $.ajax({ url: url, dataType: 'json', success: function (response) { if (response && response.length > 0) { this.printMovies(response, callback); //'this' refers to ajax this.printMovies(response, callback).bind(this) //still doesn't work } }, error: function (response) { console.log("Error:" + response); } }); }, printMovies : function(){ }, } 

Answer 1

将context选项传递给ajax：

 $.ajax({ context: this, /* other options */ } 

现在在ajax回调中， this将引用router对象。

Answer 2

在这种情况下，函数getData在this关键字中保存其父对象的上下文。 所以你可以做的是，将它的引用存储在某个变量中，稍后再使用它。 喜欢：

 var router = { //... init : function() { this.getData("api/movies", "movies", callback); }, getData : function (url, htmlType, callback) { var mainObj = this; // line to be noticed $.ajax({ url: url, dataType: 'json', success: function (response) { if (response && response.length > 0) { // parent object to be used mainObj.printMovies(response, callback); //'this' refers to ajax } }, error: function (response) { console.log("Error:" + response); } }); }, printMovies : function(){ } } 

Answer 3

绑定整个成功回调绑定它将工作：

 (function (response) { if (response && response.length > 0) { this.printMovies(response, callback); } }).bind(this) 

Answer 4

一种非常常见的方法是在函数开头将其赋值给局部变量。

 var self = this; 

然后在你的回调中使用self而不是：

 self.printMovies(response, callback); 

Answer 5

您可以使用新的ES6 箭头function ，或绑定 。

您可能必须在success或getData函数上执行此操作

 getData : function (url, htmlType, callback) { ... }.bind(this),