객체(Object)
하나의 주제를 가지고 관련있는 프로퍼티(Property)를 가지고 있는 집합
프로퍼티(Property)
- 이름과 값으로 구성된 정렬되지 않은 집합
- 프로퍼티는 함수도 저장할 수 있음 -> 프로퍼티 메서드객체를 생성하는 방법
1. 리터럴 표기법
const 변수명 = {
프로퍼티명1:값1,
프로퍼티명2:값2,
...
프로퍼티명n:function(){
...
}
}2. 생성자를 이용
- 객체를 만드는 함수
- new 연산자를 사용하여 객체를 생성하고 초기화할 수 있음
- 같은 형태의 객체를 여러개 생성할 때 유리 function 함수명(매개변수1, 매개변수2 ..){
this.프로퍼티1 = 값1;
this.프로퍼티2 = 값2;
...
this.프로퍼티n = function(){
...
}
}
const 변수1 = new 함수명(값1, 값2, ..);
const 변수2 = new 함수명(값1, 값2, ..);3. 클래스를 이용
- ECMA Script6에 추가된 객체 생성 방법
- 내부적으로 생성자를 이용한 객체 생성 방법과 동일하게 작동 const 클래스명 = class {
constructor(매개변수1, 매개변수2, ...){
this.프로퍼티1 = 값1;
this.프로퍼티2 = 값2;
...
}
메소드명(매개변수1, 매개변수2, ..){
...
}
}
const 변수명1 = new 클래스명(값1, 값2, ...);
const 변수명2 = new 클래스명(값1, 값2, ...);# 객체만들기 예제
<body>
<h2>객체 만들기</h2>
<script>
// 리터럴 표기법
const Rucy = {
name: '루시',
age: 14,
color: 'white',
birthday: '20091210',
getbirthday: function(){
return this.birthday;
}
}
console.log(Rucy.name);
console.log(Rucy.age);
console.log(Rucy.color);
console.log(Rucy.birthday);
console.log(Rucy.getbirthday);
console.log(Rucy.getbirthday());
console.log('----------------')
for(let i in Rucy){
console.log(`i:${i}, Rucy[${i}]: ${Rucy[i]}`);
}
console.log('----------------')
// 생성자를 이용한 객체
function Dog(name, color){
this.name = name;
this.color = color;
this.eat = function(){
return `${this.name} 사료를 먹습니다`;
}
}
const PPomi = new Dog('뽀미', '흰색');
console.log(PPomi.name);
console.log(PPomi.color);
console.log(PPomi.eat);
console.log(PPomi.eat());
console.log('----------------')
// 클래스를 이용한 객체 생성
const Student = class {
constructor(name, hp, age){
this.name = name;
this.hp = hp;
this.age = age;
}
getName(){
return `이름은 ${this.name} 입니다`;
}
}
const apple = new Student('김사과', '010-1111-1111', 20);
console.log(apple.name);
console.log(apple.hp);
console.log(apple.age);
console.log(apple.getName);
console.log(apple.getName());
</script>
</body>
프로토타입(Prototype)
- 모든 객체는 프로토타입이라는 객체를 가지고 있음
- 모든 객체는 프로토타입으로부터 프로퍼티와 프로퍼티 메서드를 상속받음
- 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 함
const dog = new Dog(); // Dog.prototype, object.prototype# 프로토타입 예제
<body>
<h2>프로토타입</h2>
<script>
function Dog(color, name, age){
this.color = color;
this.name = name;
this.age = age;
}
const Rucy = new Dog('흰색', '루시', 14);
console.log(Rucy);
console.log(`이름: ${Rucy.name}`);
console.log(`색상: ${Rucy.color}`);
console.log(`나이: ${Rucy.age}`);
Rucy.family = '포메라니안';
Rucy.getFamily = function(){
return this.family;
}
console.log(`종: ${Rucy.family}`)
console.log(`getfamily: ${Rucy.getFamily()}`)
const PPomi = new Dog('흰색', '뽀미', 6)
console.log(`이름: ${PPomi.name}`);
console.log(`색상: ${PPomi.color}`);
console.log(`나이: ${PPomi.age}`);
console.log(`종: ${PPomi.family}`);
// console.log(`getFamily: ${PPomi.getFamily()}`);
Dog.prototype.owner = '김사과';
Dog.prototype.run = function(){
return this.name + '달립니다!';
}
console.log(`Rucy 소유자: ${Rucy.owner}`)
console.log(`PPomi 소유자: ${PPomi.owner}`)
console.log(`Rucy run(): ${Rucy.run()}`)
console.log(`PPomi run(): ${PPomi.run()}`)
</script>
</body>
상속
- 클래스 기반의 객체지향 언어와 다름
- 자바스크립트는 프로토타입 기반의 객체지향언어'Web' 카테고리의 다른 글
| [ JS ] 객체의 종류 (0) | 2024.04.18 |
|---|---|
| [ JS ] Math (0) | 2024.04.18 |
| [ JS ] 사용자 정의 함수 ( Function ) (0) | 2024.04.18 |
| [ JS ] 배열 반복문 (0) | 2024.04.18 |
| [ JS ] 배열 자료구조 Array (0) | 2024.04.16 |