[this] 명시적 바인딩(call, apply, bind)에 대해 설명해 보세요.

[bucketHaneul]

ㅁㄴㅇ

[shinsehantan]

• 자바스크립트에서는 메서드 내의 내부 함수 호출 패턴을 정의해 놓지 않았기 때문에, 내부 함수의 경우 일반 함수로 취급되어 함수 호출 패턴 규칙에 따라 this는 전역 객체에 바인딩된다. 이러한 this 바인딩의 한계를 극복하기 위해 제공되는 메서드가 call, apply, bind이다.

• Call, Apply, Bind 메서드 사용 시, 메서드에 첫 번째 인수로 전달하는 객체에 바인딩 된다.

  • Call 메서드는 함수를 실행하고, 첫 번째 인자에 this를 바인딩하며, 이후의 값을 함수의 인자로 전달한다.
  • Apply 메서드는 함수를 실행하고, 첫 번째 인자에 this를 바인딩하며, 이후의 값을 배열의 형태로 받아 차례로 함수의 인자로 전달한다.
  • bind 메서드는 함수를 실행하지 않으며, 첫 번째 인자에 this를 바인딩한 새로운 함수를 반환한다. 반환된 새로운 함수를 실행해야 원본 함수가 실행된다. (반환되는 '새로운 함수'는 특수 객체이다. 함수처럼 호출할 수 있지만 함수는 아닌 다른 객체)

• 사용 예시

  • 유사 배열 객체에서 배열 메서드를 사용하는 경우에 사용할 수 있다.
  • arguments 객체는 실제 배열이 아니므로 pop(), shift() 같은 표준 메서드를 사용할 수 없지만, apply() 메서드로 Array를 this로 매핑해주면 표준 메서드를 사용할 수 있다.

  arguments.shift();  // 에러 발생
  Array.prototype.slice.apply(arguments); // 배열 표준 메서드 사용 가능

참고 ) https://velog.io/@realryankim/JavaScript-this란

[ddongule]

이들 모두는 Function.prototype 의 메소드이다. Call, Apply는 호출할 함수에 인수를 전달하는 방식만 다를 뿐 동일하게 동작한다.

call - 리스트 형식으로 전달, 함수 호출

• 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.

apply - 배열로 묶어 전달, 함수 호출

• 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.

bind - this로 사용할 객체만 전달, 함수 호출하지 않음

• 함수를 어떻게 호출했는지 상관하지 않고 this의 값을 설정할 수 있다.
• 메서드의 this와 메서드 내부의 중첩함수 또는 콜백함수의 this가 불일치하는 문제를 해결하기 위해 유용하게 사용된다.

[bucketHaneul]

call 메서드

• call 메서드는 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령어입니다. call 메서드의 첫번째 인자를 this로 바인딩하고, 이후 인자들을 호출한 함수의 매개변수로 넘깁니다

apply 메서드

• call 메서드와 비슷하게 동작하지만, apply는 call과 다르게 두번째 인자를 배열로 받아 그대로 호출한 함수의 매개변수로 넘깁니다.

bind 메서드

• ES5에서 추가된 기능으로, call과 비슷하지만 즉시 호출하지는 않고 넘겨 받은 this와 인수를 바탕으로 새로운 함수를 실행하지는 않고 특수 객체를 반환하기만 합니다
• bind한 함수의 name 프로퍼티를 출력하면 bound라는 접두어가 붙습니다. 이로 인해 코드 추적이 더 쉬워집니다.

[jum0]

• call, apply, bind 메서드는 Function.prototype의 메서드이다. 즉, 이들 메서드는 모든 함수가 상속받아 사용할 수 있다.

• call 메서드와 apply 메서드 공통점

  • 본질적인 기능은 함수를 호출하는 것
  • 함수를 호출하면 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩
  • call 메서드와 apply 메서드는 인수를 전달하는 방식만 다를 뿐 동일하게 동작
  • 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우

• call 메서드

  • 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달 ex) getThisBinding.call(thisArg, 1, 2, 3)

• apply 메서드

  • 호출할 함수의 인수를 배열로 묶어 전달 ex) getThisBinding.call(thisArg, [1, 2, 3])

• bind 메서드

  • 메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this가 불일치하는 문제를 해결하기 위해 유용하게 사용