[D+44] javaScript Class

 

국비지원 D+44

- javaScript Class -

 

---

 

javaScript Class

• 클래스의 개념

- ES5에서는 클래스가 없었으며 객체형, 클로저, 생성자, 프로토타입등을 이용해 클래스와 유사한 구조를 만들어 사용했었다.
- ES5와 다르게 ES6에서는 완벽한 객체지향의 기능을 제공하는 것은 아니지만 클래스 문법을 직접적으로 지원한다.
- object 데이터 타입으로 내부적으로 class는 결국 object 형과 같다.

• 클래스 선언

class Student {
	constructor(name, number, score) {
		this.name = name;
		this.number = number;
		this.score = score;
	}

	getTotal() {
		return this.score.kor + this.score.eng + this.score.math;
	}

	getAvg() {
		return (this.getTotal() / 3).toFixed(2);
	}
}

const s1 = new Student("홍길동", 1, { kor: 80, eng: 50, math: 78 });

console.log(s1.getTotal());
console.log(s1.getAvg());

 

- 클래스는 별도의 생성자(constructor)를 제공하며 클래스의 변수를 추가 및 초기화 할 수 있다.
- 생성자에서 값을 추가 하거나 초기화를 하고 싶을 때, this를 통해 변수를 등록할 수 있다.
- 생성자에 객체를 추가할 경우 얕은 복사에 주의하도록 한다. (참조값만 복사)
- 인스턴스를 생성하고 싶을때 new를 사용해 여러 개의 인스턴스를 생성할 수도 있다.

• 클래스 상속

class Rectangle {
	constructor(_width, _height) {
		this.width = _width;
		this.heigth = _height;
	}
}

class Square extends Rectangle {
	constructor(length) {
		super(length, length);
	}
}

- JS에서도 상속 구현이 가능한데 이때 기존에 자바에서는 재활용과 공통된 규약을 지키기 위한 목적으로 상속을 사용해 왔다면 JS에서의 상속은 재활용측면에 포커스를 뒀다.
- 자바에서의 개념과 비슷한데 extends를 통해 상속을 구현할 수 있으며, 상속받은 부모객체에 값을 넘겨줄때 super()를 사용해 값을 넘겨주는 방식까지 일치한다.
- super를 사용할 때에는 부모객체가 먼저 초기화가 되어야하기 때문에 항상 자식 클래스 생성자에서 가장 앞에 코딩되어야 한다.

• 접근제어

class Rectangle {
	constructor(_width, _height) {
		this.width = _width;
		this.heigth = _height;
	}
}

const r1 = new Rectangle(5, 4);
r1.width = 4;		// 잘못된 접근을 막아야 한다

현재까지 배운 클래스는 한가지 문제점이 있는데 내가 잘못된 경로로 값을 변경하였을때 값이 변경된다는 것이다.
그렇기 때문에 잘못된 경로로 접근해 값에 대한 정보를 함부러 변경되지 않도록 접근제어자를 사용할 수 있다.

class Rectangle {
	// private 전방선언
	#width;
	#height;

	constructor(_width, _height) {
		// 모든 속성에 #을 붙여서 사용해 준다
		this.#width = _width;
		this.#heigth = _height;
	}
}

const r1 = new Rectangle(5, 4);
r1.width = 4; // 접근 불가

클래스의 속성이나 메소드를 외부에서 접근 할 수 없도록 하는 private를 사용하는 것으로 #을 붙여서 전방선언을 한 뒤에 모든 속성에 #을 붙여주면 된다.
이때 주의해야할 점은 #을 붙여서 변수가 private가 되었다고 생각하는 것이 아니라 변수명 그 자체로 생각해주어야 한다.

• get, set

class Rectangle {
	constructor(_width, _height) {
		this.width = _width;
		this.heigth = _height;
	}
}

const r1 = new Rectangle(5, 4);
r1.width = 4;		// 잘못된 접근을 막아야 한다

 

접근제한자를 사용해 주었다면 우리는 변수의 값을 받고 변경할 수 있는 메소드를 만들어주어야 한다.
getter,setter를 사용해 주어도 되지만 ES6 방식으로 값을 get하고 set할 수 있는 방법도 있다.

// 사용방법 - get과 set을 띄어쓰는 것 말고 작성하는 방식은 일치한다.
get width() { return this.#width; }
set width(_width) { this.#width = _width; }

// 주의사항
get width() { ... }	// o
get blahblah() { ... }	// x

이방법은 쓰는 입장에서 함수가 아닌 마치 변수값을 바로 바꿔주는 느낌이라 편히라지만 get,set을 만들어 줄때 이름을 일관성없이 하면 괴랄함이 발생될 수 있기 때문에 꼭 속성의 이름으로 설정해주는 것이 관례이다.

• static

- 전역화 지역변수 또는 전역화 지역 메소드를 만들기 위한 키워드
- static은 전역영역에 존재하기 때문에 static입장에서 class는 소속일뿐 그 외에는 의미가 없다.
- static 변수, static 메소드는 클래스가 인스턴스화 되는지 여부와 상관없이 전역영역에 하나 존재하는 것이다.
- this는 의미가 없다.
- 접근 제어가 가능하다.

 

class Persion
{
    static #count = 0;

    constructor()
    {
    }

    static getCount()
    {
        return Persion.#count;
    }

    static setCount(_count)
    {
        Persion.#count = _count;
    }
}

만약 인스턴스를 만들때마다 개수를 올리는 count를 class에 넣어준다고하면 count변수앞에 static을 붙여서 사용해주면 된다.
이때 count는 class Persion의 소속이지 Persion의 것이 아니기 때문에 this를 사용해 줄수 없다.
그래서 count를 사용해줄 때 Persion.count로 불러올 수 있다.
이때 count와 관련된 메소드를 만들어줄 경우 마찬가지로 메소드 앞에 static을 붙여주어야 한다.