Web Devlopment/JavaScript
#15 클래스(class)
키모형
2025. 3. 19. 22:38
반응형
클래스 문법
// 클래스
class Person {
// 이전에서 사용하던 생성자 함수는 클래스 안에
// `constructor`라는 이름으로 정의합니다.
constructor({name, age}) { //생성자
this.name = name;
this.age = age;
}
// 객체에서 메소드를 정의할 때 사용하던 문법을 그대로 사용하면,
// 메소드가 자동으로 `Person.prototype`에 저장됩니다.
introduce() {
return `안녕하세요, 제 이름은 ${this.name} 입니다.`;
}
}
const person = new Person({name: 'Kimo', age: 33});
console.log(person.introduce()); // 안녕하세요, 제 이름은 Kimo 입니다.
// prototype 이용 방식
const User = function (name, age) {
this.name=name;
this.age=age;
};
User.prototype.showName = function() {
console.log(this.name);
}
const kimo = new User('Kimo', 30);
console.log(kimo);
// User { name: 'Kimo', age: 30 }
// class 이용방식
class User2 {
constructor(name, age){
this.name=name;
this.age=age;
}
showName(){
console.log(this.name);
}
}
const tom = new User2('Tom', 22);
console.log(tom);
// User2 { name: 'Tom', age: 22 }
kimo.showName();
tom.showName();
// Kimo
// Tom
for(const p in kimo){
console.log(p);
}
for(const p in tom){
console.log(p);
}
// 클래스 상속
class Car {
constructor(color){
this.color=color;
this.wheels=4;
}
drive() {
console.log("drive...");
}
stop() {
console.log("Stop!!");
}
}
class Bmw extends Car {
constructor(color){
super(color);
this.navigation=1;
}
park() {
console.log("PARK");
}
stop(){
super.stop();
console.log("OFF");
}
}
const z4 = new Bmw('red');
// console.log(z4.color);
// z4.drive();
// z4.stop();
// z4.park();
반응형