在javascript中的接口的等效

我有一個JavaScript中的函數對象，被稱爲BlinkyTextBox在裏面我有2 Shape充當滾動按鈕的對象。我需要一個非常簡單的事情，它只是增加或減少一個名爲scrollY的變量。在javascript中的接口的等效

我試着用一個匿名的內部函數，但函數無法識別成員變量。現在我試着用一個成員函數，但它不適用於...

這裏是我所談論的兩個示例。

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; 
}

來源

2016-12-01 Matthew

'this'指功能'.callFunction'裏面別的東西，看看在使用'.call（）'或'.apply（）'將範圍傳遞給你調用的函數中https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/函數/調用 – haxxxton

的這裏的問題是，一旦你分配一個函數的另一個對象函數內this將引用新的對象，而不是函數來自的對象。

例如：

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

請注意，我們沒有做任何的功能say()。我們只是將它分配到b，現在打印的消息是b而不是a。

現在，讓我們看看你的代碼：

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?

來源

2016-12-01 04:15:39 slebetman

當我做'this.scrollBarYTop.callFunction = this.scrollUp.bind（this） ;'我得到一個錯誤，說'無法讀取屬性'綁定'未定義 – Matthew

與'自己'的另一種方式很好！謝謝！ – Matthew

在javascript中的接口的等效

回答

相關問題