Image.onLoad作用域在JavaScript类中

Image.onLoad scope in JavaScript class

本文关键字：JavaScript 类中 作用域 onLoad Image      更新时间：2023-09-26

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

}

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

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

相关文章：