마지막 챕터로 클래스에 대해 확인해보려 한다!
ES6부터 클래스 문법이 추가 되었다 하지만 자바스크립트는 프로토타입의 언어이기에
상속이라는 개념이 존재하지 않기에 ES6의 클래스에서도 일정 부분은 프로토타입을 활용하고 있다
CoreJavaScript
1. Class ?
클래스와 인스턴스를 이해하기 위해 아래의 예시 설명을 확인하자. !
하나의 사과가 있다 이 사과는 과일에 속해 있을 것이고 과일이라 함은 먹을 수 있는 음식이라는 종류에 포함된 녀석이다 사과는 과일이 가지고 있는 속성중에 하나인 나무에서 열린다에 만족을 하며 또한 그 상위에 있는 음식이라는 키워드에 먹어도 되는것 이라는 속성에도 만족하게 된다 그러면 사과는 자신의 상위 클래스들의
속성을 지니는 실제로 먹을 수 있고 만질 수 있는 실존하는 개체가 되는 것이 된다 !!
이처럼 어떤 클래스의 속성을 지니는 실존하는 개체를 일컬어 인스턴스라고 부르게 된다.
조금 더 집약해 설명해보자면 어떤 클래스에 속한 개체는 그 클래스의 조건을 모두 만족하므로
그 클래스의 구체적인 예시, 즉 인스턴스가 된다 !
2. Class in JS ?
이 전에 프로토타입에 대해 포스팅을 해놓기도 했지만 다시 한번 자바스크립트는 프로토타입의 언어이다.
자바스크립트는 인스턴스에서도 직접 메서드를 정의할 수 있고 프로토타입에서 정의한 메서드 또한 존재하여 이 두가지가 어떤 것을 지칭하는 것인지 헷갈리는 순간이 온다.
따라서 자바스크립트는 그 언어의 특징을 살려 프로토타입 메서드라고 통칭해서 부른다.
아래의 코드로 스태틱 메서드와 프로토타입 메서드에 대해 알아보자
var Rectangle = function (width, height) {
this.width = width;
this.height = height;
}
Rectangle.prototype.getArea = function () {
return this.width * this.height;
};
Rectangle.isRectangle = function (instance) {
return instance instanceof Rectangle &&
instance.width > 0 && instance.height > 0;
}
var rect1 = new Rectangle(3, 4);
console.log(rect1.getArea()); //12
console.log(rect1.isRectangle(rect1)); //not function error
console.log(Rectangle.isRectangle(rect1)); //true먼저 생성자로 Rectangle을 만들었고 그 아래 프로토타입 메서드와 스태틱 메서드를 생성했다
또한 rect1에다가 new 연산자와 함께 생성된 인스턴스를 할당을 해줬다.
rect1.getArea()를 보면 인스턴스에서 직접 호출할 수 있는 메서드가 바로 프로토타입의 메서드이며
rect1.isRectangle(rect1)의 경우는 rect1 인스턴스에서 isRectangle이라는 메소드를 접근하고자 했지만 rect1에 해당 메서드가 없었고 rect1. proto에도 없으며 Object.prototype으로 접근해도 찾을 수가 없어 결국 에러를 반환하게 된다
그렇다면 이 부분을 해결하기 위해선 생성자 함수 자체를 this로 접근한
Rectangle.isRectangle(rect1)로 실행해야만 접근할 수 있게 된다.
프로그래밍 언어에서 클래스는 사용하기에 따라 추상적일 수도 있고 구체적인 개체가 될 수도 있다.
일반적인 사용방식으로 클래스라는 녀석이 인스턴스가 사용할 메서드를 정의한 '틀' 과도 같이 사용이 되면
그 해당 클래스는 추상적인 개념이 되며 클래스 자체를 this로 해서 직접 접근해야만 하는 스태틱 메서드를 호출할 때의 클래스는 그 자체가 하나의 개체로서 취급이된다!!
3. Class inheritance
클래스에 있어 상속은 객체지향 언어를 다루는데에 가장 중요한 요소 중 하나이다.
ES5까지는 다른 객체지향 언어에 익숙한 개발자들에게
최대한 친숙한 형태로 흉내 내는 것이 주요 관심사였다고 한다ㅋㅋㅋ
그래서 프로토타입 체이닝을 통하여 비슷한 형태로까지 발전시키기도 했으며 정말 다양한 시도가 있었다고 한다
ES5 코드의 예시를 들 수 있지만 사실상 지금은 작성하지 않는 코드이며
자바스크립트의 클래스 개념을 잡는데에 큰 의미가 없을 것 같아 첨부하지 않고 패스한다 !
(알고 싶다면.. 코어자바스크립트 182p ~ 196p 참고)
4. Comparing ES6 and ES5
ES6로 와서 클래스 문법이 추가되며 간단해진 기능들과 ES5 시절의 클래스 구현 코드들을
아래의 예시코드로 비교하며 넘어간다.
ES5, ES6 둘다 문자열을 출력하는 코드
var ES5 = function (name) {
this.name = name;
}
ES5.staticMethod = function () {
return this.name + ' staticMethod';
};
ES5.prototype.method = function () {
return this.name + ' method';
};
var es5Instance = new ES5('es5');
console.log(ES5.staticMethod()); //'ES5 staticMethod'
console.log(es5Instance.method()); //'es5 method'
var ES6 = class {
constructor(name){
this.name = name;
}
static staticMethod(){
return this.name + ' staticMethod';
}
method(){
return this.name + ' method';
}
};
var es6Instance = new ES6('es6');
console.log(ES6.staticMethod()); //'ES6 staticMethod'
console.log(es6Instance.method()); //'es6 method'요번엔 상속에 대해 보려한다 ES5에는 상속 자체가 없어 ES6만 확인해보자
ES6의 클래스 상속
var Rectangle = class {
constructor (width, height) {
this.width = width;
this.height = height;
}
getArea () {
return this.width * this.height;
}
};
var Square = class extends Rectangle {
constructor (width) {
super(width, width);
}
getArea() {
console.log('size is :', super.getArea());
}
}정리를 하자면
자바스크립트는 프로토타입 기반 언어이기 때문에 다른 언어들과 달리 클래스 및 상속 개념은 존재하지 않는다 하지만 프로토타입을 기반으로 클래스와 비슷하게 동작하게끔 하는 다양한 기법들이 도입되어 왔다!
클래스는 = 어떤 사물의 공통속성을 모아 정의한 추상적인 개념 ! (과일)
인스턴스 = 클래스 속성을 지니는 구체적인 사례 ! (사과)
사과는 하위클래스가 될 것이고 상위클래스인 과일의 조건을 만족하며 사과만의 더욱 구체적인 조건이 있다
클래스의 prototype 내부에 정의된 메서드를 프로토타입 메서드라고 하며,
이 녀석들은 인스턴스가 마치 자신의 것처럼 호출할 수 있다.
하지만? 클래스에 직접 정의한 메서드는 스태틱 메서드라고 하며,
이들은 인스턴스가 직접 호출할 수 없고 클래스에 의해서만 호출 할 수 있다.
클래스 상속을 흉내를 내기 위해서 자바스크립트는 다음과 같은 기능을 제공한다.
바로 SubClass.prototype에 SuperClass의 인스턴스를 할당한 다음 프로퍼티를 모두 삭제하는 방법
또한 빈 함수를 활용하는 방법, Object.create를 이용하는 방법등이 있다.
이 세가지 방법 모두 constructor 프로퍼티가 원래의 생성자 함수를 바라보도록 조정해야 한다.
클래스의 경우는 자바스크립트를 이해하는데에 있어서 핵심이다라고 말하기는 어렵다
실무에서도 클래스를 구현해서 사용하는 경우도 있지만 그렇지 않은 경우도 많기 때문이다
왜냐하면 자바스크립트는 프로토타입 언어이니깐 !!
출처
모든 내용은 코어자바스크립트 공부를 하며 책 내용을 발췌해 이해한 내용들만 추려 적은 내용입니다 해당 코드들은 책 내용의 코드의 값들을 변경하거나 이해를 위해 그대로 가지고 왔습니다.
