如何在嵌套对象方法中引用它?

时间:2019-06-14 19:57:47

标签: javascript

我有一个方便的功能,可以加载图像数组,并在加载完所有图像后执行回调。

在使用JavaScript的大部分时间里,我一直在函数式范例中进行编码,并且希望转换为面向对象。

我似乎无法正确引用this中的unit.loadedImage。我们将不胜感激在this子方法中引用preloadImage()的任何帮助。

class Unit {
    constructor() {
        this.loadedImages = [];
    }

    preloadImages(urls, allImagesLoadedCallback) {
        let loadedCounter = 0;
        let toBeLoadedNumber = urls.length;
        urls.forEach(function(url) {
            preloadImage(url, function() {
                loadedCounter++;
                console.log(`Number of loaded images: ${loadedCounter}`);
                if (loadedCounter == toBeLoadedNumber) {
                    allImagesLoadedCallback();
                }
            });
        });

        function preloadImage(url, anImageLoadedCallback) {
            let img = new Image();
            img.src = url;
            img.onload = anImageLoadedCallback;
            this.loadedImages.push(img); // error is here, "Cannot read property 'loadedImages' of undefined"
        }
    }
}

let unit = new Unit();
console.log(unit);

unit.preloadImages([
    'img/image-halo.png',
    'img/image-clouds.png',
    'img/image-glasses.png',
    'img/image-fire.png',
    './img/image-particle.png'
], function() {
    console.log('All images loaded.');
});

0 个答案:

没有答案