Question

我的JS代码大致如下：

function myObject()
{
    this.a = 13;

    this.fetchData = function()
    {
        alert(this.a);
        getData(this.processData);
    }

    this.processData = function(data)
    {
        // do stuff with data
        alert(this.a);
    }

    this.fetchData();
}

function getData(callback)
{
    // do async request for data and call callback with the result
}

我的问题是：函数 fetchData 可以通过 this 关键字访问我的 a 变量，但是另一个函数 processData getData 调用时不会。我理解为什么会这样，但不知道如何解决它。

你最好如何以OOP风格解决这个问题？（函数 getData 必须可用于多个类）

Answer 1

两个选项：

1）让getData接受上下文参数（通常称为context或thisArg）并使用callback.apply(context, ...)或callback.call(context, ...)来调用它。所以：

function getData(callback, context) {
    // ...when it's time to call it:
    callback.call(context, arg1, arg2);
    // or
    callback.apply(context, [arg1, arg2]);
}

2）创建一个函数，当被调用时，它将转向并调用原始回调，并将this设置为正确的值。（这有时被称为“绑定”。）

例如，使用显式闭包：

this.fetchData = function()
{
    var self = this;

    alert(this.a);
    getData(getDataCallback);

    function getDataCallback(arg1, arg2) {
        self.processData(arg1, arg2);
    }
}

或者有一个通用的bind函数来执行它（它也会涉及一个闭包，但是在一个很好的受控上下文中，所以它不会关闭你不需要的东西）。有关简单bind函数的示例，请参阅下面的链接。

更多：You must remember this

Answer 2

我认为你只需要将“a”定义为局部变量，这样它就可以处理fetchData和getData，如下所示：

function myObject() {
   var a = 13;

   this.fetchData = function() {
      alert(a);
      getData(this.processData);
   }

   this.processData = function(data) {
      // do stuff with data
      alert(a);
   }

   this.fetchData();
}

你也可以这样做，

function myObject() {
   this.a = 13;
   var that = this;

   this.fetchData = function() {
      alert(that.a);
      getData(this.processData);
   }

   this.processData = function(data) {
      // do stuff with data
      alert(that.a);
   }

   this.fetchData();
}

异步JavaScript和对象永久性

2 个答案: