Javascript onload事件未在对象内触发答案

【问题标题】：Javascript onload event not firing inside objectJavascript onload事件未在对象内触发
【发布时间】：2014-12-25 17:13:48
【问题描述】：

我试图弄清楚为什么这不起作用，并想知道是否有人可以帮助我。基本上我需要具有不同图像的该对象的多个实例，并且我需要每个对象存储其关联图像的图像高度/宽度以进行进一步操作，但是 onload 事件永远不会触发？

如果您看到 TestTheVar 函数 imgW 永远不会设置为任何值，那么抱歉，这里是完整的代码。

<script type="text/javascript">

  (function() {

  var myTest = new TestObj();
  mytest.TestTheVar();
  })();

function TestObj() {
  this.img = new Image();

  this.img.onload = function(){
    this.imgW = this.img.width;
    this.imgH = this.img.height;
  };

  this.img.src = "reel_normal.PNG";
  this.TestTheVar = function() {
    alert(this.imgW);
  }

}
</script>

【问题讨论】：

如何测试 onload 事件是否触发？
在对象的下方有一个使用 imgW 的函数，它永远不会被设置
我有类似的代码工作。我使用了 addEventListener 但我认为它没有什么不同。请使用控制台输出仔细检查。
注意this 内的load 事件侦听器是图像，而不是您的TestObj 实例。所以如果以后要使用imgW，就必须是this.img.imgW。
您的事件触发了，它只是在读取/设置错误的变量。附言请在开发/调试时始终打开您的 JavaScript 控制台，您可能会在其中看到错误。

标签： javascript

【解决方案1】：

这里有两个问题

1) 范围

2) 时机

范围，正如其他答案中提到的那样，onload 函数中的this 是Image 对象而不是您的TestObj，因此您需要执行以下操作：

<script type="text/javascript">

(function() {

    var myTest = new TestObj();
    mytest.TestTheVar();
})();

function TestObj() {
  var self = this;
  this.img = new Image();

  this.img.onload = function(){
    self.imgW = this.width;
    self.imgH = this.height;
  };

  this.img.src = "reel_normal.PNG";

  this.TestTheVar = function() {
    alert(this.imgW);
  }

}
</script>

时间是指您不能假设图像在您尝试访问高度和宽度时已经完成加载。这就是回调的好处：

<script type="text/javascript">

  (function() {

      var myTest = new TestObj(function() {
          myTest.TestTheVar();
      });

  })();

function TestObj(cb) {
  cb = cb || function() {};
  var self = this;
  this.img = new Image();

  this.img.onload = function(){
    self.imgW = this.width;
    self.imgH = this.height;
    cb();
  };

  this.img.src = "reel_normal.PNG";

  this.TestTheVar = function() {
    alert(this.imgW);
  }

}
</script>

【讨论】：

您实际上可以在 onload 函数中使用 this.width 而不是 self.img.width :-)
我还修复了您的第二个示例，您将其保留为 this.img.width ;-)
非常感谢，这真的让我明白了，这是我第一次接触 javascript，范围界定让我有点头疼，效果很好！
其实这里有问题，在回调函数中myTest是未定义的
其实不是不是，是netbeans调试不理我，再次感谢！

【解决方案2】：

this 是属于每个函数的关键字。

在load 事件侦听器中，它将是图像，而不是您的TestObj 实例。

因此，你可以

使用this.img.imgW 获取：

function TestObj() {
  var that = this;
  this.img = new Image();
  this.img.onload = function(){
    this.imgW = this.width;
    this.imgH = this.height;
    that.testTheVar();
  };
  this.img.src = "reel_normal.PNG";
  this.testTheVar = function() {
    alert(this.img.imgW);
  };
}

将其存储在您的 TestObj 实例中：

function TestObj() {
  var that = this;
  this.img = new Image();
  this.img.onload = function(){
    that.imgW = this.width;
    that.imgH = this.height;
    that.testTheVar();
  };
  this.img.src = "reel_normal.PNG";
  this.testTheVar = function() {
    alert(this.imgW);
  };
}

在事件处理程序中自定义 this 为您的 TestObj 实例：

function TestObj() {
  this.img = new Image();
  this.img.onload = (function(){
    this.imgW = this.img.width;
    this.imgH = this.img.height;
    this.testTheVar();
  }).bind(this);
  this.img.src = "reel_normal.PNG";
  this.testTheVar = function() {
    alert(this.imgW);
  };
}

【讨论】：

关闭，但this.img 在onload 函数中不起作用。