🧬 04. 프로토타입 & 상속 — JS가 클래스를 흉내 내는 진짜 방법

const arr = [1, 2, 3];
arr.map(x => x * 2);    // [2, 4, 6] — map은 어디서 왔는가?
arr.filter(x => x > 1); // [2, 3] — filter는 어디서 왔는가?

const user = { name: "영철", role: "junior" };
 
// user의 프로토타입 체인:
// user → Object.prototype → null
 
console.log(Object.getPrototypeOf(user) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype));           // null (체인의 끝)
 
// user는 직접 선언하지 않았지만 Object.prototype의 메서드를 쓸 수 있다
user.toString();        // "[object Object]" — Object.prototype.toString
user.hasOwnProperty("name"); // true — Object.prototype.hasOwnProperty

// 영수네 커뮤니티 — 유저 역할 권한 체크
 
function User(name) {
  this.name = name; // 인스턴스 직속 속성
}
 
User.prototype.role = "member"; // 프로토타입 속성
User.prototype.canPost = function () {
  return true; // 프로토타입 메서드 (모든 인스턴스가 공유)
};
 
const yc = new User("영철");
const yh = new User("영호");
 
// 속성 탐색 순서:
// 1. 인스턴스 직속 속성 탐색
// 2. 없으면 [[Prototype]] (User.prototype) 탐색
// 3. 없으면 Object.prototype 탐색
// 4. 없으면 undefined
 
console.log(yc.name);   // "영철" — 인스턴스 직속 ✅
console.log(yc.role);   // "member" — User.prototype에서 발견
console.log(yc.canPost()); // true — User.prototype에서 발견
 
// 인스턴스에 직접 설정하면 프로토타입을 가린다 (Shadowing)
yc.role = "admin"; // yc 인스턴스에 직접 추가
console.log(yc.role); // "admin" — 인스턴스 직속 속성이 우선
console.log(yh.role); // "member" — yh는 그대로 프로토타입 참조
 
// 프로토타입 메서드는 모든 인스턴스가 공유 (메모리 효율)
console.log(yc.canPost === yh.canPost); // true — 동일한 함수 참조!

// 기반 생성자
function User(name, email) {
  this.name = name;
  this.email = email;
}
User.prototype.login = function () {
  console.log(`${this.name} 로그인`);
};
 
// AdminUser가 User를 상속
function AdminUser(name, email, permissions) {
  User.call(this, name, email); // 부모 생성자 호출 (this 바인딩 이전)
  this.permissions = permissions;
}
 
// 프로토타입 체인 연결
AdminUser.prototype = Object.create(User.prototype);
AdminUser.prototype.constructor = AdminUser; // constructor 복구
 
AdminUser.prototype.manage = function () {
  console.log(`${this.name}이 관리자 권한으로 관리 중`);
};
 
const admin = new AdminUser("영호", "yh@example.com", ["delete", "ban"]);
admin.login();  // "영호 로그인" — User.prototype 메서드
admin.manage(); // "영호이 관리자 권한으로 관리 중" — AdminUser.prototype 메서드
 
// 프로토타입 체인:
// admin → AdminUser.prototype → User.prototype → Object.prototype → null

const userMethods = {
  login() {
    console.log(`${this.name} 로그인`);
  },
  logout() {
    console.log(`${this.name} 로그아웃`);
  },
};
 
// userMethods를 프로토타입으로 가지는 새 객체 생성
const yc = Object.create(userMethods);
yc.name = "영철";
yc.email = "yc@example.com";
 
yc.login();  // "영철 로그인" — 프로토타입 메서드
 
// 관리자 — userMethods를 상속하면서 추가 메서드 보유
const adminMethods = Object.create(userMethods);
adminMethods.manage = function () {
  console.log(`${this.name}이 관리 중`);
};
 
const yh = Object.create(adminMethods);
yh.name = "영호";
yh.login();  // "영호 로그인" — userMethods 체인을 통해
yh.manage(); // "영호이 관리 중"
 
// 체인: yh → adminMethods → userMethods → Object.prototype → null

// ✅ 현대적이고 권장되는 방법
 
class User {
  // constructor 내부 = 인스턴스 직속 속성
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
 
  // 클래스 본문의 메서드 = User.prototype에 정의됨
  login() {
    console.log(`${this.name} 로그인`);
  }
 
  // static = User 자체의 메서드 (인스턴스에서 호출 불가)
  static createGuest() {
    return new User("게스트", "guest@example.com");
  }
}
 
class AdminUser extends User {
  constructor(name, email, permissions) {
    super(name, email); // 부모 constructor 호출 (필수!)
    this.permissions = permissions;
  }
 
  manage() {
    console.log(`${this.name}이 관리 중`);
  }
 
  // 부모 메서드 오버라이드
  login() {
    super.login(); // 부모 login 호출
    console.log("(관리자 권한으로 접속)");
  }
}
 
const admin = new AdminUser("영호", "yh@example.com", ["delete"]);
admin.login();
// "영호 로그인"
// "(관리자 권한으로 접속)"
 
// 내부적으로 여전히 프로토타입 체인!
console.log(Object.getPrototypeOf(AdminUser.prototype) === User.prototype); // true
console.log(admin instanceof User);      // true
console.log(admin instanceof AdminUser); // true

// hasOwnProperty — 프로토타입 체인 제외, 직접 속성만 확인
const user = { name: "영철" };
user.hasOwnProperty("name");     // true — 직접 속성
user.hasOwnProperty("toString"); // false — Object.prototype에 있음
 
// 권장: Object.hasOwn (ES2022, hasOwnProperty보다 안전)
Object.hasOwn(user, "name");     // true
 
// instanceof — 프로토타입 체인에 특정 prototype이 있는지 확인
const admin = new AdminUser("영호", "yh@example.com", []);
admin instanceof AdminUser; // true
admin instanceof User;      // true — 프로토타입 체인에 User.prototype 있음
admin instanceof Array;     // false
 
// Object.getPrototypeOf — 프로토타입 접근 (권장)
Object.getPrototypeOf(admin) === AdminUser.prototype; // true
 
// Object.keys vs for...in
const post = Object.create({ type: "post" }); // type은 프로토타입
post.title = "클로저";
post.author = "영철";
 
Object.keys(post);   // ["title", "author"] — 직접 속성만
for (const key in post) console.log(key); // title, author, type — 체인 포함!
// → for...in 루프에서 hasOwnProperty 체크가 필요한 이유

// ❌ 절대 하면 안 되는 것: 내장 프로토타입 수정 (Monkey Patching)
Array.prototype.sum = function () {
  return this.reduce((acc, val) => acc + val, 0);
};
[1, 2, 3].sum(); // 3 — 동작하지만...
 
// 이 코드가 왜 위험한가?
// 1. 다른 라이브러리가 똑같은 이름으로 sum을 추가했다면 → 예기치 못한 충돌
// 2. 미래의 자바스크립트 표준에 Array.prototype.sum이 생긴다면 → 표준 동작을 방해함
// 3. 팀원들이 sum을 표준 메서드로 오해하여 혼란을 줌
 
// ✅ 대신 유틸 함수로 분리
const arrayUtils = {
  sum(arr) {
    return arr.reduce((acc, val) => acc + val, 0);
  },
};
arrayUtils.sum([1, 2, 3]); // 3 ✅
 
// ❌ __proto__ 직접 수정 — 성능 저하 및 예측 불가
const obj = {};
obj.__proto__ = { greeting: "hello" }; // JS 엔진이 객체 형태를 재구성
 
// ✅ Object.create 또는 Object.setPrototypeOf 사용 (그나마 낫지만 신중하게)
const proto = { greeting: "hello" };
const obj2 = Object.create(proto);

function User(name) {
  this.name = name;
}
User.prototype.canPost = function () { return true; };
 
const yc = new User("영철");
console.log(yc.canPost()); // true

// ❌ 생성자 내부 — 인스턴스마다 새 함수 생성 (100개 인스턴스 = 함수 100개)
function User(name) {
  this.name = name;
  this.greet = function() { console.log(this.name); }; // 매번 새 함수
}
 
// ✅ prototype — 모든 인스턴스가 공유 (100개 인스턴스 = 함수 1개)
function User(name) {
  this.name = name;
}
User.prototype.greet = function() { console.log(this.name); };

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
  login() { console.log(`${this.name} 로그인`); }
  logout() { console.log(`${this.name} 로그아웃`); }
}
 
class AdminUser extends User {
  constructor(name, email, permissions) {
    super(name, email);
    this.permissions = permissions;
  }
  manage() { console.log(`${this.name} 관리 중`); }
}
 
class GuestUser extends User {
  constructor() {
    super("게스트", "guest@example.com");
  }
  login() { // 오버라이드 — 제한된 권한 메시지
    console.log("게스트로 제한적 접근합니다.");
  }
}