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オプションアヤックスへの上でこれを行うために必要がある場合があります。

Answer 2

バインド：

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

Answer 3

は、新しいES6 arrow functions、またはbindを使用することができます。

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

今すぐAJAXコールバックの内側に、 thisは routerオブジェクトを参照します：

あなたはあなたの成功かのgetData機能

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

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; 

代わりthisのコールバックを使用self内側：

self.printMovies(response, callback);