как ссылаться на переменную из родительского объекта в JavaScript

Question

Я пытаюсь написать простой объект спрайт, который добавит себя на холст, когда он инициализируется:

function Sprite(source){ 
this.x = 100; 
this.y = 100; 
this.img = new Image(); 
this.img.src = source; 
this.img.onload = function(e){ 
    context.drawImage(this.img, this.x, this.y); 
    }; 
}//end of object Sprite 

Это не работает, как нужно DrawImage к доступ к переменным за пределами обработчика onload. Как я могу получить доступ к переменным внутри моего объекта Sprite изнутри обработчика событий?

Answer 1

Объявите переменную:

function Sprite(source){ 
    var sprite = this; 
    this.x = 100; 
    this.y = 100; 
    this.img = new Image(); 
    this.img.src = source; 
    this.img.onload = function(e){ 
    context.drawImage(this, sprite.x, sprite.y); 
    }; 
}//end of object Sprite 

или bind ваша функция (я бы не сделать это здесь как onload обработчики событий, как ожидается, будут связаны с взаимосвязанного изображения):

function Sprite(source){ 
    this.x = 100; 
    this.y = 100; 
    this.img = new Image(); 
    this.img.src = source; 
    this.img.onload = (function(e){ 
    context.drawImage(this.img, this.x, this.y); 
    }).bind(this); 
}//end of object Sprite