250x250
Notice
Recent Posts
Recent Comments
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags
more
Archives
Today
Total
관리 메뉴

진스

Class 본문

JavaScript

Class

입방정 2022. 5. 19. 19:30
728x90

객체 생성방법중 하나로 es6때 추가

생성자 함수 이용

// 기존 생성자함수 이용
const User = function (name, age) {
    this.name = name;
    this.age = age;
    this.showName = function(){     //객체안에 메소드가 있음
        console.log(this.name);
    }
}

const mike = new User("Mike", 27)   //생성자 함수명은 첫글자 대문자

Class 이용

//  Class 이용
class User2 {
    constructor(name, age){  //객체를 만들어 주는 생성자 메소드
        this.name = name    //객체 초기화 값들
        this.age= age
    }
    showName(){  //class 메소드는 프로토타입에 저장됨
        console.log(this.name);
        }
    }

const Jane= new User2('Jane',29)

상속

// 생성자 함수는 prototype을 이용
// class 는 extends 이용
class Farm {
    constructor(kind,ea){  // {} 빈객체 만듬
        this.kind = kind  // this로  위 {}를 가리킴
        this.ea = ea
    }
    work() {
        console.log(`${this.kind} ${this.ea}개 심었어요.`);
    }
}

class Who extends Farm {
    constructor(kind,ea) { //들어온 인수를 야래 super 를 통해 부모로 전달
        super(kind,ea) // 항상 부모 class의 constructor를 실행해야함 빈객체만들고 하는 과정 생략되므로
        this.day ="낮에"
    }
    where() {
        console.log(`밭에`);
    }
    work() {
        super.work() //overriding 부모의 메소드 가져옴
        console.log(`안심었어요.`); 
    }
}

const farmer = new Who('당근', 6)
console.log(farmer);
728x90
Comments