JavaScript에서는 call(), apply(), bind() 세 가지 메서드를 사용하여 다른 객체의 메서드를 차용(borrow)할 수 있습니다. 이를 통해 코드 재사용성을 높이고, 객체 간에 기능을 손쉽게 공유할 수 있습니다.
메서드 차용이란?
메서드 차용이란 한 객체에 정의된 메서드를 다른 객체가 자신의 것처럼 호출하여 사용하는 기법입니다. this 키워드가 참조하는 객체를 명시적으로 지정함으로써 가능합니다.
- call(): 인수를 개별적으로 전달하며 즉시 함수를 실행합니다.
- apply(): 인수를 배열 형태로 전달하며 즉시 함수를 실행합니다.
- bind():
this가 고정된 새로운 함수를 반환하며, 필요한 시점에 호출할 수 있습니다.
예제 코드
다음은 JavaScript에서 메서드를 차용하는 방법을 보여주는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript 메서드 차용</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>JavaScript에서 메서드 차용하기</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 obj 객체의 welcome 메서드를 차용합니다
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resultEle = document.querySelector(".result");
let obj = {
firstName: "Rohan",
lastName: "Sharma",
welcome() {
return "Welcome " + this.firstName + " " + this.lastName;
},
};
let obj1 = {
firstName: "John",
lastName: "Shaw",
};
sampleEle.innerHTML = "obj.welcome() = " + obj.welcome();
document.querySelector(".Btn").addEventListener("click", () => {
resultEle.innerHTML = "obj1.welcome() = " + obj.welcome.call(obj1);
});
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'클릭하세요' 버튼을 누르면 obj.welcome.call(obj1)을 통해 obj1 객체가 obj의 welcome 메서드를 차용하여 아래와 같은 결과가 표시됩니다.
핵심 정리
이 예제에서 핵심은 obj.welcome.call(obj1) 부분입니다. 원래 welcome 메서드는 obj 객체에만 정의되어 있지만, call()을 사용해 this를 obj1로 지정함으로써 obj1의 firstName과 lastName 값으로 인사말을 생성했습니다. 이처럼 call(), apply(), bind()를 활용하면 불필요한 코드 중복 없이 기존 메서드를 여러 객체에서 재사용할 수 있습니다.