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++;}