'apply'와 'call'을 이용한 'this' 키워드의 명시적인 바인딩 방법

JavaScript에서 ‘this’ 키워드는 현재 실행 컨텍스트에서 사용되는 객체를 참조합니다. 그러나 때로는 명시적으로 ‘this’를 바인딩하여 원하는 객체로 참조하는 것이 필요할 수 있습니다. 이를 위해 ‘apply’와 ‘call’ 메서드를 사용할 수 있습니다.

‘apply’ 메서드

‘apply’ 메서드는 함수를 호출할 때 사용되며, 첫 번째 매개변수로 함수 내에서 참조할 ‘this’ 값을 전달하고, 두 번째 매개변수로는 배열 또는 유사 배열 객체를 전달합니다. 함수 내에서 ‘this’의 값을 첫 번째 매개변수로 전달된 객체로 명시적으로 설정할 수 있습니다.

다음은 ‘apply’ 메서드를 사용하여 ‘this’를 명시적으로 바인딩하는 예제입니다.

const obj1 = { name: "John" };

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

sayHello.apply(obj1); // Output: Hello, John!

‘call’ 메서드

‘call’ 메서드는 함수를 호출할 때 사용되며, 첫 번째 매개변수로 함수 내에서 참조할 ‘this’ 값을 전달하고, 이후 매개변수로는 함수에 전달할 인수들을 개별적으로 전달합니다. 함수 내에서 ‘this’의 값을 첫 번째 매개변수로 전달된 객체로 명시적으로 설정할 수 있습니다.

다음은 ‘call’ 메서드를 사용하여 ‘this’를 명시적으로 바인딩하는 예제입니다.

const obj2 = { name: "Jane" };

function sayGoodbye(message) {
    console.log(`${message}, ${this.name}!`);
}

sayGoodbye.call(obj2, "Goodbye"); // Output: Goodbye, Jane!

결론

JavaScript에서 ‘apply’와 ‘call’ 메서드를 사용하여 ‘this’ 키워드를 명시적으로 바인딩할 수 있습니다. 이를 통해 함수 내에서 원하는 객체를 참조하고 해당 객체의 속성이나 메서드를 사용할 수 있습니다.