2011-10-29 11 views
4

内の関数を呼び出すためのsetIntervalん:私はしたsetInterval内this.draw()を呼び出す/参照するように見えることはできませんがは、どのように私は私のようなクラス持つクラス

function run(){ 
this.interval; 
this.start = function(){ 
    this.interval = setInterval('this.draw()',1000); 
}; 
this.draw = function(){ 
    //some code 
};} var run = new run(); run.start(); 

を、それが、this.draw()は関数ではありませんと言います引用符を削除すると、無駄なsetInterval呼び出しが表示されます。何が間違っていますか?

答えて

10

thisの値は、関数の呼び出し方法に応じて設定されます。 newを使用して関数をコンストラクタとして呼び出すと、thisは作成されるオブジェクトを参照します。同様に、run.start()のようなドット表記の関数を呼び出すと、thisrunを参照します。しかし、setIntervalで実行されるコードがthisと呼ばれるまでには、あなたが考えるものを意味するものではありません。あなたは与える必要がある - また、あなたがrunという変数runを呼び出した関数を作成したことを

function Run(){ 
    var self = this; 

    self.start = function(){ 
    self.interval = setInterval(function() { self.draw(); },1000); 
    }; 

    self.draw = function(){ 
    //some code 
    }; 
} 

var run = new Run(); 

run.start(); 

注:何ができることはthisへの参照を保存し、その参照を使用して、次のようなものです彼らは別の名前。私のコードでは(JSは大文字と小文字を区別しています)、関数名を大文字の "R"で始めるように変更しました。これはコンストラクタとして実行されることを意図した関数の規約です。

EDIT:OK、他の回答を見て、私はそれを見ることができるだけで多分私はそれをovercomplicatedとは限りdraw()として、それは罰金してきたのと同じと言ってthisアクセスする必要はありません。

this.interval = setInterval(this.draw, 1000); 

は、しかし、同じ名前をあなたのコンストラクタを与え、後に変数ではないについての私のポイントはまだ立って、私はそれがdraw()thisにアクセスする必要がない場合は、必要となる技術であるために、すべてのselfものを残しておきます。また、draw()関数にパラメータを追加する場合は、このようにする必要があります。

+2

draw'は、その中に右 'this'を必要とする' '場合描くとき' this.draw'は、動作しません。 'setInterval(this.draw、1000)'バージョンで呼び出された場合、 'this'は' draw'の中の 'window'になります。 'draw'がインスタンスのプロパティを使用する場合(つまり、実際には単純な関数ではなくメソッドである場合)、すべての' self's stuffは必要です。 –

+1

真。私が "編集"を追加したとき、私は 'これを必要としないかもしれない"いくつかのコードを含む '描画'を見ていましたが、そうでなければ非常に有用な方法ではないでしょう...私は私の編集を編集します... – nnnnnn

+0

あなたの答えをお返事いただきありがとうございました。引用符を削除し、()を働かせました。私はすべてを自己に設定し、すべて解決されますが、私はまだなぜ、どのようにこの作品が理解できないのですか、もう少し詳しく説明してください。再度、感謝します。 :)ああ大丈夫だから、これはsetIntervalの中のウィンドウを指し示しています。とにかくこれを行う良い方法があります。自己は私の右には見えません:\ – fenerlitk

-2
function run(){ 
    this.interval; 
    this.start = function(){ 
     this.interval = setInterval(this.draw,1000); 
    }; 
    this.draw = function(){ 
     //some code 
    } 
;} 

var run = new run(); 
run.start(); 
6

bind()メソッド!

ES6で、次の例を参照してください:

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <canvas id="canvas" width="200" height="200" style="border: 1px solid black"></canvas> 
 

 
    <script> 
 
     class Circles { 
 
      constructor(canvas, r = 5, color = 'red') { 
 
       this.ctx = canvas.getContext('2d') 
 
       this.width = canvas.width 
 
       this.height = canvas.height 
 

 
       this.r = r 
 
       this.color = color 
 

 
       setInterval(
 
        this.draw.bind(this), 
 
        1000 
 
       ) 
 
      } 
 

 
      draw() { 
 
       this.ctx.fillStyle = this.color 
 

 
       this.ctx.beginPath() 
 
       this.ctx.arc(
 
        Math.random() * this.width, 
 
        Math.random() * this.height, 
 
        this.r, 
 
        0, 
 
        2 * Math.PI 
 
       ) 
 

 
       this.ctx.fill() 
 
      } 
 
     } 
 
    </script> 
 

 
    <script> 
 
     var canvas = document.querySelector('#canvas') 
 
     var circles = new Circles(canvas) 
 
    </script> 
 
</body> 
 

 
</html>

+0

なぜこれ以上のupvotesがないのですか? –