JavaScript에서 파생 속성이란?
JavaScript에서 파생 속성(derived properties)은 객체 자신에게 직접 정의된 것이 아니라, 프로토타입 체인을 통해 부모 객체로부터 상속받은 속성을 의미합니다. 대표적인 방법은 Object.create() 메서드를 사용하여 특정 객체를 프로토타입으로 지정하는 것입니다.
상속받은 속성을 재정의(override)하려면 해당 객체에 같은 이름의 속성을 직접 할당하면 됩니다. 이렇게 하면 원본 프로토타입 객체는 그대로 유지되면서, 해당 인스턴스에만 새로운 값이 저장됩니다.
예제 코드
다음 예제는 Object.create()로 생성한 객체의 상속 속성을 버튼 클릭 시 재정의하는 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>파생 속성 재정의</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>파생 속성 재정의하기</h1>
<div class="sample">재정의 전 <br /></div>
<br />
<div class="result">재정의 후 <br /></div>
<br />
<button class="Btn">여기를 클릭하세요</button>
<h3>위 버튼을 클릭하면 속성이 재정의됩니다</h3>
<script>
let sampleEle = document.querySelector(".sample");
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let objPerson = {name: "Rahul", age: 12, class: 7};
let Person1 = Object.create(objPerson);
sampleEle.innerHTML += "Person1.name = " + Person1.name + "<br>";
sampleEle.innerHTML += "Person1.age = " + Person1.age + "<br>";
sampleEle.innerHTML += "Person1.class = " + Person1.class + "<br>";
BtnEle.addEventListener("click", () => {
Person1.name = "Shawn";
Person1.age = 18;
Person1.class = 12;
resEle.innerHTML += "Person1.name = " + Person1.name + "<br>";
resEle.innerHTML += "Person1.age = " + Person1.age + "<br>";
resEle.innerHTML += "Person1.class = " + Person1.class + "<br>";
});
</script>
</body>
</html>코드 설명
위 코드의 핵심 동작 흐름은 다음과 같습니다.
objPerson객체에는name,age,class세 가지 속성이 정의되어 있습니다.Object.create(objPerson)를 호출하면objPerson을 프로토타입으로 갖는 새로운 객체Person1이 생성됩니다. 이 시점에서Person1자신은 어떤 속성도 직접 가지고 있지 않습니다.- 처음 화면에는 프로토타입에서 상속받은 값(Rahul, 12, 7)이 표시됩니다.
- 버튼을 클릭하면
Person1.name = "Shawn"처럼 값을 할당하는데, 이때 JavaScript는Person1객체 자체에 새로운 속성을 생성하고 프로토타입의 값을 가리는(shadowing) 효과를 냅니다.
실행 결과
페이지를 처음 열면 다음과 같이 상속받은 기본 값이 출력됩니다.
재정의 전 Person1.name = Rahul Person1.age = 12 Person1.class = 7
'여기를 클릭하세요' 버튼을 누르면 속성이 재정의되어 아래와 같이 변경된 값이 표시됩니다.
재정의 후 Person1.name = Shawn Person1.age = 18 Person1.class = 12
핵심 포인트 정리
- 읽기: 객체에 없는 속성에 접근하면 프로토타입 체인을 따라 올라가며 검색합니다.
- 쓰기: 속성에 값을 할당하면 항상 해당 객체 자신에 새 속성이 생성되며, 프로토타입의 속성은 수정되지 않습니다.
- 따라서
objPerson의 원본 값은 그대로 유지되며, 오직Person1인스턴스에서만 재정의된 값이 사용됩니다.