JavaScript에서 call(), apply() 및 바인딩() 익히기: 이를 제어하기

JavaScript의 call(), apply() 및 바인딩() 메서드 이해

JavaScript에서 call(), apply() 및 바인딩() 메서드는 함수가 작동하는 객체를 결정하는 함수의 컨텍스트(this)를 제어하는 ​​데 사용됩니다. 이러한 메소드를 사용하면 특정 this 값을 사용하여 함수를 호출할 수 있으며 함수가 객체와 상호 작용하는 방식을 관리하는 데 필수적입니다.

1. call() 메소드

call() 메소드를 사용하면 특정 this 값과 개별 인수를 사용하여 함수를 호출할 수 있습니다. 함수 호출 시 컨텍스트(this)를 명시적으로 설정하는 방법 중 하나입니다.

구문:

functionName.call(thisArg, arg1, arg2, ...);

• thisArg: 함수 내에서 this로 사용해야 하는 값입니다.
• arg1, arg2, ...: 함수에 전달되는 인수입니다.

call()의 예:

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person);  // Output: Hello, Alice!

이 예에서는 call()을 사용하여 person 개체를 참조하여 Greeting 함수를 호출하므로 출력은 "Hello, Alice!"입니다.

call() 사용 사례:

• 다른 컨텍스트로 메소드 호출: call()을 사용하여 한 객체에서 메소드를 빌려 다른 객체에 적용할 수 있습니다.

2. apply() 메소드

apply() 메서드는 call()과 매우 유사하지만 인수를 개별적으로 전달하는 대신 배열 또는 유사 배열 객체로 전달합니다. 이 값은 여전히 ​​지정된 개체로 설정되어 있습니다.

구문:

functionName.apply(thisArg, [arg1, arg2, ...]);

• thisArg: 함수 내에서 this로 사용해야 하는 값입니다.
• [arg1, arg2, ...]: 함수에 전달할 인수가 포함된 배열 또는 배열 유사 객체.

적용()의 예:

function sum(a, b) {
  console.log(this.name, a + b);
}

const person = { name: 'Bob' };

sum.apply(person, [5, 10]);  // Output: Bob 15

이 예에서 apply()는 인수 [5, 10]의 배열을 sum 함수에 전달하는 데 사용되며 this 값은 person 객체로 설정되므로 출력은 "Bob 15"입니다.

apply() 사용 사례:

• 인수 배열 전달: 배열 형식의 인수가 있고 이를 함수에 전달하려면 apply()를 사용하세요.

3. bind() 메소드

bind() 메서드는 호출 시 this가 제공된 값으로 설정되는 새 함수를 생성하고 향후 호출을 위해 인수를 미리 설정할 수 있도록 합니다. call() 및 apply()와 달리, 바인딩()은 함수를 즉시 호출하지 않습니다. 대신 나중에 호출할 수 있는 새 함수를 반환합니다.

구문:

functionName.call(thisArg, arg1, arg2, ...);

• thisArg: 이것이 바인딩되어야 하는 값입니다.
• arg1, arg2, ...: 미리 설정할 인수입니다.

바인드()의 예:

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person);  // Output: Hello, Alice!

여기에서 바인딩()은 person 개체에 영구적으로 설정되는 새로운 함수인 GreetingCharlie를 생성합니다. GreetingCharlie()가 호출되면 "Hello, Charlie!"가 인쇄됩니다.

bind() 사용 사례:

• 고정된 this 값을 사용하여 새 함수 만들기: 바인딩()은 특정 this 값을 유지하는 새 함수를 만들어야 할 때 유용합니다.

call(), Apply(), Bind()의 차이점

기능

Feature	call()	apply()	bind()
Execution	Immediately invokes the function	Immediately invokes the function	Returns a new function (does not execute immediately)
Arguments	Pass arguments individually	Pass arguments as an array or array-like object	Pass arguments individually or preset them
Return Value	Returns the result of the function call	Returns the result of the function call	Returns a new function
Use Case	Call a function with a specified this value and arguments	Call a function with a specified this value and an array of arguments	Create a new function with a preset this value and arguments

전화() 적용() 바인드() 실행 즉시 함수 호출 즉시 함수 호출 새 함수를 반환합니다(즉시 실행되지 않음) 인수 인수를 개별적으로 전달 인수를 배열 또는 배열 유사 객체로 전달 인수를 개별적으로 전달하거나 미리 설정하세요 반환 값 함수 호출 결과를 반환합니다 함수 호출 결과를 반환합니다 새 함수를 반환합니다 사용 사례 지정된 값과 인수를 사용하여 함수 호출 지정된 값과 인수 배열을 사용하여 함수 호출 이 값과 인수가 미리 설정된 새 함수 만들기

예: call(), apply() 및 바인딩() 결합

functionName.call(thisArg, arg1, arg2, ...);

결론

• call() 및 apply()는 지정된 this 값과 인수를 사용하여 즉시 함수를 호출하는 데 사용됩니다.
• bind()는 즉시 호출하지 않고 지정된 이 값과 선택적으로 미리 설정된 인수를 사용하여 새 함수를 만드는 데 사용됩니다.
• call()은 개별 인수에 유용하고, apply()는 인수 배열을 전달하는 데 적합합니다.
• bind()는 나중에 고정된 컨텍스트(this)로 호출할 수 있는 함수를 생성하는 데 유용합니다.

이러한 메소드는 특히 메소드를 차용하거나 이벤트 핸들러를 설정하는 경우 JavaScript에서 이 컨텍스트를 제어하고 기능을 처리하는 데 필수적입니다.

---

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

위 내용은 JavaScript에서 call(), apply() 및 바인딩() 익히기: 이를 제어하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!