[Javacsript] apply, call, bind

this : 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수

this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다

자바스크립트 엔진에 의해 암묵적으로 생성된다.

중요한 점은 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

그렇기에 예를 들어 일반함수 호출 방식에서 살펴보자

기본적으로 this에는 전역 객체가 바인딩 된다

function foo() {
  console.log('foo', this) // window
  function bar() {
    console.log('bar', this) // window
  }
  bar()
}
foo()

중첩 함수에서도 일반 함수로 호출하면 this가 바인딩 된다.

객체의 메서드 내부에서라든지, 콜백 함수 내부 등

그냥 일반 함수로 호출하면 내부의 this에 전역 객체가 바인딩 된다.

그래서 바인딩을 일치시키기 위해서는 이후에 나오는 call, bind, apply 등의 메서드도 있지만, this를 변수에 할당해서 활용하는 방법도 있다

추가적으로 화살표 함수(=>)의 함수 내부의 this는 상위 스코프의 this를 가리키기 때문에 이를 활용할 수도 있다

여기서 call, bind apply에 대해서 살펴보자

this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출한다
apply와 call 메서드의 본질적인 기능은 함수를 호출하는 것이다
첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다

call

call 메서드는 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달한다

function greet(greeting, punctuation) {
    console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };

// call을 사용해 person을 this로 설정
greet.call(person, 'Hello', '!');

Hello, Alice!

apply

apply 메서드는 호출할 함수의 인수를 배열로 묶어 전달한다

function greet(greeting, punctuation) {
    console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Bob' };

// apply를 사용해 person을 this로 설정하고, 인수를 배열로 전달
greet.apply(person, ['Hi', '...']);

Hi, Bob...

bind

bind 메서드는 apply와 call 메서드와 다르게 함수를 호출하지 않는다

function greet(greeting, punctuation) {
    console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Charlie' };

// bind를 사용해 this를 person으로 설정한 새로운 함수를 생성
const greetCharlie = greet.bind(person);

greetCharlie('Hey', '!!!');

Hey, Charlie!!!