간단한 예제를 통해 JavaScript의 호출, 적용 및 바인딩 이해

JavaScript로 작업할 때 호출, 적용, 바인딩이라는 세 가지 강력한 방법을 접할 수 있습니다. 이러한 메서드는 함수에서 this의 값을 제어하는 ​​데 사용되어 개체 작업을 더 쉽게 만듭니다. 각 방법을 간단한 예를 통해 분석하여 작동 방식을 이해해 보겠습니다.

1. 통화 방법

call 메소드를 사용하면 특정 this 값을 사용하여 함수를 호출하고 인수를 하나씩 전달할 수 있습니다.

const person = {
  name: 'Alice',
  greet: function(greeting) {
    console.log(`${greeting}, my name is ${this.name}`);
  }
};

const anotherPerson = { name: 'Bob' };

person.greet.call(anotherPerson, 'Hello');
// Output: "Hello, my name is Bob"

이 예에서 call은 이 값을 person에서 anotherPerson으로 변경하므로 Greeting 함수는 "안녕하세요, 제 이름은 Bob입니다"를 인쇄합니다.

2. 방법 적용

적용 메소드는 호출과 유사하지만 인수를 하나씩 사용하는 대신 배열로 사용합니다.

const person = {
  name: 'Alice',
  greet: function(greeting, punctuation) {
    console.log(`${greeting}, my name is ${this.name}${punctuation}`);
  }
};

const anotherPerson = { name: 'Charlie' };

person.greet.apply(anotherPerson, ['Hi', '!']);
// Output: "Hi, my name is Charlie!"

여기에서 Apply를 사용하면 이 값을 anotherPerson으로 변경하고 여러 인수를 배열로 전달할 수 있습니다.

3. 바인딩 방법

바인드 메소드는 함수를 즉시 호출하지 않습니다. 대신 나중에 호출할 수 있는 이 값이 바인딩된 새 함수를 반환합니다.

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hi, my name is ${this.name}`);
  }
};

const anotherPerson = { name: 'Diana' };

const greetDiana = person.greet.bind(anotherPerson);

greetDiana();
// Output: "Hi, my name is Diana"

이 예에서 바인딩은 anotherPerson에 바인딩된 새로운 함수 GreetingDiana를 생성합니다. GreetingDiana를 호출하면 "Hi, my name is Diana"가 인쇄됩니다.

요약

• call: 특정 this 값과 하나씩 전달된 인수를 사용하여 함수를 즉시 호출합니다.
• 적용: 특정 this 값과 배열로 전달된 인수를 사용하여 함수를 즉시 호출합니다.
• 바인드: 나중에 호출할 수 있는 특정 이 값을 가진 새 함수를 반환합니다.

이러한 메서드는 한 개체에서 다른 개체와 함께 사용하기 위해 메서드를 빌려야 하거나 함수에서 이 값을 더 세밀하게 제어하려는 경우에 유용합니다.