es6的class中函数之间调用报错？

Question

class Barrel{
    constructor(ele){
        this.ct=ele;
        this.baseHeight=100;
        this.maxWidth=ele.style.width;
        this.lastRowWidth=0;
        this.imgList=[];
        this.data=[];
    }
    createImg(arr){
        let num=0;
        for(let i in arr){
            this.data.push(arr[i]);
        }
        for(let i in this.data){
            let img=new Image();
            img.src=this.data[i];
            img.onload=function(){
                let imgHeight=img.height;
                let imgWidth=img.width;
                let proportion=imgWidth/imgHeight;
                let imgInfo={
                    self:img,
                    width:this.baseHeight*proportion,
                    height:this.baseHeight
                }
            
                this.render(imgInfo,num);
                num++;
            }
        }
    }
    render(imgInfo,num){...}

报错信息：Uncaught TypeError: this.render is not a function
请问应该怎么改？

Answer 1

this指向的问题

img.onload=function(){
    this.render(imgInfo,num); // this指向img，而不是Barrel。img没有render方法，所以报错
    num++;
}

解决方案：使用箭头函数

img.onload= () => {
    this.render(imgInfo,num);
    num++;
}

Answer 2

img.onload=()=>{
                let imgHeight=img.height;
                let imgWidth=img.width;
                let proportion=imgWidth/imgHeight;
                let imgInfo={
                    self:img,
                    width:this.baseHeight*proportion,
                    height:this.baseHeight
                }
            
                this.render(imgInfo,num);
                num++;
            }
 你的this没有指向当前class.