TIL: this, bind, requestAnimationFrame

Snoop So·2023년 3월 24일
0

this

this는 언제 결정될까? 실행할 때 결정이 된다. (어떻게 불렸나에 따라서 달라짐)

bind, call, apply 차이점

requestAnimationFrame

렌더링 사이클이 있음. 16ms 마다 갱신이 되는데, 그 안에 계산하고 보여지면 베스트. 약간 px 소수점 어긋나면 블러먹는 느낌인가봄..
렌더링 주기와 상관없이 돌아가는 것이 setInterval. 브라우저가 무효화시켜서 실행이 안될 수가 있음. (싱글 스레드라서)

  • requestIdle 콜백은 예를 들어서 16ms 안에 짜투리 시간에 일을 하도록 등록할 수 있음.

Adapter 패턴

reduce

리듀스는 차원이 다름. 타입을 변경해줄 때 사용하기!

콜백함수

수시로 확인하지 않고 호출되는 시점에 결과를 반환하는 것. 이때 제어권이 해당 함수에게 넘어간다. 이것이 콜백함수의 특징.

콜백 함수를 사용하는 setInterval의 내부구조를 살펴보면 다음과 같다.

	const intervalI = scope.setInterval(func, delay[]);

bind vs call vs apply

this가 bind되지 않는 상황 혹은 임의로 지정하고 싶은 상황에서 위 세가지 메소드를 사용할 수 있는데, 사용하는 상황이 미묘하게 다르다.

우선 call, apply는 콜백으로 들어간 함수를 즉각 실행하도록 한다. call과 apply의 차이는 인자를 array로 받느냐, 아니냐의 차이가 있다.

bind는 이와 다르게 콜백함수가 즉각 실행되지 않는다.

this.appendEachSlide.bind(this, image); // 실행되지 않는다.
this.appendEachSlide.bind(this, image)(); // 실행된다.
this.appendEachSlide.call(this, image); // 실행되지 않는다.
this.appendEachSlide.apply(this, [image]); // 인자를 array로 전달한다.

0개의 댓글