これをオブジェクトメソッドで使用するとエラーが返されます

Question

thisの私の全体的な理解が大気圏に投げ込まれていると感じています。

私はQuizオブジェクトを持っています。このオブジェクトには、クイズの再生に必要な変数とメソッドがあります。

クイズの方法をクイズの別の方法（getQuestion in skipQuestion()）から参照しようとしていますが、this.getQuestionが定義されていないというメッセージがコンソールに表示されています。私はこの場合のthisがそのオブジェクトを参照しているという印象の下にあったので、問題の機能はthis.getQuestion()と呼ばれるべきです。

私は取得していますエラーメッセージは、誰もがここで間違って何が起こっているか説明できscript.js:18 Uncaught TypeError: this.getQuestion is not a function

のですか？私init機能で

はthisがQuizオブジェクトを指しているようですが、skip questionに変更するようです。これは、thisという別の定義を持つクエリに対応していますか？どこで線を描くのですか？thisのコンテキストはいつ変更されますか？

(function(window){ 

    $(document).ready(function(){ 
     var Quiz = { 

      score : 0, 
      question: '', 
      answer: '', 

      init: function() { 
       this.getQuestion(); 
       this.checkAnswer(); 
       this.skipQuestion(); 
      }, 

      skipQuestion: function() { 
       $('#skip').click(function(){ 
        this.getQuestion(); 

       }) 
      }, 

      getQuestion: function() { 
       $.get('http://jservice.io/api/random', function(data){ 
        $('#question').html(data[0].question); 
        this.answer = data[0].answer.toLowerCase(); 
       }); 
      }, 

      checkAnswer: function() { 
       if($('#answer').val() === this.answer) { 
        this.score += 1; 
       } 
      } 
     } 

     Quiz.init(); 
    }); 

})(window); 

Answer 1

あなたが別の関数内でネストされているので、thisコンテキストは機能に変化しないので、あなたが求めている方法は、もはや利用可能です。 thisを、定義している関数の範囲内にある変数の中に格納するか、または関連するthisコンテキスト自体を持たないDouble Arrow Functionsを使用して解決することができます（そのため、bindもサポートされません）。またはcall）。ここにあなたのオプションは次のとおりです。

は変数を宣言します。

skipQuestion: function() { 
    var that = this; 
    $('#skip').click(function(){ 
     that.getQuestion(); 
    }) 
} 

またはダブルアロー機能：

skipQuestion: function() { 
    var that = this; 
    $('#skip').click(() => that.getQuestion()) 
} 

あなたのinit関数は、あなたのクイズオブジェクトの方法、しばらく考えられています匿名 clickイベントに渡される関数はではないメソッドoあなたのクイズは、匿名オブジェクトのメソッドで、バックグラウンドで作成され、クイズにメソッドや変数を共有しません。これは検討することが重要です！

Answer 2

事は、あなたがクリックイベント内thisを使用しているであり、それはあなたのコンテキストではなく、イベントを指します。回避するには、これを別の変数に代入してから使用する必要があります。

 skipQuestion: function() { 
      var self = this; 
      $('#skip').click(function(){ 
       self.getQuestion(); 

      }) 
     }, 

$.getと.clickイベントは、独自のコンテキストを作成し、こうしてthis代わりクイズの文脈のそれらのコンテキストを指します。

JS

(function(window){ 

    $(document).ready(function(){ 
     var Quiz = { 

      score : 0, 
      question: '', 
      answer: '', 

      init: function() { 
       this.getQuestion(); 
       this.checkAnswer(); 
       this.skipQuestion(); 
      }, 

      skipQuestion: function() { 
       var self = this; 
       $('#skip').click(function(){ 
        that.getQuestion(); 

       }) 
      }, 

      getQuestion: function() { 
       var self = this; 
       $.get('http://jservice.io/api/random', function(data){ 
        $('#question').html(data[0].question); 
        self.answer = data[0].answer.toLowerCase(); 
       }); 
      }, 

      checkAnswer: function() { 
       if($('#answer').val() === this.answer) { 
        this.score += 1; 
       } 
      } 
     } 

     Quiz.init(); 
    }); 

})(window);