webGame 진행하면서

class Enemy {
    constructor(eP) {
        console.log(eP)
        this.enemyPosition = eP;
        this.enemycreate;
    }

    enemyCreate()  {

    }
    }
    enemyUnderMove() {

    }

let enemys = new Enemy(enemyPositionY);

window.addEventListener('load', e => {
     enemys.enemyCreate()
     enemys.enemyUnderMove()
     ***setInterval(enemys.enemyCreate.bind(enemys),1000)***
})

문제의 코드!!
이벤트 안에서 setInterval 함수를 사용했다.
그리고 Enemy 클래스의 인스턴스를 만들고 인스턴스로 클래스의 메서드를 호출했다.
정상적으로 작동하는지 확인하기 위해 console.log()로 의심이 되는 데이터들을 찍어보았다.
그 결과는 NaN이 출력이 된다.

무슨 문제가 발생한것인지 해결하기 위해 내 코드를 계속 보고 수정도 해보고 했지만 해결하지 못하고 있던 와중..
돌리고 있는 로직은 계산 부분이고 계산은 enemyCreate 함수 안에 작성되어있다.
근데 이 돌리고 있는 부분이 문제가 발생한거로 인지를 하고 enemyCreate 함수가 호출되는 지점을 확인했다.

setInterval 함수 안에서 호출되었고, Enemy 클래스 생성자를 호출해 새로운 인스턴스를 생성한 enemys로 enemyCreate 함수를 호출했다.

왠지 이 부분이 문제인듯 하다.
구글에서 setInterval을 MDN에서 보니 this의 문제점이 보였다.
setInterval은 setInterval에 전달되는 함수는 호출된 함수에 대한 this 키워드가 전역(window)으로 자동 설정된다고 한다.
즉, 내 코드에서는 this가 enemys(Enemy 클래스의 인스턴스, 즉 Enemy 클래스에서의 this는 enemys를 가리킨다.)다
라고 한것이지만, 무시되고 this가 전역(window)으로 강제 된것이다.
이 문제의 해결방법은 함수를 ES6의 Errow Function으로 하거나, enemys.enemyCreate.bind(enemys)처럼 this를
바인딩 시켜주는 방법이 있다.