클래스(Class)

인프런 강의 자바스크립트 중급 - 코딩앙마 를 듣고 정리한 내용입니다.

비슷한 형태의 객체를 만들기 위해 생성자 함수를 사용했습니다.

const User = function (name, age) {
	this.name = name;
	this.age = age;
	this.showName = function() {
		console.log(this.name);
	};
};

const mike = new User("Mike", 30)

Class 는 ES6 에 추가된 스펙으로 위 생성자 함수의 같은 역할을 합니다. 위 생성자 함수를 Class 를 활용해서 다시 써보면,

class User2 {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	showName() {
		console.log(this.name);
	}
}

const tom = new User2("Tom", 19);

class 내부에는 객체를 만들어 주는 생성자 메소드 constructor 가 있습니다. 이 생성자 메소드에 포함되지 않은 값은 객체 내부가 아닌 프로토타입에 저장됩니다. class 로 객체를 만들 때 new 없이 실행하면 에러가 발생해서 알려줍니다. 생성자 함수를 위 class 처럼 동작하게 하려면 아래처럼 수정해야 합니다.

const User = function (name, age) {
	this.name = name;
	this.age = age;
};

User.prototype.showName = function() { // 프로토타입으로 따로 저장해주어야
		console.log(this.name);
}

const mike = new User("Mike", 30);

생성자 함수에서 상속을 프로토타입으로 구현했다면, class 에서는 extends 로 구현합니다.

class Car {
	constructor(color) {
		this.color = color;
		this.wheels = 4;
	}
	drive() {
		console.log("drive..");
	}
	stop() {
		console.log("stop..");
	}
}

class Bmw extends Car {
	park() {
		console.log("park");
	}
}

const z4 = new Bmw("blue");

위 코드에서 z4 를 확인하면 Car 클래스에서 선언한 color wheels 가 있고, 프로토타입을 보면 park() 가 있고, 그 아래 상속으로 drive() stop() 이 있습니다.

메소드 오버라이딩 method overriding 을 알아보면,

class Car {
	constructor(color) {
		this.color = color;
		this.wheels = 4;
	}
	drive() {
		console.log("drive..");
	}
	stop() {
		console.log("stop..");
	}
}

class Bmw extends Car {
	park() {
		console.log("park");
	}
	stop() {  // 이렇게 중복되는 함수를 추가한다면 어떨까?
		console.log("off..") ;
	}
}

const z4 = new Bmw("blue");

이럴 경우 z4.stop() 은 stop 이 아니라 off 를 출력합니다. 동일한 이름의 메소드가 있다면 상속받기 전 단계에 있는 값을 사용합니다.부모의 메소드를 사용하고 싶다면 super 를 사용합니다.

생성자 constructo 오버라이딩을 해보면

class Car {
	constructor(color) {
		this.color = color;
		this.wheels = 4;
	}
	drive() {
		console.log("drive..");
	}
	stop() {
		console.log("stop..");
	}
}

class Bmw extends Car {
	constructor(color) {
		super(color); 
      // 이렇게 super 써서 부모 요소처럼 빈 객체 생성하고 시작해야 함, 매개변수 color 도 그대로 입력
		this.navigation = 1;
	}
	park() {
		console.log("park");
	}
}

const z4 = new Bmw("blue");

기본적으로 자식요소에 constructor 을 써주지 않으면, 우리 눈에 보이지 않게 실행되지만, 위와 같이 입력을 한다면 super 를 사용하고 매개변수도 입력해주어야 한다.