0

在 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");
    }


}
4

2 回答 2

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简单地设置函数，而是设置了函数的结果：使用函数作为回调时要小心使用括号；）！

于 2012-08-03T23:07:36.220 回答
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，并将该调用的结果分配为事件处理程序。如果删除括号，则将函数指定为事件处理程序，并且仅在图像完成加载时才会调用它。

于 2012-08-03T23:08:29.753 回答