📝 오늘 한 것

1. 클래스

📚 배운 것

7. 클래스

1) 클래스와 인스턴스의 개념 이해

클래스는 공통 요소를 지니는 집단을 분류하기 위한 개념이다.
ES5까지의 자바스크립트에는 클래스가 없고, ES6에서 클래스가 도입되었다.
클래스는 하위로 갈수록 상위 클래스의 속성을 상속하면서 더 구체적인 요건이 추가 또는 변경된다. (상위 클래스 / 하위 클래스)
한편, 인스턴스란 어떤 클래스의 속성을 지니는 실존하는 개체를 말한다.
프로그래밍 언어에서는 클래스가 먼저 정의되어야만 그로부터 공통적인 요소를 지니는 개체(인스턴스)들을 생성할 수 있다.

2) 자바스크립트의 클래스

var Rectangle = function (name) {
  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)); // Uncaught TypeError: not a function
console.log(Rectangle.isRectangle(rect1)); // true

프로토타입 메서드는 클래스의 prototype 내부에 정의된 메서드로서 인스턴스가 마치 자신의 것처럼 호출할 수 있다.
스태틱 메서드는 클래스(생성자 함수)에 직접 정의한 메서드로서 인스턴스가 직접 호출할 수 없고 클래스(생성자 함수)에 의해서만 호출할 수 있다.

구체적인 인스턴스가 사용할 메서드를 정의한 '틀'의 역할을 할 때의 클래스는 추상적인 개념이다.
그러나, 스태틱 메서드를 호출할 때의 클래스는 클래스(생성자 함수) 자체가 this가 되어 메서드에 직접 접근하므로 하나의 구체적인 개체로서 취급된다.

3) 클래스 상속

(1) 기본 구현

다중 프로토타입 체인을 이용해 클래스 상속을 구현할 수 있다.
자바스크립트에서 클래스 상속을 구현했다는 것은 곧 프로토타입 체이닝을 잘 연결했다는 뜻이다.
앞서 참고했던 예제를 다시 가져왔다.

예제 1: Array 내장 클래스를 상속하는 하위 클래스

var Grade = function () {
  var args = Array.prototype.slice.call(arguments);
  for (var i = 0; i < args.length; i++) {
    this[i] = args[i];
  }
  this.length = args.length;
};

Grade.prototype = [];
var g = new Grade(100, 80);
console.log(g); // // Grade { 0: 100, 1: 80, length: 2 }

delete g.length; // g에서 length 프로퍼티가 삭제된다
g.push(70); // g의 length 값으로 g.__proto__.length(즉, Grade.prototype.length)의 값(0)을 읽어온 후 g에 70을 push 한다
console.log(g); // Grade { 0: 70, 1: 80, length: 1 }

그러나 위 예제 코드에는 몇 가지 큰 문제가 있다.

• length 프로퍼티가 configurable(삭제 가능)하다.
• Grade.prototype에 빈 배열을 참조시켰다. ( = 하위 클래스가 구체적인 데이터를 가진다.)

내장 객체인 배열 인스턴스의 length 프로퍼티는 삭제가 불가능한 반면, Grade 클래스의 인스턴스는 Grade.prototype = []에 의해 배열 메서드를 상속하면서도, 기본적으로는 일반 객체의 성질을 그대로 지니므로 length 프로퍼티를 삭제할 수 있다.

이와 같은 오류를 접하지 않기 위해서는 클래스에 있는 값이 인스턴스의 동작에 영향을 주지 않게끔 클래스가 구체적인 데이터를 지니지 않도록 해야 한다.

예제 2: 사용자가 정의한 두 클래스 사이의 상속 관계

// 직사각형 클래스 & 정사각형 클래스
var Rectangle = function (width, height) {
  this.width = width;
  this.height = height;
};

Rectangle.prototype.getArea = function () {
  return this.width * this.height;
};

var rect = new Rectangle(3, 4);
console.log(rect.getArea()); // 12

var Square = function (width) {
  Rectangle.call(this, width, width);
};

Square.prototype = new Rectangle(); // 하위 클래스의 prototype에 연결하고자 하는 상위 클래스(생성자 함수)의 인스턴스 할당

var sq = new Square(5);
console.log(sq.getArea()); // 25

console.dir(sq)을 실행해 sq 인스턴스를 살펴보면 클래스가 구체적인 데이터를 가지고 있음을 확인할 수 있다.

Square
  height: 5
  width: 5
  __proto__: Rectangle // 클래스가
    height: undefined // undefined 라는 값을 가진다
    width: undefined // undefined 라는 값을 가진다
    __proto__ :
      getArea: f ()
      constructor: f (width, height)
      __proto__: Object

또한, sq 인스턴스의 constructor가 Square가 아니라 Rectangle을 참조한다는 문제점을 가진다.

var rect2 = sq.constructor(2, 3);
console.log(rect2); // Rectangle { width: 2, height: 3 }

정리하자면, 하위 클래스로 삼을 생성자 함수의 prototype에 상위 클래스의 인스턴스를 부여함으로써(다중 프로토타입 체인) 기본적인 메서드 상속은 가능하지만 다양한 문제가 발생할 여지가 있다고 할 수 있다.

(2) 클래스가 구체적인 데이터를 지니지 않게 하는 방법

클래스 상속 및 추상화를 위해서는 SubClass.prototype.__proto__가 SuperClass.prototype을 참조하고, SubClass.prototype에는 불필요한 인스턴스 프로퍼티(구체적인 데이터)가 남지 않도록 해야 한다.

방법 1: 인스턴스 생성 후 프로퍼티 제거

상위 클래스의 인스턴스(하위 클래스의 prototype 객체)를 만든 후 하위 클래스가 구체적인 데이터를 지니지 않도록 그 프로퍼티를 제거한다.
이후로 변경 혹은 삭제할 수 없도록 Object.freeze()를 사용한다.

delete Square.prototype.width;
delete Square.prototype.height;
Object.freeze(Square.prototype);

방법 2: 빈 함수 활용

var Bridge = function () {}; // 빈 생성자 함수
Bridge.prototype = Rectangle.prototype;
Square.prototype = new Bridge();
Object.freeze(Square.prototype);

방법 3: Object.create() 활용

하위 클래스의 prototype의 __proto__가, 상위 클래스의 prototype을 참조하되, (하위 클래스가 구체적인 데이터를 지니지 않도록) 상위 클래스의 인스턴스가 되지는 않도록 한다.

...
Square.prototype = Object.create(Rectangle.prototype);
Object.freeze(Square.prototype);
...

(3) constructor 복구하기

위에서 살펴봤듯이 SubClass.prototype.constructor가 SuperClass를 가지고 있어서 SubClass.constructor를 실행하면 의도와 다른 결과가 나온다.
클래스 상속 및 추상화를 위해 추가적으로 SubClass.prototype.constructor가 SubClass를 참조하도록 해야 한다.
범용성을 고려한 코드에 아래 코드를 추가하도록 한다.

SubClass.prototype.constructor = SubClass;

4) 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());
  }
};

상위 클래스를 상속받는 하위 클래스를 만들기 위해 class 명령어 뒤에 'extends 상위 클래스 이름'을 추가했다.

constructor 메서드 내부에서 super 키워드를 '함수'처럼 사용할 수 있는데, 이는 상위 클래스의 constructor(생성자 함수)를 실행한다.

constructor 메서드를 제외한 다른 메서드에서는 super 키워드를 '객체'처럼 사용할 수 있다.
이때 객체는 상위 클래스의 prototype 객체를 참조한다.
그러나, 호출할 메서드 내부에서의 this는 원래의 this(즉, 하위 클래스의 prototype 객체)를 그대로 따른다.

✨ 내일 할 것

1. 복습 및 정리