[JavaScript] Class / get, set, 상속

class

es6에서 도입됨. 클래스는 생성자를 가지고 있고 상속 기능을 가지고 있다.

 

class 생성

class Person {
	constructor() { // 생성자
		console.log("생성");
	}
}
var myClass = new Person();

생성자안에 매개변수를 넣어서 클래스 생성하기

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

	info() {
		console.log(`이름 : ${this.name} 나이 ${this.age}`);
	}

}
var myClass = new Person("이름",10);
myClass.info();

생성자에 필요한 매개변수를 넣지 않으면 undfined가 할당된다.

var myClass = new Person(/*"이름",10*/);
myClass.info();

위 예제에 this는 클래스 자신를 의미하고 name과 age는 클래스 안에 선언된 변수이다.

도중에 사용되어도 호이스팅에 의해서 스코프의 상단에 선언된 것으로 인식된다.

호이스팅 : 변수가 도중에 선언이되어도 구간(스코프)의 가장 윗단에 선언된 것으로 인식

스코프 : 선언된 변수가 유효한 범위 구간

class Person {
	name = "초기화이름";
	age = 0;
	constructor(name,age) {
		console.log(`이름 : ${this.name}, 나이 : ${this.age}`);
		this.name = name;
		this.age = age;
		console.log(`이름 : ${this.name}, 나이 : ${this.age}`);
	}
}
var myClass = new Person("이름",10);

위와 같이 클래스안 윗단에 변수가 선언되었고 사용 시 클래스안의 변수라는 의미로 this.변수로 사용 한다.

 

class 사용 예

class를 사용하는 이유 중 하나로는 같은 형식의 obect를 생성하기 편함도 있을 것이다.

class Car {
	constructor(modelName,modelYear) {
		this.modelName = modelName;
		this.modelYear = modelYear;
	}

	Klaxon() {
		console.log(`${this.modelName} : Bang`);
	}
}
var xm3 = new Car("XM3",2023);
var qm6 = new Car("QM6",2023);
xm3.Klaxon();
qm6.Klaxon();

객체안에 속성(프로퍼티)는 같지만 값은 다르게 생성하여 사용 할 수 있다.

 

class를 사용 할때 생성자에 직접 값을 넣어 생성하는 것보다 값을 변경할수 있는 기능을 넣는 것이 좋은 경우도 있다.

class Rectangle {
	height = 0;
	width = 0;

	constructor() {
	}

	changeHeight(height) {
		this.height = height;
	}
	
	changeWidth(width) {
		this.width = width;
	}

	info() {
		console.log(`info : ${this.height} ${this.width}`);
	}
}
var rect1 = new Rectangle();
rect1.info();
rect1.changeHeight(10);
rect1.info();
rect1.changeWidth(20);
rect1.info();

get set

위의 내용을 일반적으로  getter와 setter를 이용하여 작성해 보자.

class Rectangle {
	_height = 0;
	_width = 0;

	constructor(height,width) {
		this._height = heghit;
		this._width = width;
    }

	get height() {
		return this._height;
	}

	set height(value) {
		this._height = value;
	}

	get width() {
		return this._width;
	}

	set width(value) {
		this._width = value;
	}
}
var rect1 = new Rectangle();
rect1.height = 11; // set 값을 넣어주는 부분
console.log(rect1.height); // get 값을 받아오는 부분
rect1.width = 22; // set 값을 넣어주는 부분
console.log(rect1.width); // get 값을 받아오는 부분

get,  set 의 이름과 변수의 이름이 같아서 변수명앞에 _를 붙여 수정하였다.

 

class 상속 Inheritance

형질을 물려준다. 상속하는 class를 부모class라고 하고 상속받은 class를 자식class라고 한다.

extends

class Animal{
	// 생성자
	constructor(name){
		this.name = name;
	}
	// 메서드
	speak() {
		console.log(`${this.name} : says!`);
	}
}

class Dog extends Animal{ // Dog클래스가 Animal클래스를 상속받음
	// 부모에게 내려받은 메서드를 재정의 할 수 있다.
	speak() {
		console.log(`${this.name} : barks!`);
	}
}

var animal = new Animal("동물");
animal.speak();
var dog = new Dog("개");
dog.speak();

생성자에 이름을 넣어야 해서 dog클래스도 생성할 때 이름을 넣어주었다.

생성자도 재 정의가 가능하다.

class Dog extends Animal{ // Dog클래스가 Animal클래스를 상속받음
	// Dog클래스 생성자
	constructor(){
		super("개");
	}
	speak() {
		console.log(`${this.name} : barks!`);
	}
}

var animal = new Animal("동물");
animal.speak();
var dog = new Dog();
dog.speak();

Dog클래스에 생성자를 선언하였다.

super는 부모 클래스의 생성자를 호출한다는 의미이다.

부모클래스인 Animal 생성자에는 이름을 넣어야하므로 위와같이 작성하였다.

결과는 같다.

 

부모클래스에 없는 메서드를 자식클래스에서 선언하여 사용 할 수 있다.

class Dog extends Animal{
	constructor(name,age){
		super(name);
		this.age = age;
	}
	speak() {
		console.log(`${this.name} : barks!`);
	}
	old() {
		console.log(`${this.name} : ${this.age}`)
	}
}

var animal = new Animal("동물");
animal.speak();
var dog = new Dog("개",10);
dog.speak();
dog.old();

 

정적 메소드

강의 정리를 하다보니 적지만.. static에 대한 이해가 우선적으로 필요하다. static에 관해서는 다음에 ...

class Calculater{
	constructor(){

	}

	Add(a,b) {
		console.log("add",a+b);
		return a+b;
	}
}

var calculater = new Calculater();
calculater.Add(1,2);

Calculater클래스 안의 Add함수를 사용하기 위해선 Calculater를 생성한 후에 사용할 수 있다.

 

그러나 static를 이용하면 Calculater.Add(); 라는 식으로 클래스를 생성하지 않고 호출 할 수 있다.

class Calculater{
	static Add(a,b) {
		console.log("add",a+b);
		return a+b;
	}
}
Calculater.Add(3,4);