Question

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


}

Answer 1

当您致电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设置为简单的函数，但是您设置了函数的结果：使用函数作为回调时要小心使用括号;）！

Answer 2

你看到的问题是你还没有定义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，并将该调用的结果指定为事件处理程序。如果删除括号，则将该函数指定为事件处理程序，并且仅在图像加载完成后才会调用该函数。

JavaScript类中的Image.onLoad范围

2 个答案: