Question

我正在编写一个小型的javascript类，我正试图通过画布来创建图像

我一直遇到一个问题，当我运行更新功能来重绘画布时，一些属性在它们应该是图像的实例时是未定义的

为了更好地解释我的意思，这段代码就是我所拥有的：

this.setHabboLeft = function(src)
{
    var callback = this.update;
    this.habboLeft = getImage(src, callback);
}

var getImage = function(src, callback)
{
    var img = new Image;

    if(typeof callback == 'function')
    {
        img.onload = callback;

    }

    img.src = src;
    return img;
}

this.update = function()
{   
    console.log('updating...', this.background, this.habboLeft);
    ...
}

我正在使用setHabboLeft从外部网址设置图片，然后一旦加载，它就会运行this.update()

我认为问题在于getImage中的onload回调。 console.log应该返回图像对象，但告诉我它是未定义的

编辑@ gus27

请注意，图片位于不同的域

我称之为：

        // set background of lovelock
        lovelockCanvas.setBackground($(self).data('picture'));

        // create logged in user habbo
        var habboUrl = habboCreator.generateUrl({
            habbo_username: '{{ Auth::user()->habbo_username }}'
        });
        lovelockCanvas.setHabboLeft(habboUrl);

编辑2

被调用的函数 http://pastebin.com/ZRut9gyD

完整的js课程 http://pastebin.com/WjRUkj4X

FIXED：

我使用this绘制所有内容而不是更新，而是创建了一个新函数并将this作为参数传递

请参阅pastebin：http://pastebin.com/BTNigqLS

Answer 1

问题出在由update调用的img函数中。 update（img回调）调用onload时，this函数中的update变量引用{{1} }}。

documentation for this州：

在函数内部，img的值取决于函数的方式调用。

你可以尝试这样的事情：

this

Answer 2

Function.bind（坷Ref）

所有函数都是一种名为Function MDN Function object的对象。它们带有一些方法和属性，其中一个叫做bind。

Bind创建一个新的函数副本，将其关键字（this）绑定到函数。

因此，要解决事件覆盖函数绑定的问题，请自行执行绑定以确保它不会被本机事件处理程序覆盖。

this.setHabboLeft = function(src){
    // create a new function bound to this
    this.habboLeft = getImage(src, this.update.bind(this));
}

var getImage = function(src, callback){
    var img = new Image;    
    img.onload = typeof callback == 'function' ? callback : undefined;    
    img.src = src;
    return img;
}

this.update = function() {   
    console.log('updating...', this.background, this.habboLeft);
    ...
}

此外，您没有或添加更多中间步骤来保持事件对象。

this.setHabboLeft = function(src){
    // create a new update function bound to this
    // only reference the image if it loads
    getImage(src, this.update.bind(this));
}

var getImage = function(src, callback){
    var img = new Image;    
    img.onload = typeof callback == 'function' ? callback : undefined;    
    img.src = src;
}

this.update = function(event){
    // image loaded so can be referenced
    this.habboLeft = event.target; // the image object
}

canvas drawImage和scope问题

2 个答案:

Function.bind（坷Ref）