μ£Όλ‹ˆμ–΄ 개발자의 개인 곡뢀 과정을 κΈ°λ‘ν•©λ‹ˆλ‹€.

μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν”„λ‘œν† νƒ€μž… κΈ°λ°˜μ–Έμ–΄λΌμ„œ β€˜μƒμ†β€™ κ°œλ…μ΄ μ‘΄μž¬ν•˜μ§€ μ•Šμ§€λ§Œ, ES6μ—μ„œ 클래슀 문법이 μΆ”κ°€λ˜μ—ˆλ‹€.

λ‹€λ§Œ, ES6의 ν΄λž˜μŠ€μ—μ„œλ„ 일정 λΆ€λΆ„ ν”„λ‘œν† νƒ€μž…μ„ ν™œμš©ν•˜κ³  μžˆλ‹€λŠ” 점 μ°Έκ³ ν•˜μž.

:: ν΄λž˜μŠ€μ™€ μΈμŠ€ν„΄μŠ€

ν΄λž˜μŠ€λž€, μ–΄λ˜ μ‚¬λ¬Όμ˜ 곡톡 속성을 λͺ¨μ•„ μ •μ˜ν•œ 좔상적인 κ°œλ….

μΈμŠ€ν„΄μŠ€λŠ” 클래슀의 속성을 μ§€λ‹ˆλŠ” ꡬ체적인 사둀.

μƒμœ„ 클래슀(superclass)의 쑰건을 μΆ©μ‘±ν•˜λ©΄μ„œ λ”μš± ꡬ체적인 쑰건이 μΆ”κ°€λœ 것을 ν•˜μœ„ 클래슀(subclass)라고 ν•œλ‹€


μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 클래슀

μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν”„λ‘œν† νƒ€μž… 기반 μ–Έμ–΄μ΄λ―€λ‘œ 클래슀의 κ°œλ…μ΄ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ”λ‹€. κ·Έλ ‡μ§€λ§Œ ν”„λ‘œν† νƒ€μž…μ„ 일반적인 μ˜λ―Έμ—μ„œμ˜ 클래슀 κ΄€μ μ—μ„œ 접근해보면 λΉ„μŠ·ν•˜κ²Œ 해석할 μˆ˜λ„ μžˆλ‹€.

예λ₯Ό λ“€μ–΄, μƒμ„±μž ν•¨μˆ˜ Arrayλ₯Ό new μ—°μ‚°μžμ™€ ν•¨κ»˜ ν˜ΈμΆœν•˜λ©΄ μΈμŠ€ν„΄μŠ€κ°€ μƒμ„±λœλ‹€. μ΄λ•Œ Arrayλ₯Ό μΌμ’…μ˜ 클래슀라고 ν•˜λ©΄, Array의 prototype 객체 λ‚΄λΆ€ μš”μ†Œλ“€μ΄ μΈμŠ€ν„΄μŠ€μ— μƒμ†λœλ‹€κ³  λ³Ό 수 μžˆλ‹€. μ—„λ°€νžˆλŠ” 상속이 μ•„λ‹Œ ν”„λ‘œν† νƒ€μž… 체이닝에 μ˜ν•œ μ°Έμ‘°μ§€λ§Œ, κ²°κ³Όμ μœΌλ‘œλŠ” λ™μΌν•˜κ²Œ λ™μž‘ν•˜λ―€λ‘œ 상속이라고 이해해도 λ¬΄λ°©ν•˜λ‹€.

ν•œνŽΈ Array λ‚΄λΆ€ ν”„λ‘œνΌν‹°λ“€ 쀑 prototype ν”„λ‘œνΌν‹°λ₯Ό μ œμ™Έν•œ λ‚˜λ¨Έμ§€λŠ” μΈμŠ€ν„΄μŠ€μ— μƒμ†λ˜μ§€ μ•ŠλŠ”λ‹€.

μΈμŠ€ν„΄μŠ€μ— μƒμ†λ˜λŠ”μ§€ (μΈμŠ€ν„΄μŠ€κ°€ μ°Έμ‘°ν•˜λŠ”μ§€) 여뢀에 따라 static member와 instance member둜 λ‚˜λ‰œλ‹€. 이 λΆ„λ₯˜λŠ” λ‹€λ₯Έ μ–Έμ–΄μ˜ 클래슀 κ΅¬μ„±μš”μ†Œμ— λŒ€ν•œ μ •μ˜λ₯Ό μ°¨μš©ν•œ κ²ƒμœΌλ‘œμ„œ 클래슀 μž…μž₯μ—μ„œ μ‚¬μš© λŒ€μƒμ— 따라 κ΅¬λΆ„ν•œ 것이닀.

참고둜, μΈμŠ€ν„΄μŠ€μ—μ„œ 직접 μ ‘κ·Όν•  수 μ—†λŠ” λ©”μ„œλ“œκ°€ static member이닀. static memberλŠ” μƒμ„±μž ν•¨μˆ˜λ₯Ό this둜 ν•΄μ•Όλ§Œ ν˜ΈμΆœν•  수 μžˆλ‹€.

그런데 μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” μΈμŠ€ν„΄μŠ€μ—μ„œλ„ 직접 λ©”μ„œλ“œλ₯Ό μ •μ˜ν•  수 있기 λ•Œλ¬Έμ— μΈμŠ€ν„΄μŠ€ λ©”μ„œλ“œλΌλŠ” λͺ…칭은 ν˜Όλž€μŠ€λŸ¬μ›€μ„ μ•ΌκΈ°ν•  수 μžˆλ‹€. (ν”„λ‘œν† νƒ€μž…μ— μ •μ˜ν•œ λ©”μ„œλ“œλ₯Ό μ§€μΉ­ν•˜λŠ” 건지, μΈμŠ€ν„΄μŠ€μ— μ •μ˜ν•œ λ©”μ„œλ“œλ₯Ό μ§€μΉ­ν•˜λŠ” 건지 λ“±) λ”°λΌμ„œ μœ„ λͺ…μΉ­ λŒ€μ‹ μ— ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œλΌκ³  λΆ€λ₯΄λŠ” 편이 더 쒋을 수 μžˆλ‹€.


클래슀 상속

클래슀 상속은 객체지ν–₯μ—μ„œ κ°€μž₯ μ€‘μš”ν•œ μš”μ†Œ 쀑 ν•˜λ‚˜μ΄λ‹€.

// Grade μƒμ„±μž ν•¨μˆ˜ 및 μΈμŠ€ν„΄μŠ€
const Grade = () => {
  const args = Array.prototype.slice.call(arguments);
  for (let i = 0; i < args.length; i++) {
    this[i] = args[i];
  }
  this.length = args.length;
};

Grade.prototype = [];
const g = new Grade(100, 80);

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ 클래슀 상속을 κ΅¬ν˜„ν–ˆλ‹€λŠ” 것은 κ²°κ΅­ ν”„λ‘œν† νƒ€μž… 체이닝을 잘 μ—°κ²°ν•œ 것과 κ°™λ‹€. λ‹€λ§Œ, 아무리 체이닝을 잘 μ—°κ²°ν–ˆλ‹€κ³  ν•˜λ”λΌλ„ μ„ΈλΆ€μ μœΌλ‘œ μ™„λ²½ν•˜κ²Œ superclass와 subclass의 κ΅¬ν˜„μ΄ 이뀄진 것은 μ•„λ‹ˆλ‹€.

예λ₯Ό λ“€λ©΄, length ν”„λ‘œνΌν‹°κ°€ configurable(μ‚­μ œ κ°€λŠ₯)ν•˜λ‹€λŠ” 점과, Grade.prototype에 빈 배열을 μ°Έμ‘°μ‹œμΌ°λ‹€λŠ” 점이 큰 λ¬Έμ œμ΄λ‹€.

...

g.push(90);
console.log(g);
/* Array {
  '0': 100,
  '1': 80,
  '2': 90,
  length: 3,
  __proto__: { length: 3 }
} */

delete g.length;
g.push(70);
console.log(g);
/* Array {
  '0': 70,
  '1': 80,
  '2': 90,
  length: 1,
  __proto__: { length: 1 }
} */

length ν”„λ‘œνΌν‹°λ₯Ό μ‚­μ œν•˜κ³  λ‹€μ‹œ pushλ₯Ό ν•˜λ‹ˆ, pushν•œ 값이 0번째 μΈλ±μŠ€μ— λ“€μ–΄κ°€κ³  lengthλŠ” 1이 λ˜μ—ˆλ‹€.

λ‚΄μž₯객체인 λ°°μ—΄ μΈμŠ€ν„΄μŠ€μ˜ length ν”„λ‘œνΌν‹°λŠ” configurable 속성이 falseλΌμ„œ μ‚­μ œκ°€ λΆˆκ°€λŠ₯ν•œ 반면, Grade 클래슀의 μΈμŠ€ν„΄μŠ€λŠ” λ°°μ—΄ λ©”μ„œλ“œλ₯Ό μƒμ†ν•˜μ§€λ§Œ 기본적으둜 일반 객체의 μ„±μ§ˆμ„ κ·ΈλŒ€λ‘œ μ§€λ‹ˆλ―€λ‘œ μ‚­μ œκ°€ κ°€λŠ₯ν•΄μ„œ λ¬Έμ œκ°€ λœλ‹€.

λ”°λΌμ„œ length 값을 μ‚­μ œν•œ 후에 g.__proto__ 즉 Grade.prototype이 빈 배열을 가리킀고 있기 λ•Œλ¬Έμ— μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ push λͺ…령에 μ˜ν•΄ g.lengthλ₯Ό 읽고자 ν–ˆμ„ λ•Œ g.lengthκ°€ μ—†μ—ˆκ³ , μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν”„λ‘œν† νƒ€μž… 체이닝을 타고 g.__proto__.lengthλ₯Ό 읽어왔닀.

이처럼 ES5κΉŒμ§€μ˜ 클래슀 상속 κ΅¬ν˜„μ€ λ¬Έμ œκ°€ λ°œμƒν•  여지가 μžˆμ—ˆκ³ , 이에 ES6μ—μ„œλŠ” 본격적으둜 클래슀 문법이 λ„μž…λ˜μ—ˆλ‹€.


πŸ’‘μ°Έκ³ ! 클래슀의 좔상성을 μ§€ν‚€λŠ” 게 μ€‘μš”ν•œ μ΄μœ λŠ” μƒμœ„ν΄λž˜μŠ€μ˜ 데이터가 μ˜€μ—Όλ˜λ©΄, μƒμœ„ν΄λž˜μŠ€μ˜ κ³΅ν†΅μ„±μ§ˆμ„ μ°Έμ‘°ν•˜κ³  μžˆλŠ” λ‹€λ₯Έ μˆ˜λ§Žμ€ ν•˜μœ„ν΄λž˜μŠ€κΉŒμ§€ 데이터 μ˜€μ—Όμ΄ μΌμ–΄λ‚˜κΈ° λ•Œλ¬Έμ΄λ‹€.

좔상성:

  • 본질적, 보편적, 관념적 μ„±μ§ˆ. 즉, κ³΅ν†΅μ„±μ§ˆ.

좔상화:

  • κ°œλ³„μ˜ μ‚¬λ¬Όμ΄λ‚˜ ν‘œμƒμ˜ κ³΅ν†΅λœ μ†μ„±μ΄λ‚˜ 관계 λ”°μœ„λ₯Ό λ½‘μ•„λ‚΄λŠ” 것.
  • λ³΅μž‘ν•œ 자료, λͺ¨λ“ˆ, μ‹œμŠ€ν…œ λ“±μœΌλ‘œλΆ€ν„° 핡심적인 κ°œλ… λ˜λŠ” κΈ°λŠ₯을 κ°„μΆ”λ € λ‚΄λŠ” 것.
  • 곡톡뢀뢄을 μƒμœ„ 클래슀/μΈν„°νŽ˜μ΄μŠ€λ‘œ λͺ¨μœΌλŠ” 일.
  • λͺ¨λ“ˆμ˜ κΈ°λŠ₯을 μ‰½κ²Œ μ΄μš©ν•  수 μžˆλ„λ‘ λ‹¨μˆœν™”ν•˜λŠ” 일.



ES6의 클래슀 및 클래슀 상속

var ES5 = function(name) {
  console.log(name)        // 'es5'
  this.name = name;
};

ES5.staticMethod = function () {
  console.log(this.name)  // 'ES5'
  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'

-------------------------------------------

const ES6 = class {
  constuctor (name) {
    this.name = name;
  }

  static staticMethod () {
    console.log(this.name);  // 'ES6'
    return this.name + ' staticMethod';
  }

  method () {
    console.log(this.name);  // undefined
    return this.name + ' method';
  }
};

const es6Instance = new ES6('es6');
console.log(ES6.staticMethod());  // 'ES6 staticMethod'
console.log(es6Instance.method());  // 'undefined method'

ES6의 constructorλŠ” ES5μ—μ„œμ˜ μƒμ„±μž ν•¨μˆ˜μ™€ λ™μΌν•œ 역할을 μˆ˜ν–‰ν•œλ‹€.

static ν‚€μ›Œλ“œλŠ” ν•΄λ‹Ή λ©”μ„œλ“œκ°€ static λ©”μ„œλ“œμž„μ„ μ•Œλ¦¬λŠ” λ‚΄μš©μœΌλ‘œ, μƒμ„±μž ν•¨μˆ˜(클래슀) μžμ‹ λ§Œμ΄ ν˜ΈμΆœν•  수 μžˆλ‹€.

methodλŠ” μžλ™μœΌλ‘œ prototype 객체 내뢀에 ν• λ‹Ήλ˜λŠ” λ©”μ„œλ“œμ΄λ‹€. μΈμŠ€ν„΄μŠ€κ°€ ν”„λ‘œν† νƒ€μž… 체이닝을 톡해 마치 μžμ‹ μ˜ κ²ƒμ²˜λŸΌ ν˜ΈμΆœν•  수 μžˆλŠ” λ©”μ„œλ“œμ΄λ‹€.




✨ tl;dr

  • ν΄λž˜μŠ€μ™€ μΈμŠ€ν„΄μŠ€
    • μ–΄λ–€ μ‚¬λ¬Όμ˜ 곡톡 νŠΉμ„±μ„ λͺ¨μ•„ μ •μ˜ν•œ 좔상적인 κ°œλ…
    • μΈμŠ€ν„΄μŠ€λŠ” 클래슀의 속성을 μ§€λ‹ˆλŠ” ꡬ체적인 사둀
    • μƒμœ„ 클래슀(superclass)의 쑰건을 μΆ©μ‘±ν•˜λ©΄μ„œ λ”μš± - ꡬ체적인 쑰건이 μΆ”κ°€λœ 것을 ν•˜μœ„ 클래슀(subclass)라고 함
  • λ©”μ„œλ“œ

    • 클래슀의 prototype 내뢀에 μ •μ˜λœ λ©”μ„œλ“œλŠ” ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œλΌκ³  함
    • ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œλŠ” μΈμŠ€ν„΄μŠ€κ°€ 마치 μžμ‹ μ˜ κ²ƒμ²˜λŸΌ ν˜ΈμΆœν•  수 있음
    • 클래슀(μƒμ„±μž ν•¨μˆ˜)에 직접 μ •μ˜ν•œ λ©”μ„œλ“œλŠ” μŠ€νƒœν‹± λ©”μ„œλ“œλΌκ³  함
    • μŠ€νƒœν‹± λ©”μ„œλ“œλŠ” μΈμŠ€ν„΄μŠ€κ°€ 직접 ν˜ΈμΆœν•  μˆ˜μ—†κ³  클래슀(μƒμ„±μž ν•¨μˆ˜)에 μ˜ν•΄μ„œλ§Œ ν˜ΈμΆœν•  수 있음
  • 클래슀 상속을 흉내 λ‚΄κΈ° μœ„ν•œ 세가지 방법

    • SubClass.prototype에 SuperClass의 μΈμŠ€ν„΄μŠ€λ₯Ό ν• λ‹Ήν•œ λ‹€μŒ ν”„λ‘œνΌν‹°λ₯Ό λͺ¨λ‘ μ‚­μ œν•˜λŠ” 방법
    • 빈 ν•¨μˆ˜(Bridge)λ₯Ό ν™œμš©ν•˜λŠ” 방법
    • Object.createλ₯Ό μ΄μš©ν•˜λŠ” 방법
  • ES6
    • 클래슀 문법이 λ„μž…λ¨
    • μ΄μ „κΉŒμ§€λŠ” 상속 및 좔상화λ₯Ό κ΅¬ν˜„ν•˜κΈ° μœ„ν•΄ μƒλ‹Ήνžˆ λ³΅μž‘ν•œ 방법을 μ‚¬μš©ν–ˆλŠ”λ° ES6μ—μ„œλŠ” μƒλ‹Ήνžˆ κ°„λ‹¨ν•˜κ²Œ 처리됨