객체 생성자(object constructor)에 속성(property)을 추가하는 방식은 일반 객체에 속성을 추가하는 것과 다릅니다. 일반 객체는 코드 어디에서든 자유롭게 속성을 추가할 수 있지만, 객체 생성자의 경우 반드시 생성자 함수 내부에 속성을 정의해야 합니다.
예제 1: 생성자 외부에 속성 추가 시 발생하는 문제
다음 예제는 일반 객체처럼 생성자 외부에 속성을 추가한 경우입니다. 여기서는 객체 생성자를 사용했기 때문에, 속성이 생성자 내부에 정의되지 않으면 아래 출력 결과와 같이 undefined가 반환됩니다.
<html>
<body>
<p id = "prop"></p>
<script>
function Business(name, property, age, designation) {
this.Name = name;
this.prop = property;
this.age = age;
this.designation = designation;
}
Business.language = "chinese";
var person1 = new Business("Trump", "$28.05billion", "73", "President");
var person2 = new Business("Jackma", "$35.6 billion", "54", "entrepeneur");
document.write(person2.language);
</script>
</body>
</html>출력 결과
undefined
위 코드에서 Business.language = "chinese"; 구문은 생성자 함수 자체에 정적(static) 속성으로 추가된 것이므로, new 키워드로 생성된 인스턴스인 person2에는 해당 속성이 존재하지 않습니다. 그 결과 person2.language를 참조하면 undefined가 출력됩니다.
예제 2: 생성자 내부에 속성 추가하기
다음 예제에서는 "language" 속성을 생성자 내부에 선언했습니다. 이렇게 하면 잘못된 값이나 undefined 대신 정상적인 결과를 얻을 수 있습니다.
<html>
<body>
<p id = "prop"></p>
<script>
function Business(name, property, age, designation) {
this.Name = name;
this.prop = property;
this.age = age;
this.designation = designation;
this.language = "chinese";
}
var person1 = new Business("Trump", "$28.05billion", "73", "President");
var person2 = new Business("Jackma", "$35.6 billion", "54", "entrepeneur");
document.write(person2.language);
</script>
</body>
</html>출력 결과
chinese
속성이 생성자 내부에서 this 키워드와 함께 정의되었기 때문에, 생성자로 만들어진 모든 인스턴스는 해당 속성을 정상적으로 가지게 됩니다. 따라서 person2.language는 예상대로 "chinese"를 출력합니다.
정리
- 일반 객체: 어디에서든 속성을 자유롭게 추가할 수 있습니다.
- 객체 생성자: 속성은 반드시 생성자 함수 내부에서
this를 사용해 정의해야 합니다. - 생성자 외부에 추가한 속성은 인스턴스에서 접근할 수 없어 undefined가 반환됩니다.