javascriptのインターフェースに相当する

Question

私はBlinkyTextBoxというjavascriptの関数オブジェクトを持っています。その中には、スクロールボタンとして機能する2つのShapeオブジェクトがあります。 scrollYという変数を増分または減分する非常に簡単なことが必要です。

匿名の内部関数で試しましたが、関数がメンバー変数を認識できませんでした。今私はメンバー関数で試してみましたが、どちらでも動作しません...

ここで私が話していることの両方のサンプルです。

function BlinkyTextBox(textdata, font, w, h) 
{ 


    this.scrollY = -50; 


    this.scrollBarYTop = new Button(); 

    this.scrollBarYTop.callFunction = this.scrollUp; 

    this.scrollBarYBottom = new Button(); 
    this.scrollBarYBottom.callFunction = function() 
    { 
      this.scrollY -= 10; 
    } 

} 
BlinkyTextBox.prototype.scrollUp = function() 
{ 
    this.scrollY += 10; 
} 

Answer 1

ここでの問題は、あなたが別のオブジェクトに機能を割り当てた場合、その関数の内部thisではなく、オブジェクトの新しいオブジェクトを参照する関数がどこから来たということです。例えば

：我々は機能say()に何もしませんでした

var a = { 
    message : 'Hello!', 
    say : function() { return this.message } 
} 

var b = { 
    message : 'Goodbye' 
} 

b.say = a.say; 

console.log(a.say()); // Hello! 
console.log(b.say()); // Goodbye 

注意してください。メッセージをbに割り当てたところ、aの代わりにbのメッセージが出力されるようになりました。

同じことが他の方法に何が起こる

this.scrollBarYBottom.callFunction = function() 
{ 
     this.scrollY -= 10; // refers to scrollBarYBottom.scrollY 
          // not BlinkyTextBox.scrollY 
} 

：伝統的

this.scrollBarYTop.callFunction = this.scrollUp; 
// the this inside scrollUp will now refer to scrollBarYTop 

は、この問題を解決するためにあなたがthisのエイリアスを使用したい：

今

、のは、あなたのコードを見てみましょう

var myself = this; 
this.scrollBarYBottom.callFunction = function() 
{ 
     myself.scrollY -= 10; 
} 

しかし、ES5では、.bind()メソッドを使用できます。

this.scrollBarYBottom.callFunction = (function() 
{ 
     this.scrollY -= 10; 
}).bind(this); 

と：

this.scrollBarYTop.callFunction = this.scrollUp.bind(this); 

thisのより詳細な説明についてはこの回答を参照してください：How does the "this" keyword in Javascript act within an object literal?