Javascript 回调的范围问题

Question

我在使回调函数正常工作时遇到一些问题。这是我的代码：

SomeObject.prototype.refreshData = function()
{
  var read_obj = new SomeAjaxCall("read_some_data", { }, this.readSuccess, this.readFail);
}

SomeObject.prototype.readSuccess = function(response)
{
    this.data = response;
    this.someList = [];
    for (var i = 0; i < this.data.length; i++)
    {
      var systemData = this.data[i];
      var system = new SomeSystem(systemData);
      this.someList.push(system);
    }
    this.refreshList();
}

基本上 SomeAjaxCall 正在发出 ajax 数据请求。如果成功，我们使用回调“this.readSuccess”，如果失败，则使用“this.readFail”。

我发现 SomeObject.readSuccess 中的“this”是全局 this（又名窗口对象），因为我的回调被作为函数而不是成员方法调用。我的理解是，我需要使用闭包来保留“this”，但是，我无法让它发挥作用。

如果有人能够告诉我我应该做什么，我将不胜感激。我仍然在思考闭包是如何工作的，特别是在这种情况下它们将如何工作。

谢谢！

Answer 1

最简单的做法就是将“this.readSuccess”包装在另一个函数中：

SomeObject.prototype.refreshData = function()
{
  var obj = this;
  var read_obj = new SomeAjaxCall("read_some_data", { }, 
    function() { obj.readSuccess(); }, function() { obj.readFail(); });
}

一些 Javascript 框架提供了一个实用程序来将函数“绑定”到对象，这意味着它会为您创建其中一个小函数。请注意，变量“obj”将被这些小函数“记住”，因此当调用处理程序时，“this”引用将指向用于调用“refreshData”的对象。

Answer 2

您这里的问题不完全是闭包或范围界定问题。问题在于，当您将 this.readSuccess 分配给变量时，您分配了函数本身，而没有任何其原始所属对象的概念。

以同样的方式，您可以采用常规的“独立”函数并将其用作对象的方法：

function hello() {
    alert("Hello "+this.planet);
}
var planet = "Earth";
hello(); // -> 'Hello Earth'

var Venus = {
    planet: "Venus"
};
hello.apply(Venus); // -> 'Hello Venus'
Venus.hello = hello;
Venus.hello(); // -> 'Hello Venus'

并且您的问题可以在本示例中复制

var helloVenus = Venus.hello;
helloVenus(); // -> 'Hello Earth'

所以您的问题是将 this.readSuccess 分配给某个变量 并将其作为 this 的方法调用。这可以通过 Pointy 演示的闭包来完成。由于我不知道“SomeAjaxCall”实际上做了什么，因此很难知道 this 的值是否实际上丢失以及 var obj = this 是否确实需要。很可能不是，所以您可以使用这种代码：

var helloVenus = function() { Venus.hello() }
helloVenus(); // -> 'Hello Venus'

在您的情况下，这将是（编辑：添加传递给处理程序的参数）：

SomeObject.prototype.refreshData = function()
{
  var read_obj = new SomeAjaxCall(
    "read_some_data",
    { },
    function () { this.readSuccess.apply(this, arguments) },
    function () { this.readFail.apply(this, arguments) }
  );
}

如前所述，几个 js 框架提供一个bind 函数来简化此类问题。但您并不需要为此建立一个完整的框架：这里有一个完美的 Function#bind 方法，可以使用普通的 javascript 运行：

Function.prototype.bind = function(obj) {
    var __method = this;
    var args = [];
    for(var i=1; i<arguments.length; i++)
        args.push(arguments[i]);
    return function() {
        var args2 = [];
        for(var i=0; i<arguments.length; i++)
            args2.push(arguments[i]);
        return __method.apply(obj, args.concat(args2));
    };
}

在 Function#bind 的帮助下，你可以写：

SomeObject.prototype.refreshData = function()
{
  var read_obj = new SomeAjaxCall(
    "read_some_data",
    { },
    this.readSuccess.bind(this),
    this.readFail.bind(this)
  );
}

Answer 3

以下站点似乎表明问题可能更多地出在您的“类”建筑中，而不是使用中。如果您仔细阅读“使用原型属性重写”，他们会写到“类”结构的特定方法将使方法保持全局而不是基于实例。也许另一种创作方法？

http://devedge-temp.mozilla.org/viewsource/2001/oop -javascript/