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

Understand call, apply, and bind in JavaScript with Examples | Mbloging

JavaScript의 call, apply 및 bind 메서드는 함수에서 this 키워드를 제어하는 데 매우 중요합니다. 이는 특정 컨텍스트로 함수를 호출하는 방법을 제공하며 이는 실제 코딩 시나리오에서 매우 유용할 수 있습니다.

이 기사에서는 각 방법을 자세히 분석하고, 각 방법의 차이점을 살펴보고, 이 방법을 사용해야 하는 경우와 이유에 대한 실제 예를 제공합니다.

JavaScript에서 `call`, `apply`, `bind`가 왜 중요한가요?

JavaScript의

this 키워드는 항상 예상대로 작동하지 않기 때문에 까다롭습니다. call, apply 및 bind 메서드를 사용하면 함수에서 this 값을 명시적으로 설정할 수 있으므로 일반적인 범위 지정 문제를 해결하는 데 도움이 됩니다.

call()방법

call() 메서드를 사용하면 함수를 호출하고 this 값을 제공된 컨텍스트(첫 번째 인수)로 즉시 설정할 수 있습니다. 나머지 매개변수는 쉼표로 구분되어 하나씩 전달됩니다.

문법:

<code class="language-javascript">func.call(thisArg, arg1, arg2, ...)</code>

로그인 후 복사

thisArg: 함수 내부의 this 값입니다.
arg1, arg2, ...: 함수에 전달되는 매개변수입니다.

실제예: 차입방법

person과 greet라는 두 개의 개체가 있고 다른 컨텍스트에서 greet 기능을 사용하고 싶다고 가정해 보겠습니다.

<code class="language-javascript">const person = {
  name: "Alice",
  age: 25
};

function greet(city, country) {
  console.log(`Hello, my name is ${this.name}, and I am from ${city}, ${country}.`);
}

// 使用call借用greet函数
greet.call(person, "New York", "USA");
// 输出：Hello, my name is Alice, and I am from New York, USA.</code>

로그인 후 복사

사용 사례:

이는 각 개체에 대해 유사한 메서드를 재정의할 필요 없이 다른 개체에 함수를 재사용하려는 경우에 유용합니다.

apply()방법

apply()은 매개변수를 처리하는 방법을 제외하면 call()과 거의 동일합니다. 매개변수를 하나씩 전달하는 대신 배열로 전달합니다.

문법:

<code class="language-javascript">func.apply(thisArg, [argsArray])</code>

로그인 후 복사

thisArg: 함수 내부의 this 값입니다.
argsArray: 함수에 전달된 매개변수 배열입니다.

실용 예: `Math.max`

배열 사용

배열에서 최대 수를 찾고 싶다고 가정해 보겠습니다. JavaScript의 Math.max()은 배열과 함께 직접 사용할 수 없지만 apply()을 사용하여 작동하게 할 수 있습니다.

<code class="language-javascript">const numbers = [1, 5, 10, 15];

// 使用apply将数组元素作为单个参数传递
const maxNumber = Math.max.apply(null, numbers);
console.log(maxNumber); // 输出：15</code>

로그인 후 복사

사용 사례:

배열에 저장된 매개변수 목록을 전달해야 하는 경우에 적합합니다. apply() 같은 함수와 함께 사용되거나 인수 개수를 알 수 없는 경우에 자주 사용됩니다. Math.max()

방법bind()

메소드는 bind(), call()처럼 함수를 즉시 호출하지 않습니다. 대신 고정된 apply() 값과 사전 정의된 매개변수가 있는 새 함수를 반환합니다. this

문법:

<code class="language-javascript">func.call(thisArg, arg1, arg2, ...)</code>

로그인 후 복사

thisArg: 함수 내부의 this 값입니다.
arg1, arg2, ...: 새 기능에 대해 영구적으로 설정된 매개변수입니다.

실제 예: 사전 설정된 매개변수

누르면 누군가의 이름을 불러 인사하는 버튼이 있다고 가정해 보겠습니다. bind()을 사용하여 사전 설정된 이름으로 새 함수를 만들 수 있습니다.

<code class="language-javascript">const person = {
  name: "Alice",
  age: 25
};

function greet(city, country) {
  console.log(`Hello, my name is ${this.name}, and I am from ${city}, ${country}.`);
}

// 使用call借用greet函数
greet.call(person, "New York", "USA");
// 输出：Hello, my name is Alice, and I am from New York, USA.</code>

로그인 후 복사

사용 사례:

bind()은 이벤트 핸들러나 콜백 함수를 처리할 때와 같이 나중에 특정 컨텍스트로 호출되는 함수를 설정해야 할 때 특히 유용합니다.

`call`, `apply`, `bind`

의 차이점

주요 차이점을 간단히 요약하면 다음과 같습니다.

call()방법

즉시 통화 기능: 예
전달된 매개변수: 단일 매개변수
새 기능 반환: 아니요

apply()방법

즉시 통화 기능: 예
전달된 매개변수: 배열
새 기능 반환: 아니요

bind()방법

즉시통화 기능: 없음
전달된 매개변수: 단일 매개변수
새 기능 반환: 예

각 방법을 사용하는 경우:

특정 this 값을 가진 함수를 즉시 호출해야 하는 경우 call()를 사용하세요.
인수를 배열로 전달해야 하는 경우 apply()를 사용하세요.
고정된 this 값과 사전 설정된 매개변수를 사용하여 특히 이벤트 기반 코드에서 새 함수를 생성하려는 경우 bind()를 사용하세요.

실제 시나리오: 이벤트 처리에 `bind()` 사용

웹 애플리케이션을 구축 중이고 버튼과의 사용자 상호 작용을 처리해야 한다고 가정해 보겠습니다. bind()을 사용하면 올바른 컨텍스트를 유지하는 보다 효율적인 이벤트 핸들러를 만들 수 있습니다.

<code class="language-javascript">func.apply(thisArg, [argsArray])</code>

로그인 후 복사

설명:

bind()이 없으면 click() 내부의 this은 Button 개체가 아닌 버튼 요소 자체를 참조합니다. 메서드를 바인딩하면 올바른 컨텍스트(btn1)를 참조하는지 확인할 수 있습니다.

결론

JavaScript의

, call() 및 apply() 메서드는 함수 내에서 bind() 컨텍스트를 제어할 수 있는 강력한 도구입니다. 한 개체에서 다른 개체로 메서드를 빌리거나, 매개변수를 동적으로 전달하거나, 이벤트 핸들러를 설정하는 등 이러한 메서드를 익히면 코드가 더욱 유연해지고 재사용 가능해집니다. this

, call, apply을 언제, 어떻게 사용하는지 이해하면 효율적이고 간결하며 확장 가능한 JavaScript 코드를 작성하는 능력이 크게 향상될 수 있습니다. bind

FAQ

JavaScript에서 call, apply, bind의 차이점은 무엇인가요?
가장 큰 차이점은 매개변수를 처리하는 방식입니다. call()는 매개변수를 개별적으로 전달하는 반면 apply()은 매개변수를 배열로 전달합니다. bind() 함수를 즉시 호출하지 않고 고정된 this 값과 선택적 사전 설정 매개변수를 사용하여 새 함수를 반환합니다.
JavaScript에서 call, apply, bind을 언제 사용해야 하나요?
특정 this 값을 가진 함수를 즉시 호출해야 하는 경우 call()를 사용하세요. 인수 배열을 함수에 전달할 때는 apply()을 사용하세요. 특히 이벤트 처리나 콜백에서 고정된 this 값과 미리 설정된 매개변수를 사용하여 새 함수를 만들어야 하는 경우 bind()를 사용하세요.
JavaScript의 call, apply, bind을 화살표 함수와 함께 사용할 수 있나요?
아니요, call(), apply() 및 bind()은 주변 어휘 컨텍스트 this에서 상속되므로 화살표 기능에 영향을 주지 않으므로 이러한 방법을 사용하는 것은 관련이 없습니다.
JavaScript에서 call를 제어하기 위해 apply, bind, this을 사용하는 것이 왜 중요한가요?
this 값을 예측할 수 없습니다. call(), apply() 및 bind()을 사용하면 this 값을 명시적으로 설정할 수 있어 일반적인 범위 지정 오류를 방지하고 코드가 예상대로 실행되도록 할 수 있습니다.
JavaScript에서 call 같은 내장 함수와 함께 apply, bind, Math.max()을 사용할 수 있나요?
예, apply()을 사용하여 배열 자체를 허용하지 않는 Math.max()와 같은 함수에 배열을 전달할 수 있습니다. 마찬가지로 call()을 사용하여 매개변수를 내장 함수에 개별적으로 전달할 수 있습니다.