반응형
01 클래스, 인스턴스 개념
1) 클래스(class)
: 객체를 만들기 위한 설계도 (ex. 자동차 설계도)
2) 인스턴스(instance)
: 이 설계도를 바탕으로 만들어진 실체 객체들 (ex. 여러 자동차들)
02 생성자 Constructor
class의 생성자 함수로 객체를 생성할 때 호출되며, 객체를 초기화하는 역할을 한다.
class Person {
constructor(name, age) { // 생성자 함수
this.name = name; // 외부로부터 받아온
this.age = age;
}
sayHello() {
console.log(`안녕하세요, 저는 ${this.name}입니다. 제 나이는 ${this.age}입니다.`);
}
}
const person1 = new Person("홍길동", 20);
const person2 = new Person("홍길순", 25);
person1.sayHello();
person2.sayHello();
>> 안녕하세요, 저는 홍길동입니다. 제 나이는 20입니다.
>> 안녕하세요, 저는 홍길순입니다. 제 나이는 25입니다.
클래스 연습해보기
문제 ) Car라는 새로운 클래스를 만들되, 처음 객체를 만들때는 다음 네개 값이 필수로 입력되어야 한다 (modelName, modelYear, type, price) makeNoise() 메소드를 만들어 클락션을 출력해라.
class Car {
constructor(modelName, modelYear, type, price) {
this.modelName = modelName;
this.modelYear = modelYear;
this.type = type;
this.price = price;
}
makeNoise() {
console.log(`${this.modelName} : 빵`);
}
}
const car1 = new Car("BMW", "2023", "e", 6000);
const car2 = new Car("SM5", "1999", "g", 3000);
const car3 = new Car("QM6", "2010", "g", 4500);
car1.makeNoise();
car2.makeNoise();
car3.makeNoise();
>> BMW : 빵
>> SM5 : 빵
>> QM6 : 빵
반응형
'Programming Language > HTML\CSS\JavaScript' 카테고리의 다른 글
| [CSS] 글자 굵기 지정 : font-weight (0) | 2024.01.08 |
|---|---|
| [Javascript] Getter와 Setter (1) | 2024.01.05 |
| [Javascript] DOM 접근 및 제어 (0) | 2024.01.05 |
| [Javascript] API (0) | 2024.01.05 |
| [Javascript] DOM의 기본 개념 (1) | 2024.01.03 |