-
2023 - 05 - 30 클래스 Class 설계도Today I Learned/TIL 05 2023. 6. 2. 11:18
클래스 class = 설계도
constructor는 class의 생성자 함수.
인스턴스 instance = 객체. 설계도를 따라 만들어짐.
class ~ { instance } 형식.
class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(this.name + "님 안녕하세요"); console.log(this.name + "의 나이는" + this.age + "이에요.") } } const person1 = new Person("홍길동", "30살"); const person2 = new Person("홍길순", "25살"); person1.sayHello(); person2.sayHello(); 백틱을 이용한 방법. class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`${this.name}님 안녕하세요`); console.log(`${this.name}의 나이는 `${this.age}이에요.`); } } const person1 = new Person("홍길동", "30살"); // person 1, 2는 인스턴스 const person2 = new Person("홍길순", "25살"); person1.sayHello(); person2.sayHello();
설계도 class에서 person 이라는 객체를 생성하고, 그 person에는 constructor라는 생성자가 들어감.
(constructor는 class내부의 생성자, name과 age를 인자로 받아 this.name과 this.age 속성을 초기화함)
그다음 가장 아래 person1, person2이라는 인스턴스(변수)에다가 new 라는 연산자를 만듦
(완전 새로운 객체다 라고 선언하는것) new person이라는 객체를 만듦.
홍길동과 30살은 new person이라는 객체가 생성될 떄 디폴트(기본 매개변수)로 받는 값.class에서 person이라는 객체가 생성될때 이 매개변수를 사용함.
sayHello라는 매서드는 person이라는 class에 종속이 된 상태,person이라는 class로 만든 변수들은 전부 sayHello라는 매서드를 사용할수 있다. (내장함수같은 개념)
또다른 예제.
class Car { constructor(modelName, modelYear, type, price) { this.modelName = modelName; this.modelYear = modelYear; this.type = type; this.price = price; } makeNoise(){ console.log ("모델명 :" + this.modelName) console.log (this.modelYear + "년도에 생산되었습니다.") console.log ("타입 :" + this.type) console.log ("가격 :" + this.price + "만원") } } const Car1 = new Car("Sorento", "2023", "Electronic", 5000); const Car2 = new Car("Grandeur", "2020", "gasolin", 8000); const Car3 = new Car("Benz", "2021", "diesel", 9000); Car1.makeNoise(); Car2.makeNoise(); Car3.makeNoise();
'Today I Learned > TIL 05' 카테고리의 다른 글
2023 - 06 - 02 트랜잭션 (트랜젝션) ACID 특성과 Isolation Level (0) 2023.06.02 2023 - 05 - 31 클래스 Getters & Setters (0) 2023.06.02 2023 - 05 - 29 DOM (Document Object Modeling) (0) 2023.06.02 2023 - 05- 28 콜백함수 제너레이터& async wait (0) 2023.06.01 2023 - 05 - 27 콜백함수 ; promise, 리팩토링 (0) 2023.06.01