Question

以下是一个简单的类定义。 this.bounds在控制台中是未定义的，所以我想知道如何在回调中访问和更改边界。目标是加载图像后，边界将设置为bounds.width = image.width等谢谢！

        function Car()  {
            this.image = new Image();            
            this.bounds = new Rectangle(0, 0, 0, 0);                
            this.setImage = function(ii){

                this.image.src = ii;

                this.image.onload = function () {

                   console.log("image was loaded " + this.bounds);

                }


            };

        }

Answer 1

你可以试试吗：

this.image.onload = function () { console.log("image was loaded " + this.bounds); }.bind(this)

＆＃34;结合＆＃34;用于将当前范围绑定到任何函数。每当你将来调用该函数时，都会使用它的绑定引用。

请参阅此链接：what is bind in javascript

Answer 2

内部onload回调this不再指向Car个实例，而是映像，因为在加载图片时image对象会调用它。要在此回调中访问Car方法，您可以：

使用bind方法返回新函数，其中this被设置为作为参数传递给bind
的值
```
this.image.onload = function () {

   console.log("image was loaded " + this.bounds);

}.bind(this)
```
您可以详细了解bind here

你可以使用箭头功能，它也保留this值：

function Car()  {
    this.image = new Image();            
    this.bounds = new Rectangle(0, 0, 0, 0); 
    this.setImage = function(ii){

        this.image.src = ii;

        this.image.onload = () => {

           console.log("image was loaded " + this.bounds);

        }

    };

}

您可以阅读有关箭头功能的更多信息here

您还可以定义一个值为this

的变量

function Car()  {
    this.image = new Image();            
    this.bounds = new Rectangle(0, 0, 0, 0); 
    var self = this;
    this.setImage = function(ii){

        this.image.src = ii;

        this.image.onload = function () {

           console.log("image was loaded " + self.bounds);

        }

    };

}

Answer 3

＆＃34;这＆＃34;内部函数image.onload（）实际上是在函数setImage（）的范围内，它肯定没有定义this.bounds，因此你得到它未定义。

一种解决方案可能是将此分配给行前的任何变量：str

所以它会改为：

this.image.onload = function () {

Answer 4

我认为你应该看到这个：

var doc, bod, htm, Img, C, E; // for reuse on other loads
addEventListener('load', function(){
doc = document; bod = doc.body; htm = doc.documentElement;

C = function(tag){
  return doc.createElement(tag);
}
E = function(id){
  return doc.getElementById(id);
}
Img = function(src, complete, context){
  this.image = C('img');
  var img = this.image;
  var cx = context || this;
  img.addEventListener('load', function(eventObj){
    complete.call(cx, eventObj);
  });
  img.src = src;
  this.imgMethod = fuction(){
    this.newProp = 'this in here refers to instance of Img';
  }
}
Car = function(){
  this.setImg = function(src, complete){
    return new Img(src, complete);
  }
}
var what = new Car; // no args it's okay to not use () with new
var someImg = what.setImg('yourImgSrc.png', function(){
  this.imgMethod(); console.log(this.newProp);
});
someImg.image.addEventListener('click', function(ev){
  var bc = this.getBoundingClientRect();
  var xy = {x:ev.clientX-bc.left, y:ev.clientY-bc.top};
  console.log(xy);
});

});

注意：这只是使用this

进行call绑定的示例

如何将对象传递给在对象/类中定义的回调？

4 个答案: