Question

我已经定义了一个具有很少属性和方法的原型类，并且出于某种原因，在某些情况下我无法访问所有属性（主要是在涉及回调时）。

这是我的代码（删除了一些行以使其更清晰）

var Lobby = function (preloader, serverConn) {
  // Hold a reference to EventBus
  this.serverConn = serverConn;
  this.preloader = preloader;

  this.session_id = null;
  this.scheduleItemService = new ScheduledItemService(this.preloader);

  // Instantiate lobby stage
  this.stage = new createjs.Stage("lobbyCanvas");
};

Lobby.prototype._renderLobbyImages = function(stage, scheduleItemService) {
   // at this point, 'stage' and 'scheduleItemService' are valid!
  ..
  // onScheduledItemClick callback function
  this.scheduleItemService.render(stage, this._onScheduledItemClick);
}

Lobby.prototype._onScheduledItemClick = function(event) {
  (function(inst) {
  inst.serverConn.asyncSend(
    'game.lobby',
    { 'action' : 'claim_scheduled_item',
        'session_id' : inst.session_id, **//Here, 'inst.session_id' is DEFINED!**
    },
    function (error, reply) {
      **// Here, both 'stage' and 'scheduleItemService' are UNDEFINED! WHY?!?!**
      inst.scheduleItemService.startCountdown(inst.stage);
    }
   });
  })(this);
}

ScheduledItemService.prototype.render = function(stage, onScheduledItemClick) {
  var scheduled_item = new createjs.Bitmap(preloader.getResult("scheduled_item_img"));
..
..
  scheduled_item.addEventListener('click', onScheduledItemClick);
..
}

为什么this.session_id在'this'中定义，而'stage'和'scheduleItemService'没有定义？这三个是大堂班的属性......

我尝试使用'this'指针浏览，但我找不到'stage'或'scheduleItemService'。

我错过了什么，对吧？

谢谢： - ）

Answer 1

您的scheduleItemService变量超出了此范围

function (error, reply) {
      scheduleItemService.startCountdown(stage);
}

即使你没有使用Promises，这个代码仍然会失败。如果您想将renderLobbyImages和onScheduledItemClick定义为原型方法，则必须编写

Lobby.prototype.renderLobbyImages = function(){
    // this refers to a Lobby instance
    this.scheduleItemService.render(stage, this.onScheduledItemClick);
}

Lobby.prototype.onScheduledItemClick = function(){
    // this refers to a lobby instance
}

您还必须在this。

中使用onScheduledItemClick关键字

然后，在您定义的承诺回调中，＆＃34; this＆＃34;关键字不会指向实例。这就是为什么你的代码出错了。在此回调中，this发生了变化。

要解决此问题，请在回调之前将临时变量存储到＆＃34; this，此处我将其命名为scope＆＃34;。您可以像使用scope一样使用此this。

Lobby.prototype.onScheduledItemClick = function(event) {
  // this refers to a lobby instance
  var scope = this;
  this.serverConn.asyncSend(
    'game.lobby',
    { 
        'action'     : 'claim_scheduled_item',
        'session_id' : scope.session_id.bind(scope), // Here scope instead of this. But you could use this as not inside callback. I used scope just for consistency
    },
    function (error, reply) {
      // this does NOT refer to a lobby instance. You must use scope
      scope.scheduleItemService.startCountdown(stage);
    }
});

编辑1

编辑代码后，我仍然可以看到一些错误。

我在Lobby.prototype._onScheduledItemClick中看到您使用(inst)变量this.serverConn.asyncSend，它应该是inst.serverConn.asyncSen

-

编辑2

您的代码的另一个问题是回调。范围未传递。你必须＆＃34;绑定＆＃34;你的回调与范围。这是使用function.bind();

使用的

现在，您的行看起来像：

this.scheduleItemService.render(stage, this._onScheduledItemClick.bind(this));

这将使得当你的回调被调用时，＆＃34; this＆＃34;变量将具有您在bind中传递的参数的值。

Answer 2

首先，您没有为this添加前缀。与其他一些语言不同，this在JavaScript中不是可选的。

当您输入新的函数调用时，将重新定义this。您需要保存对它的引用。

this被定义为被调用函数的父级。因此，每次调用函数时它都会更改。以下是人们经常做的事情：

Something.prototype.foo = function() {
    var self = this;
    doSomething(function() {
        // now this has changed, but self still references the original this
   });
};

JS原型类并非所有属性都可访问

2 个答案: