🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명

JavaScript 클래스

자바스크립트는 프로토타입 기반 언어이기에 상속의 개념이 존재하지 않음<br/> ES6부터는 클래스 문법이 추가되었으나, 사실상 이것도 프로토타입을 기반으로 하는 부분들이 있음<br/>

• class: 집단, 집합으로 공통의 속성을 모아놓은 추상적인 개념 ex) 음식, 과일
• instance: 구체적인 예시; class에 의해 구체적, 실체적으로 구현된 개체 ex) 바나나, 사과

클래스의 상하 관계 음식 이란 클래스와 과일 이란 클래스가 있을 때, 음식이 과일의 superclass이고 과일은 음식의 subclass가 됩니다. 즉, 하위 클래스에서 상위 클래스를 가리킬 때, super를 사용하는 이유입니다.

프로토타입 체이닝(Remind)

앞서 다중 프로토타입 체이닝으로 특정 생성자의 protorype에 얻고 싶은 메서드를 포함하는 생성자의 instance를 할당함으로써 그 메서드를 사용할 수 있게 되었던 개념

결국 프로토타입 기반의 자바스크립트에선 이와 유사하게 클래스를 구현

// 기본적으로 SubClass, SuperClass라는 생성자 함수가 존재한다고 가정
var instance = new SubClass();
// 이 때, SubClass이란 생성자에 더 나아가 SuperClass라는 생성자를 체이닝하고 싶으면
SubClass.prototype = new SuperClass();
// 이후 만든 instance는 프로토타입 체이닝에 의해 SubClass.prototype에도 접근 가능
var instance2 = new SubClass();

프로토타입 기반 클래스 구현의 문제점

위의 예시를 통해 살펴보면

1. SuperClass의 static method 혹은 property가 그대로 남아있음

• 당장은 문제가 안되어도, 프로퍼티 및 메서드 명이 중첩될 수 있고 원치 않은 값이 나올 가능성이 존재

2. instance2.__proto__.constructor를 해도 instance2.__proto__(.__proto__).constructor이므로 SuperClass를 의미. 즉, SubClass에 접근 할 수가 없음

해결법

• method 및 property가 그대로 남아있는 문제

  1. SuperClass의 instance를 할당 후, delete을 통해 내부 프로퍼티를 일일히 지우기
  2. var Bridge = function () {};인 비어있는 생성자 함수를 활용하기
  3. ES5에서 도입된 Object.create(상속클래스.prototype)을 활용

• SubClass 자체에 접근 못하는 문제

  • SubClass.prototype.constructor = SubClass; 로 따로 할당해주기

ES6의 class 맛보기

예시 코드는 아래와 같고 마찬가지로 new를 통해 호출하면 instance가 만들어진다.

// ES5: 프로토타입으로 구현
var Dog = function (name) {
  this.name = name;
};

Dog.staticMethod = function () {
  return this.name + '스테틱 메서드';
};
Dog.prototype.bark = function () {
  return this.name + ': 왈왈!';
};

// ES6: class로 구현
var Dog = class {
  constructor (name) {
    this.name = name;
  }
  static staticMethod {
    return this.name + '스테틱 메서드';
  }
  bark () {
    return this.name + ': 와울와울!';
  }
};

undefined