Javascript 함수 호출 및 적용 방법

Javascript에서는 함수도 조금 이상하긴 하지만 객체로 간주되며 객체도 메서드를 가질 수 있으므로 함수도 메서드를 갖습니다.
함수에는 호출, 적용 및 바인딩의 3가지 흥미로운 메서드가 있습니다.
그래서 이 게시물에서 나는 그것들을 설명하고 그것들의 차이점을 말할 것입니다

알림: 함수 내부의 this 키워드

함수나 메서드 내부의 특별한 this 키워드는 그것의 소유자를 가리킨다는 것을 상기시키고 싶었습니다.
예를 들어 메서드가 있는 클래스와 해당 클래스의 인스턴스가 있는 경우 메서드를 호출할 때 this 키워드는 해당 인스턴스가 될 것입니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  speak(words) {
    console.log(`${this.name} says ${words}`);
  }
}

const person = new Person("John", 30);

person.speak("Hello"); // John says Hello

this는 여기에서 사람 개체를 참조합니다. 이 경우 소유자이므로 this.name은 John이 됩니다.

호출 방법

먼저 call 메서드에 대해 이야기해 보겠습니다. 간단히 말해서 메서드를 호출한 함수 내에서 this 키워드의 값을 변경할 수 있습니다.

예시

클래스 내부의 메서드와 동일한 작업을 수행하는 speak라는 별도의 함수를 만들어 봅시다.

function speak(words) {
  console.log(`${this.name} says ${words}`);
}

기본적으로 별도 함수 내의 this 키워드는 브라우저 환경의 window 객체 또는 nodejs 환경의 gloabl 객체입니다.
이제 사용자 이름을 올바르게 기록할 수 있도록 수동으로 개인 개체로 설정하겠습니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

function speak(words) {
  console.log(`${this.name} says: ${words}`);
}

const person = new Person("John", 30);

speak.call(person, "Hello"); // John says: Hello

이제 call 메서드를 사용했을 때 this는 이제 call 메서드에 전달된 사람 개체를 참조합니다(함수가 허용하는 모든 인수는 this 값 뒤에 전달될 수 있음).

적용 방법

apply 메소드는 call과 정확히 같은 일을 하지만 유일한 차이점은 함수 args가 개별 인수 대신 배열로 apply 메소드에 전달된다는 것입니다.

예시

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

function speak(word1, word2) {
  console.log(`${this.name} says: ${word1} ${word2}`);
}

const person = new Person("John", 30);

speak.apply(person, ["Hello", "World"]); // John says: Hello World

바인드 방법

바인드를 사용하면 동일한 작업을 수행할 수 있지만 함수를 호출하지 않고 대신 지정된 this 키워드를 사용하는 새 함수를 반환합니다.

예시

const johnSpeak = speak.bind(person, "Hello World"); // John says: Hello World

johnSpeak(); // John says: Hello World