자바스크립트에서 함수에 객체를 매개변수로 전달하려면 this 키워드와 prototype을 활용할 수 있습니다. 생성자 함수로 객체를 만들고, 프로토타입에 메서드를 정의한 뒤 bind()를 사용해 해당 객체에 메서드를 연결하는 방식입니다.
예제 코드
아래 예제를 직접 실행해 보면서 객체를 매개변수로 전달하는 방법을 확인해 보세요.
<html>
<head>
<script>
// 생성자 함수 정의
var func = function(param1) {
this.param1 = param1;
};
// prototype을 이용해 display 메서드 추가
func.prototype.display = function() {
return this.param1;
};
// 매개변수로 전달받은 함수를 실행하는 함수
function display(val) {
document.write(val());
}
// new 키워드로 객체 생성
var res = new func(99);
// bind()를 사용해 res 객체에 메서드를 바인딩한 후 전달
display(res.display.bind(res));
</script>
</head>
</html>
코드 설명
1. 생성자 함수: func는 전달받은 값을 this.param1에 저장하는 생성자 함수입니다.
2. 프로토타입 메서드: func.prototype.display를 통해 모든 인스턴스가 공유하는 display 메서드를 정의합니다. 이 메서드는 객체의 param1 값을 반환합니다.
3. bind()의 역할: res.display.bind(res)는 display 메서드 내부의 this가 항상 res 객체를 가리키도록 고정합니다. 이렇게 바인딩된 함수를 다른 함수의 매개변수로 전달하면, 호출 시점에 올바른 객체 컨텍스트가 유지됩니다.
위 코드를 실행하면 화면에 99가 출력됩니다. 이처럼 this, prototype, 그리고 bind()를 조합하면 자바스크립트에서 객체와 관련된 함수를 안전하게 매개변수로 전달할 수 있습니다.