자바스크립트 class

• ES6부터 자바스크립트에서도 class 문법이 지원된다.
• 클래스는 객체를 생성하는 탬플릿으로 재사용할 수 있고, 내부의 변수와 메서드를 추상화할 수 있다.

class 사용하기

// class 표현식
const Data = class {
	constructor(name) {
    	this.name = name;
    }
    get name() {
    	return "이름은 " + this._name + "입니다.";
    }
    set name(name) {
    	if (name.length <= 3) {
        	alert("Too Short");
        } else { 	       	
	    	this._name = name;
        }
    }
}

// class 선언식
class Data {
	constructor(name) {
    	this.name = name;
    }
    get name() {
    	return "이름은 " + this._name + "입니다.";
    }
    set name(name) {
    	if (name.length <= 3) {
        	alert("Too Short");
        } else { 	       	
	    	this._name = name;
        }
    }
}

// 출력되는 값은 같다.
const data = new Data("HI"); // alert("Too Short") 출력
console.log(data.name); // 이름은 undefined입니다.

data.name = "HIHIHI"; 
console.log(data.name); // 이름은 HIHIHI입니다.

• 위와 같은 방법들로 클래스를 사용할 수 있다.

const Data3 = class Person {
	  constructor(nickName) {
    	Person.nickName = nickName;
    }
    get name() {
    	return "이름은 " + this._name + "입니다.";
    }
    set name(name) {
    	if (name.length <= 3) {
        	alert("Too Short");
        } else { 	       	
	    	this._name = name;
        }
    }
}

const data = new Data3("kim");
console.log(data.name); // 이름은 undefined입니다.

data.name = "1245673";
console.log(data.name); // 이름은 1245673입니다.

console.log(data3.name); // Person

• named class에서 name은 이 클래스의 이름이다.

extends 상속

• 클래스는 다른 클래스를 상속받아 사용할 수 있다.

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

class Detail extends Person {
	constructor (name, age) {
    	super(name);
        this.age = age;
    }
}

const data = new Detail("park", 15);

console.log(data.name); // park
console.log(data.age); // 15

• super를 통해서 상속받은 부모 클래스의 생성자 함수를 호출할 수 있다.

• super.메서드 로 생성자뿐만 아니라 부모 클래스의 다른 메서드도 접근할 수 있다.

• 자바스크립트의 클래스는 다중 상속이 불가능하다.

• 다중 상속을 구현하고자 한다면, 믹스인 기능을 사용할 수 있다.

참고 자료 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes, https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/class