#15 클래스(class)

클래스 문법

// 클래스
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();

 

 

참고문서 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-ES6-Class-%EB%AC%B8%EB%B2%95-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC