Javascript - как связать this в вызове ajax с литералом объекта

Question

У меня есть объект буквальный router, содержащий вызов ajax. Я хочу вызвать другие функции this.printMovies() внутри вызова AJAX, но 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

Проходить context вариант для ajax:

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

Теперь внутри обратных вызовов ajax, this будет ссылаться на router объект.

Answer 2

Вот в этом случае функция 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 3

Вы можете использовать новые функции стрелки ES6 или связать.

Возможно, вам придется сделать это на ваш успех или функцию getData

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

Answer 4

Привязать весь успех перезвоните с bind это будет работать:

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

Answer 5

Очень распространенным подходом является назначение this к локальной переменной в начале вашей функции.

var self = this;

Тогда внутри вашего использования обратного вызова self вместо this:

self.printMovies(response, callback);