자바스크립트 call(), apply(), bind()

Javascript 인터뷰 질문을 Google에서 검색한 적이 있다면 인터뷰 대상자에게 Javascript의 호출, 적용 및 바인드 기능 간의 차이점을 논의하도록 요청하는 질문을 접했을 것입니다.

언뜻 보기에 이것들은 매우 혼란스러워 보이지만 시간을 들여 실제로 공부하면 꽤 이해하기 쉽습니다.

호출, 적용 및 바인드의 차이점에 대해 논의하기 전에 JavaScript: The Advanced Concepts(2021)라는 과정에 대해 소개하고 싶습니다. 여기서 배운 내용은 Javascript 지식을 늘리는 데 큰 도움이 되었습니다.

호출, 적용 및 바인딩은 모두 'this' 키워드를 중심으로 합니다. 자바스크립트에서 'this' 키워드에 대해서는 추후에 좀 더 심도 있는 글을 쓰겠지만, 'this'는 'this' 키워드로 함수를 호출하는 객체를 의미한다는 점만 기억하시면 됩니다.

다음과 같은 코드가 있을 수 있습니다.

let person = {
  age: 30,
  name: "Josh"
}

person.greet = function() {
  console.log(`My name is ${this.name}.`)

}


person.greet();

이렇게 하면 "내 이름은 Josh입니다."가 출력됩니다.

하지만 그 함수를 호출하고 싶지만 'this'에 대해 다른 것을 사용한다면 어떨까요?

전화와 신청이 들어오는 곳입니다.

코드를 약간 변경하고 다른 사람을 추가하여 코드가 다음과 같이 보이도록 합시다.

let josh = {
  age: 30,
  name: "Josh"
}

josh.greet = function() {
  console.log(`My name is ${this.name}.`)
}

let frank = {
  age: 25,
  name: "Frank"
}

우리는 josh로부터의 welcome 함수를 "하이재킹"할 수 있고 Frank가 call 또는 apply를 사용하여 그것을 사용하도록 할 수 있습니다.

josh.greet.call(frank);

josh.greet.apply(frank);

이 두 기록 모두 "내 이름은 프랭크입니다."

바인딩은 매우 유사하지만 함수를 저장하고 나중에 호출하는 데 사용됩니다.

let frankGreeting = josh.greet.bind(frank);

frankGreeting();

원하는 경우 이들에 인수를 전달할 수 있습니다. 작업 중인 main 함수를 다음과 같이 수정해 보겠습니다.

josh.greet = function(lastName) {
   console.log(`My name is ${this.name} ${lastName}.`);
}

이렇게 호출 기능을 사용할 수 있습니다.

josh.greet.call(frank, "smith");

또는 적용을 사용하려는 경우 인수에 대해 배열을 사용합니다.

josh.greet.apply(frank, ["smith"]);

바인드도 비슷하게 작동합니다.

let frankGreeting = josh.greet.bind(frank);

frankGreeting("Smith");

이것이 Javascript에서 호출, 적용 및 바인드가 작동하는 방식입니다! 이렇게 분해하면 머리를 감싸는 것이 꽤 쉽다고 생각합니다.

웹 개발에 대해 자세히 알아보려면 .