`JavaScript` 에서 명시적 `This binding`을 제공하는 `3가지 메소드` ( call, apply, bind)

안녕

 

 

 

오늘은 명시적으로 this를 설정하기 위해서 사용되는 3가지 메소드에 대해서 간단히 정리해보겟슴닷

 

 

 

 

 

call 메서드

 

• 함수 호출 시 this를 명시적으로 지정해야 할 때 사용합니다

 

특징

컨텍스트 전환

객체 메서드를 다른 객체에서 호출하고 싶을 때 call을 사용해 this를 바꿀 수 있음.

 

사용법

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

 

const person1 = { name: '이태규' };
const person2 = { name: '한도현' };

function greet() {
    console.log('상민이 닮은, ' + this.name);
}

greet.call(person1); // "상민이 닮은, 이태규"
greet.call(person2); // "상민이 닮은, 한도현"

 

 

 

apply 메서드

• call과 비슷하지만 인수를 배열 형태로 전달해야 할 때 사용됩ㄴ다

 

특징

동적인 인수 배열

만약 함수가 받을 인수들이 배열로 이미 존재하거나 동적으로 생성된 경우, apply를 사용하면 인수를 쉽게 전달할 수 있음

 

배열과 유사한 객체 다루기

apply는 배열이나 배열과 유사한 구조를 다룰 때 유용함 배열의 요소를 함수의 인수로 간단하게 넘기고자 할 때 사용됨

 

사용법

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

 

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers); // 7
const min = Math.min.apply(null, numbers); // 2

 

 

 

 

bind 메서드

• 함수의 this와 일부 인수를 미리 고정하고, 나중에 그 함수를 호출할 때 사용됩니다.

 

특징

부분 적용 함수

bind를 사용하면 함수의 일부 인수를 고정하고, 그 나머지 인수는 나중에 제공할 수 있음

 

함수 재사용

특정 컨텍스트에 고정된 함수를 생성하여 여러 곳에서 재사용할 수 있음(이벤트 핸들러나 콜백 함수에서 유용)

 

지연된 실행

bind는 함수를 즉시 실행하지 않고 나중에 특정 컨텍스트에서 실행함

 

사용법

let newFunc = functionName.bind(thisArg, arg1, arg2, ...)

 

const person = {
    name: '이태규',
    greet: function() {
        console.log(greeting + ', ' + this.name);
    }
};

const greetLee= person.greet.bind(person);

greetLee('Hello'); // "Hello, Alice" // "안녕, 이태규"