this 이것.

class 나 객체지향적 마인드에서보면

this는 해당 인스턴스 그 자체를 가리킨다.

함수의 매서드인 call,apply,bind가 왜나온것일까

쉽게 생각해보자.

크롬 개발자도구를 켜서

function a (){
  return this;
}

해보자.

무엇이나오는가 ?

window객체 자체가 나온다. (윈도우객체는 전역변수,함수들을 담는 전역객체이다)

node.js에서는 global이 이 기능을 대신 하고있는데

globalThis라는 녀석이 리턴된다.

그렇다면 나는 어떤 함수를 사용하는데 this를 명시적으로 보내주고싶다.

그럴때 사용하는게

call,apply,bind 이다.

call,apply

둘은 좀 묶어서 설명할수있을거같다.

fn.call(첫번째인자,두번쨰인자?,세번째인자)

이런게있다면 ?

첫번째인자는 this를 명시적으로 보내주고

두번째인자,세번째인자 ...등등등 은

fn이라는 함수의 파라미터자리에 고대로 들어간다. (순서대로 들어간다)

예시를 들기엔 좀 쉬운내용이라고 생각되어 이렇게 써서 기록하겠다.

마찬가지로

fn.apply(첫번째인자, 두번째인자는 배열)

이렇게 들어갑니다.

두번째인자가 배열이므로 좋은점이 몇가지 있다. 배열을 다루는 고위함수나,메서드들을 이용할수있다는점이다.

bind

bind의 예제를 몇개 돌려보면서 생각했다.

callback함수를 만드는느낌도 있엇지만. 그렇게 정의하면 큰 모순이다.

쉽게생각하면 함수를 묶어둔다(bind)

실행시키는게아니다.

이게 핵심이다.

우리는 온클릭이벤트때 이것에대해서 신경써본적이있다.

btn.onclick = fn

그냥 함수만 주는것은 문제가 안된다. 하지만

전달인자를 주고싶다.

특히 반복문을 돌려서

어떤 요소요소들마다 클릭 이벤트를 부여해줄수도 있지않은가.

그때 사용하기 좋은데

btn.onclick = fn(인자) 이렇게 주면

함수실행이 되어버린다.

지금까지 무명함수 라고 직접적으로 불러본적은 없겠지만..

btn.onclick = (인자)=>{fn(인자)}

이렇게 무명함수 처리해주면 함수실행은 되지 않으며

onclick에 콜백함수로써 줄수있다.!

하지만 이러한 문법때문에 bind가 잘 쓰이지 않았다.
(실제로 바인드의 기능이 대체된 신문법이긴하다.)

btn.onclick = fn.bind(null,인자)

혹은

직접적으로 this를 정해줘야할때

btn.onclick = fn.bind(명시된this) // parameter는 없다고 가정했음

콜백을 필요로하는곳에 사용될수있다는점에서 맨위에 언급했던

콜백함수를만들어준다? 라고 얼핏 얘기했던것이다.

하지만 명백히 다르다..

함수를 실행이아닌 명시적으로 값을주고 멈춘상태의 함수로 만들어준다는것? 이렇게 정의할수있을까.