JavaScript中的Image.onLoad范畴

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，并将该调用的结果作为事件处理程序分配。如果删除括号，则将该函数指定为事件处理函数，并且只有在图像加载完成后才会调用该函数。