사용자 정의 객체
객체 리터럴 object literal 과 객체 생성자 함수 object constructor function으로 만들 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let tv = new Object(); // 클래스 문법
tv.color = "white";
tv.price = 300000;
tv.info = function() {
document.write("tv 색상 : " + this.color, "<br>");
document.write("tv 가격 : " + this.price, "<br>");
}
let car = { // 객체 리터널 문법 사용
color: "black",
price: 5000000,
info: function() {
document.write("car 색상 : " + this.color, "<br>");
document.write("car 가격 : " + this.price, "<br>");
}
};
document.write("<h1>tv 객체 메서드 호출</h1>");
tv.info();
document.write("<h1>car 객체 메서드 호출</h1>");
car.info();
</script>객체 리터럴 object literal -> 동일한 객체 생성시 코드가 길어짐
객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다.
따라서 동일한 프로퍼티를 갖는 객체를 여러개 생성해야 하는 경우
매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적이다.
2) 객체 생성자 함수 object constructor function
생성자 함수를 이용하면 마치 인스턴스를 생성하기 위한 템플릿처럼 프로퍼티 구조가 동일한 객체 여러개를 간편하게 생성할 수 있다.
생성자 함수는 일반 함수와 차이를 두기 위해 함수면의 첫 문자를 대문자로 표현한다.
Info 함수 안에 this는 함수를 통해 생성되는 객체를 의미한다.
<script>
const Info = function (object, price) {
this.object = object;
this.price = price;
this.printOut = function () {
return `${this.object}, ${this.price}원`;
}
}
let obj1 = new Info('car', 5000000); // Info 함수 안에 this는 obj1 객체를 의미함.
console.log(obj1.object);
console.log(obj1.price);
console.log(obj1.printOut());
let obj2 = new Info('tv', 100000);
console.log(obj2.object);
console.log(obj2.price);
console.log(obj2.printOut());
/* 생성자 함수로 생성된 객체속성 변경, 추가, 삭제*/
let obj3 = new Info ('phone', 50000);
obj3.color = "white";
console.log(obj3.color);
delete obj3.price;
console.log(obj3.price); // undefined
</script>obj3 에서 추가, 제거, 변경 된 속성은 obj3 에서만 적용
obj4 등 다른 객체의 속성에는 영향이 없다.
모든 객체에서 추가, 제거, 변경하려면 Info 함수 안에서 수정해야함
다 다른 속성이면 Info 함수에서 매개변수를 하나 더 추가하고 같은 속성이면 Info 함수 안에서 속성만 추가하면, 객체에서 같은 값으로 출력 됨.
<script>
let obj4 = new Info ('pen', 3000);
console.log(obj4.color);
console.log(obj4.price);
</script>
</head>
<body>
</body>
</html>
