Javascript - 클래스 for ES6

클래스 for ES 6

 

class 정의

 

class 키워드

• 객체의 원형을 정의하는 키워드

• ES6(ES2015)에서 추가
  class 클래스명 { }

생성자

• constructor() 함수로 정의
  • this 객체가 새로 생성됨
  • 매개변수 지정 가능

class 클래스명 {
    constructor([매개변수]) {
        // this.를 이용하여 객체의 프로퍼티 정의
    }
}

 

student.js

// student

class Student {
    constructor(name) {  // 생성자를 constructor() 함수로 정의
        this.name = name;
    }
}

var s1 = new Student("홍길동");
console.log(s1.name);

홍길동

---

 

프로토타입 메서드

• class 블럭안에 정의되는 함수

• function 키워드 없이 정의

class 클래스명 {
    constructor([매개변수]) {
        // this.를 이용하여 객체의 프로퍼티 정의
    }

    함수명([매개변수]) {     // 프로토타입 메서드
    }
}

자동으로 프로토타입 메서드가 된다.

 

student.js

//student2

class Student {
    constructor(name, age) {  // 생성자를 constructor() 함수로 정의
        this.name = name;
        this.age = age;
    }

    printProfile(){  // 자동으로 프로토타입 메서드로 넘어간다. (function X!!!)
        console.log(`이름 : ${this.name}, 나이 : ${this.age}`);
    }
}

var s1 = new Student("홍길동", 20);
s1.printProfile();

console.log("printProfile" in s1.__proto__)
console.log("printProfile" in Student.prototype)
// 둘다 prototype이 있다.

이름 : 홍길동, 나이 : 20

true

true

---

Getter/Setter 메서드

• get, set 키워드로 설정

class 클래스명 {
    constructor([매개변수]) {
        // this.를 이용하여 객체의 프로퍼티 정의
    }

    함수명([매개변수]) {    // 프로토타입 메서드
    }

    get 프로퍼티명() {
    }
    set 프로퍼티명(매개변수) {
    }
}

 

//get,set

class Student {
    constructor(name, age) {
        this._name = name;
        this.age = age;
    }
    printProfile() {
        console.log(`이름 : ${this.name}, 나이 : ${this.age}`)
    }
    get name() {
        return this._name;
    }
    set name(name) {
        this._name = name;
    }
}

// 실제론 ._name이지만 사용할때는 필드 변수처럼 .name을 이용한다.

var s1 = new Student("홍길동", 20);

console.log(s1.name);
s1.name = '고길동'
console.log(s1.name);
console.log(s1);

홍길동

고길동

Student { _name: '고길동', age: 20 }

---

 

정적 메서드

• static 키워드로 메서드 정의

• 자체 인스턴스 (this) 없이 구현

  인스턴스와 무관한 메서드

class 클래스명 {
    :

    static 메서드명(매개변수) {
    }
}

상속

extends 키워드와 super 키워드 도입

기능 확장의 개념

class 자식클래스 extends 부모클래스 {
    constructor([매개변수]) {
        super([매개변수]); // 부모의 생성자 호출, 이 후에 this 생성
    }
}

• 부모의 생성자는 반드시 호출

Inherit.js

//inherit

class Parent {
    constructor(name) {
        this.name = name;
    }

    print() {
        console.log("이름 : " + this.name);
    }
}


class Child extends Parent {
    constructor(name, age) {
        super(name);  // 오버라이드 시킨것
        this.age = age;
    }

    print() {
        super.print();  // 형식이 Python과 다르다.
        console.log("나이 : " + this.age);
    }

    static sayHello() {
        console.log('Hello~');
    }
}


class GrandChild extends Child {
    constructor(name, age, address) {
        super(name, age);
        this.address = address;
    }
    print() {
        super.print();
        console.log("주소 : " + this.address);
    }
}

var person = new GrandChild("홍길동", 20, "서울");
person.print();
GrandChild.sayHello();  // static 메서드 (인스턴스와 관계없다.)

/*

*/

// 

이름 : 홍길동
나이 : 20
주소 : 서울
Hello~

---

 

구조를 보기 위해서는 크롬 > F12 > Console 명령창을 이용해서 펼쳐보자.