this와 binding

자바스크립트에는 일반함수와 화살표함수가 있다. 일반함수와 화살표함수에서 사용하는 this는 다르다.

this

자바스크립트는 스크립트 언어로, 인터프리터에 의해 줄 단위로 읽혀서 해석되어 실행된다.
인터프리터에 의해 현재 실행되는 자바스크립트의 환경을 실행 컨텍스트라고 한다. 자바스크립트 내부에서 이러한 실행 컨택스트를 스택으로 관리하며, 실행되는 시점에 자주 변경되는 실행 컨택스트를 this가 가리킨다.
즉, this는 현재 실행되는 코드의 실행 컨텍스트를 가리킨다.

const say = function() {
  console.log(this); // 여기서 this는 뭘까?
  console.log("Hello, my name is " + this.name);
};

say();

//window
//Hello, my name is

window객체가 나타난다. 기본적으로 this는 window이기 때문이다. 하지만 window라고만 말할 수는 없다. this는 객체 내부, 객체 메서드 호출시, 생성자 new 호출시, 명시적 bind시에 따라 바뀌기 때문이다.

binding

this를 그때 그때 알맞은 객체로 바꿔서 this값에 따라 인사말이 할 것이다. 이 것이 this의 binding이다.
this를 Window가 아닌 다른 객체로 바꿔주는 함수가 call, apply, bind이다.

call과 apply

const obj ={name: "철수"}

const say = function(city) {
  console.log(`Hello, my name is " + this.name, I live ${city}`);
};

say("seoul") // Hello, my name is , I live seoul
say(obj, "seoul")// Hello, my name is 철수, I live seoul
say(obj, ["seoul"])// Hello, my name is 철수, I live seoul

say함수의 this를 변경하고 싶다면, 당연히 this를 대체할 객체가 있어야 한다. 코드를 조금 수정해서 아래와 같이 만들었다.
call과 apply는 함수를 호출하는 함수이다. 그러나 그냥 실행하는 것이 아니라 첫 번째 인자에 this로 setting하고 싶은 객체를 넘겨주어 this를 바꾸고나서 실행한다.
첫 번째 실행인 say("soeul")의 경우는 say가 실행 될 때 this에 아무런 설정이 되어있지 않으므로 this는 window객체이다.
두 번째 실행인 say.call(obj, "seoul");의 경우와 세 번째 실행인 say.apply(obj, "seoul")은 this를 obj로 변경시켰으므로 원하는 값이 나온다.
call과 apply의 유일한 차이점은, 첫 번째 인자(this를 대체할 값)를 제외하고, 실제 say에 필요한 parameter를 입력하는 방식이다. call과는 다르게 apply함수는 두 번째 인자부터 모두 배열에 넣어야 한다.

bind

const obj ={name: "철수"}

const say = function(city) {
  console.log(`Hello, my name is " + this.name, I live ${city}`);
};

const bindSay = say.bind(obj)
bindSay("seoul")//Hello, my name is 철수, I live seoul

bind함수가 call, apply와 다른 점은 함수를 실행하지 않는다는 점이다. 대신 bound함수를 리턴한다. 이 bound함수(bindSay)는 이제부터 this를 obj로 갖고 있기 때문에 나중에 사용해도 된다. bind에 사용하는 나머지 rest 파라미터는 call과 apply와 동일하다.