在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");
}
}
答案 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,并将该调用的结果指定为事件处理程序。如果删除括号,则将该函数指定为事件处理程序,并且仅在图像加载完成后才会调用该函数。