JavaScript类中的Image.onLoad范围

时间:2012-08-03 22:58:46

标签: javascript oop

在Javascript中加载类中的图像时,如何将回调作为类的方法而不是全局方法?

tc = new TestClass();

var TestClass = function(){


    var img = new Image();
    img.src = 'mars.png';
    img.onLoad = this.imagesHasLoaded(); //does not work, 
            //uncaught TypeError: Object [object Object] has no method 'imagesHasLoaded' ....js:28

            img.onLoad = imageLoaded(); //Works, logs yes, its loaded


    function imageLoaded(){

        console.log("yes, its loaded");
    }

    this.imagesHasLoaded = function(){

        console.log("loaded happened");
    }

    function isLoaded(){

        trace("loaded happened");
    }


}

2 个答案:

答案 0 :(得分:0)

当您致电this.imagesHasLoaded();时,该功能尚不存在。

我建议您首先定义所有函数,然后再调用初始化部分。最后,您可以返回一个包含公共函数的对象:

var TestClass = function (path) {
    var priv, publ;

    /*
     * PRIVATE
     */
    priv = {
        img: null,

        imageLoaded: function () {
            console.log("yes, its loaded");
        }
    };

    /*
     * PUBLIC
     */
    publ = {
        isLoaded: function () {
            trace("loaded happened");
        }
    };

    priv.img = new Image();
    priv.img.src = path;
    priv.img.onload = priv.imageLoaded;


    return publ;
};

var tc = TestClass('mars.png');

PS:imageLoaded()可能被调用,因为它未被定义为变量(在您的代码中)。此外,您没有将img.onload设置为简单的函数,但是您设置了函数的结果:使用函数作为回调时要小心使用括号;)!

答案 1 :(得分:0)

你看到的问题是你还没有定义this.imagesHasLoaded当你到达错误的那一行时。

Javascript按顺序执行,并且不会向前看创建函数。

如果您将代码更改为此代码,则可以使用:

tc = new TestClass();

var TestClass = function(){
    var img = new Image();
    img.src = 'mars.png';

    this.imagesHasLoaded = function(){

        console.log("loaded happened");
    }

    function isLoaded(){

        trace("loaded happened");
    }

    img.onLoad = this.imagesHasLoaded;
}

另请注意,我在this.imagesHasLoaded之后删除了括号。这是因为使用括号,您将立即调用this.imagesHasLoaded,并将该调用的结果指定为事件处理程序。如果删除括号,则将该函数指定为事件处理程序,并且仅在图像加载完成后才会调用该函数。