Question

我在javascript中有一个名为BlinkyTextBox的函数对象，其中有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将引用新对象而不是该函数来自的对象。

例如：

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?

的更详细说明，请参阅此答案

相当于javascript中的接口

1 个答案: