JavaScript 적용, 호출 및 바인딩 단순화

JavaScript에서 this의 범위와 값을 마스터하는 측면 중 하나는 apply , call 및 bind 작동 방식을 이해하는 것입니다.
이 문서는 이러한 방법을 단순화하는 것을 목표로 합니다. 여기서는 가능한 한 간단하게 설명하려고 합니다.

JS에서 this는 함수가 호출되는 현재 컨텍스트를 나타냅니다. this를 자세히 다루는 것은 그 자체로 별도의 기사이지만 기억해야 할 주요 사항은 this 개체를 결정하려면 함수가 호출되는 위치를 확인해야 한다는 것입니다.
this의 여러 가능성 중에서 JS를 사용하여 함수에 대해 this를 설정할 수 있는 세 가지 방법에 대해 논의합니다.

JS(및 대부분의 다른 언어)에서 함수를 호출하려면 매개변수를 전달하고 호출하기만 하면 됩니다. 예시:

function logMe(text) {
  console.log(text);
}

logMe('Canada')
// Output: 'Canada'

apply , call 및 bind가 그림에 나타나면 함수에 대한 this 개체를 지정할 수도 있습니다.
따라서 이러한 메서드를 사용하면 다음을 지정하여 JS 함수를 호출/호출할 수 있습니다.

범위( this 개체) 및

매개변수
호출하려는 함수에 대해

☎️ 신청 및 전화

이 두 가지 방법은 비슷합니다.
사용될 때 둘 다 범위 또는 this 객체를 첫 번째 매개변수로 사용하고 그 다음에 함수에 대한 매개변수/인수를 사용합니다.

유일한 차이점은 함수에 대한 인수가 전달되는 방식입니다.

function invokeMe(val1, val2) {
  // Note that the first `val` comes from the "this" object
  // that the function is referring to
  // and `val1` and `val2` are the function arguments. 
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

invokeMe.apply(thisObj, [arg1, arg2]); // Output: 'JavaScript Hello World'

invokeMe.call(thisObj, arg1, arg2); // Output: 'JavaScript Hello World'

apply 단일 배열로 전달할 인수를 사용합니다.call는 명시적으로 전달할 인수를 사용합니다.

내가 찾은 유용한 니모닉here은
"배열의 경우 c, 쉼표의 경우."

🤝 바인드

메서드bind도 call와 같은 호출 구문을 가지고 있지만 중요한 차이점은call 함수를 즉시 호출하고,bind 함수만 바인딩하고 나중에 호출할 수 있는 새 함수를 만듭니다.

function invokeMe(val1, val2) {
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

// Binding the function ⬇
const bind1 = invokeMe.bind(thisObj, arg1, arg2); // No Output Yet
// Invoking the function ⬇
bind1(); // Output: 'JavaScript Hello World'

bind 를 더 잘 이해하려면 즉시 호출이 아니라 this 범위로 함수를 바인딩하기 위한 것이라는 사실에 집중하세요.
즉, 함수를 바인딩할 때 전달해야 하는 인수가 필요하지 않습니다. 함수를 호출할 때 전달할 수 있습니다(일반적인 프로그래밍 스타일).

function invokeMe(val1, val2) {
  console.log(`${this.val} ${val1} ${val2}`);
}

const thisObj = { val: 'JavaScript' };
const arg1 = 'Hello';
const arg2 = 'World';

// Binding the function ⬇
const bind2 = invokeMe.bind(thisObj); // No Output Yet
// Invoking the function ⬇
bind2(arg1, arg2); // Output: 'JavaScript Hello World'

그게 다야 apply , call 및 bind 에 대한 주요 사용 지침을 다룹니다. 설명은 OOPS에서 이러한 메서드가 새 범위 개체에 대해 다시 작성할 필요 없이 다른 개체에 대해 단일 함수를 재사용하는 데 도움이 된다는 것을 이해하는 데 도움이 됩니다.