binding의 개념과 call, apply, bind (스테픈2km완료)
this는 자바스크립트에서 사용하는 곳에 따라 다르게 동작한다.
그래서 this를 바인딩 하는 방식이 있다는 개념은 이해하고 있었는데
실제로 사용해본적은 한번도 없었다.
최근 코딩리뷰테스트에서 이러한 바인딩을 사용해서 코드를 작성한걸 직접 보게되고
(코딩리뷰테스트에서 사용된 코드)
이 개념에 대해서 이해를 해야한다는 생각이 들어
공부를 해보려고 한다.
위 사진처럼 this를 이곳저곳에서 사용해보겠다.
위 사진에서 처럼 this를 호출하게되면 window가 호출된다
하지만 예를들어 새로운 객체를 만들어서 해당 객체로 바인딩을 해서 사용하고 싶다면
이럴대 사용하는게 call apply 등이다.
이렇게 call과 apply를 사용해서
obj을 만들어 사용해보자
결과는
똑같은 호출이지만
this가 window가 아니라
새로 만든 obj으로 호출되는걸 볼 수 있다.
함수를 약간 변경시켰다
파라메터를 받도록 변경시켰는데
call 과 apply는 둘다 두번째 인자로 파라메터를 받을 수 있다.
약간의 차이점이 존재하는데
일단 실행된 콘솔을 보면
동일하게 실행되는걸 볼 수있다.
문자열을 파라메터로 받고있지만
call과 apply의 차이점은 두번째 인자를 배열로 받는지 아니면 그냥 받는지 차이점인데
인자로 전달할 내용이 배열형태면 apply를 사용하고 그게 아니고 개별적으로 전달한다면
그냥 call로 사용하는 방식이면 좋을것 같군요
그럼 이걸 언제 사용하느냐
사실 저도 직접 사용한적이 거의 없어서 그냥 이런게 있구나 정도만 생각하고 있었으나.
이번 코딩테스트에서 직접 사용하는걸 보니 유용한 사용처가 있다는걸 알게되었네요
위 사진에서보면
제가 코딩테스트에서 작성했던 구문입니다.
iframe을 오픈할때 this를 바인딩했는데요
일반적으로 this는 전역인 window를 가리키지만
위 함수같은경우는 iframewindow를 을 재정의해서 사용했습니다
그래서 this가 가리키는 것이 window가 아니라 iframewidow를 가리키게 된것이죠
bind는 apply와 call과는 좀 다르게
this를 객체에 바인딩후 새롭게 this가 정의된 함수를 반환합니다.
위와 같은 함수가 있다고 가정했을때
이런식으로
객체 내부의 함수를 변수에 저장하고 실행하게되면
this가 객체를 가리키는게 아니라 window를 가리키게 됩니다.
이 this를 객체에 바인드 시키고 싶다면
이런식으로 바인딩 시켜야한다
결과를 확인해보면 해당 객체에 잘 바인딩이 되어 this가 window를 가리키는게 아니라
myobj를 가리킨다
잘 생각해보면 binding은 화살표 함수로도 비슷하게 만들 수 있을것 같은데요
한번 변형시켜 보겠습니다.
처음에는 이렇게 단순하게 변형시키면 된다고 생각했는데
막상 결과를 보니 전역으로 처리되더군요
조금 곰곰히 생각해봤는데
화살표 함수 자체가 this가 없기때문에 바로 상위 스코프를 찾는것으로 발생하는 문제입니다
상위 스코프를 myobj로 인식시키려면 한번더 감싸줘야겠군요
이런식으로 활용하면 bind없이도 this를 바인딩 시킬수 있습니다.
아무튼 오늘은 실제 활용하는 코드를 보며
call. apply bind에 대해서 한번더 사용해보는 시간을 갖게되었네요
스테픈 2km완료
