Javascript

Question

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

如何转义它并使 this 引用 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

使用 bind 绑定整个成功回调，它会起作用：

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

Answer 2

您可以使用新的 ES6 arrow functions, or bind。

您可能必须在成功或 getData 函数时执行此操作

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

Answer 3

将 context 选项传递给 ajax:

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

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

Answer 4

在这种情况下，函数 getData 将其父对象的上下文保存在 this 关键字中。所以你可以做的是，将 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 5

一种非常常见的方法是在函数的开头将 this 分配给局部变量。

var self = this;

然后在回调中使用 self 而不是 this:

self.printMovies(response, callback);

Javascript - 如何在对对象字面量的 ajax 调用中绑定 'this'

Javascript - how to bind 'this' inside an ajax call to the object literal

ajax

jquery

this

object-literal