Javascript-如何在ajax調用中將“ this”綁定到對象文字

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

將整個成功調用與bind綁定將起作用：

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

Answer 4

您可以使用新的ES6 箭頭功能或bind 。

您可能必須在成功或getData函數上執行此操作

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

Answer 5

一個非常常見的方法是指定this在你的函數開頭的局部變量。

var self = this;

然后在回調中使用self代替this ：

self.printMovies(response, callback);