[Javascript] 클래스(class)

반응형

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