binding 개념과 call, apply, bind의 차이

binding이란?

javascript의 함수는 각각 자신의 this임을 정의합니다.

예를 들어, 자기 소개를 하는 함수를 만들기 위해 say() 라는 함수를 만든다고 합시다.

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

say();

실행해 보면

window 객체가 표시됩니다.

기본적으로 this는 window이기 때문이다.

사실 매우 어렵습니다.

window라고 밖에 말할 수 없다.

이것은, 오브젝트 내부, 오브젝트 메소드 호출시, 생성자 new 호출시, 명시적인 bind 시에 의해 바뀌기 때문입니다.

어쨌든 우리는 say 함수에서 Window 객체를 사용하고 싶지 않습니다.

즉, 그런 다음 적절한 객체로 바꾸고 this 값에 따라 인사합니다.

이것이 this의 binding이다.

명시적으로 위 this를 Window 이외의 객체로 바꾸는 함수는 call, apply, bind입니다.

call 과 apply

say 함수의 this를 변경하고 싶다면, 당연히 this를 대체하는 객체가 있어야합니다.

코드를 조금 수정하여 다음과 같이 만들었다.

call과 apply는 함수를 호출하는 함수입니다.

그러나 단순히 실행하는 대신 첫 번째 요인에 this로 설정하려는 객체를 전달합니다.

this를 바꾸고 나서 실행한다.

첫 러너 say(“soeul”) 의 경우는 say 가 실행될 때 this 에는 아무것도 설정되어 있지 않기 때문에 this 는 window 객체이다.

두 번째 연예인 say.call(obj, “seoul”); 의 경우와 세 번째 실행자 say.apply(obj, (“seoul”)) 는 this 를 obj 로 변경했으므로 원하는 값이 나옵니다.

call과 apply의 유일한 차이점은 첫 번째 인수 (this를 대체하는 값)를 제외하고 실제 say에 필요한 매개 변수를 입력하는 것입니다.

call과 달리 apply 함수는 두 번째 인수에서 모두 배열에 넣어야합니다.

바인드

bind 함수 call, apply와 다른 점은 함수를 실행하지 않는다는 것입니다.

대신 bound 함수를 반환합니다.

이 바운드 함수 (boundSay)는 이제 this를 obj에서 가지고 있으므로 나중에 사용할 수 있습니다.

bind에 사용되는 나머지 rest 매개변수는 call 및 apply와 동일합니다.

출처

– https://wooooooak.github.io/javascript/2018/12/08/call,apply,bind/

참고 자료

• How-to: call() , apply() and bind() in JavaScript
• 함수 메서드 및 arguments – zerocho 님의 블로그