Object.getPrototypeOf() 메서드는 사용자가 생성한 객체의 프로토타입(prototype)을 확인할 때 사용됩니다. 특히 두 객체가 서로 같은 프로토타입을 공유하고 있는지 비교하는 용도로도 널리 활용됩니다.
이 메서드는 인자로 전달된 객체의 내부 슬롯인 [[Prototype]], 즉 객체가 상속받은 원형 객체를 반환합니다. 만약 객체가 아닌 값이 전달되면 해당 값은 강제로 객체로 변환되며, null 또는 undefined가 전달되면 TypeError가 발생합니다.
기본 문법
Object.getPrototypeOf(object)
- object: 프로토타입을 조회하고자 하는 대상 객체입니다.
- 반환값: 해당 객체의 프로토타입 객체(
[[Prototype]])를 반환합니다.
예제
다음은 getPrototypeOf() 메서드의 동작을 보여주는 전체 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript getPrototypeOf()</h1>
<div class="sample"></div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 test 객체의 프로토타입을 확인할 수 있습니다
</h3>
<script>
let sampleEle = document.querySelector(".sample");
function fun(name, age) {
this.name = name;
this.age = age;
}
document.querySelector(".Btn").addEventListener("click", () => {
let test = new fun("Rohan", 22);
sampleEle.innerHTML = "test 객체의 프로토타입 = " + Object.getPrototypeOf(test);
});
</script>
</body>
</html>
실행 결과
위 화면에서 “클릭하세요” 버튼을 누르면 아래와 같이 결과가 표시됩니다.
버튼을 클릭하면 생성자 함수 fun으로부터 만들어진 test 객체의 프로토타입이 화면에 출력됩니다. 이때 반환되는 값은 곧 fun.prototype, 즉 생성자 함수의 프로토타입 객체입니다.
두 객체의 프로토타입 비교하기
getPrototypeOf() 메서드는 아래와 같이 두 객체가 동일한 프로토타입을 가지고 있는지 확인할 때도 유용하게 사용할 수 있습니다.
let obj1 = new fun("Alice", 25);
let obj2 = new fun("Bob", 30);
console.log(Object.getPrototypeOf(obj1) === Object.getPrototypeOf(obj2)); // true
같은 생성자 함수로 생성된 객체들은 하나의 프로토타입 객체를 공유하므로 위 비교 결과는 true가 됩니다. 이처럼 getPrototypeOf()는 객체 간의 상속 관계를 파악하거나 프로토타입 체인을 디버깅할 때 매우 유용한 메서드입니다.