자바스크립트에서 모든 객체는 자신의 프로토타입(prototype)으로부터 속성과 메서드를 상속받습니다. 예를 들어 new Object()로 생성한 객체는 Object.prototype을 상속받고, new Date()로 생성한 객체는 Date.prototype을 상속받습니다.
이러한 프로토타입 기반 상속은 자바스크립트의 핵심 개념으로, 객체가 직접 속성을 가지고 있지 않더라도 프로토타입 체인(prototype chain)을 따라 상위 객체에서 해당 속성이나 메서드를 찾아 사용할 수 있게 해줍니다.
생성자 함수와 프로토타입 활용 예제
아래 예제는 생성자 함수를 사용해 객체를 만들고, 그 객체의 속성에 접근하는 방법을 보여줍니다. 생성자 함수로 만든 객체 역시 해당 함수의 prototype 객체를 통해 메서드와 속성을 공유할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h2>부서 정보</h2>
<p id="details"></p>
<script>
function Department(myid, name, section) {
this.id = myid;
this.name = name;
this.section = section;
}
var myDept = new Department("AKD", "Marketing", "North");
document.getElementById("details").innerHTML =
"부서 이름과 담당 지역은 각각 " + myDept.name + "과 "
+ myDept.section + "입니다.";
</script>
</body>
</html>코드 설명
Department 함수는 생성자 함수로, this 키워드를 사용해 각 객체마다 고유한 id, name, section 속성을 설정합니다. new 키워드로 이 함수를 호출하면 새로운 객체가 생성되며, 이 객체는 Department.prototype을 프로토타입으로 갖게 됩니다.
따라서 나중에 Department.prototype에 새로운 메서드를 추가하면, 이미 생성된 myDept 객체를 포함한 모든 Department 인스턴스에서 해당 메서드를 즉시 사용할 수 있습니다. 이것이 바로 프로토타입 상속의 강력한 장점입니다.