🎯 03. this 바인딩 — '나는 누구인가'를 결정하는 5가지 규칙

// 브라우저 환경
console.log(this); // window 객체
 
// strict mode ('use strict')
"use strict";
function showThis() {
  console.log(this); // undefined (strict mode에서는 전역 바인딩 없음)
}
showThis();
 
// Node.js 환경
console.log(this); // {} (빈 module.exports 객체)

// 영수네 커뮤니티 — 유저 객체
 
const user = {
  name: "영철",
  role: "junior",
  greet() {
    console.log(`안녕하세요, 저는 ${this.name}이에요!`); // this → user 객체
  },
  getRole: function () {
    return this.role; // this → user 객체
  },
};
 
user.greet();     // "안녕하세요, 저는 영철이에요!"
user.getRole();   // "junior"
 
// ❌ 메서드를 변수에 꺼내는 순간 this 손실
const greetFn = user.greet;
greetFn(); // "안녕하세요, 저는 undefined이에요!" — this가 전역(또는 undefined)으로 바뀜!

function User(name, role) {
  // new로 호출 시, this = {} (새로 생성된 객체)
  this.name = name;
  this.role = role;
  // 암묵적으로 return this;
}
 
const yc = new User("영철", "junior");
const yh = new User("영호", "lead");
 
console.log(yc.name); // "영철"
console.log(yh.role); // "lead"
 
// new 없이 호출하면?
const broken = User("영철", "junior"); // this = window (브라우저) → 전역 오염!
console.log(broken); // undefined (return 없음)

function introduce(greeting, punctuation) {
  console.log(`${greeting}, 저는 ${this.name}입니다${punctuation}`);
}
 
const yc = { name: "영철" };
const yh = { name: "영호" };
 
// call — 인자를 콤마로 나열, 즉시 실행
introduce.call(yc, "안녕하세요", "!"); // "안녕하세요, 저는 영철입니다!"
introduce.call(yh, "반갑습니다", "~"); // "반갑습니다, 저는 영호입니다~"
 
// apply — 인자를 배열로, 즉시 실행
introduce.apply(yc, ["안녕하세요", "!"]); // "안녕하세요, 저는 영철입니다!"
 
// bind — this를 고정한 새 함수를 반환 (즉시 실행 안 함)
const introduceyc = introduce.bind(yc, "안녕하세요");
introduceyc("!"); // "안녕하세요, 저는 영철입니다!"
introduceyc("~"); // "안녕하세요, 저는 영철입니다~"
// yc로 this가 영구 고정됨

const user = {
  name: "영철",
  friends: ["영호", "영수", "영숙"],
 
  // ❌ 일반 함수 — forEach 콜백에서 this 손실
  listFriendsWrong() {
    this.friends.forEach(function (friend) {
      // 이 콜백은 독립적으로 호출됨 → this는 undefined (strict mode)
      console.log(`${this.name}의 친구: ${friend}`); // TypeError!
    });
  },
 
  // ✅ 화살표 함수 — 상위 스코프(listFriendsRight 메서드)의 this를 물려받음
  listFriendsRight() {
    this.friends.forEach((friend) => {
      // 화살표 함수 → this = user 객체 (상위 this 그대로)
      console.log(`${this.name}의 친구: ${friend}`); // ✅
    });
  },
};
 
user.listFriendsWrong(); // TypeError
user.listFriendsRight(); // "영철의 친구: 영호", "영철의 친구: 영수", ...

// 영수네 커뮤니티 — 실시간 알림 타이머
 
const notificationService = {
  message: "새 게시글이 있습니다!",
  delay: 1000,
 
  // ❌ 일반 함수 — this 손실
  startWrong() {
    setTimeout(function () {
      console.log(this.message); // undefined — setTimeout이 전역에서 호출
    }, this.delay);
  },
 
  // ✅ 화살표 함수 — 렉시컬 this 유지
  startRight() {
    setTimeout(() => {
      console.log(this.message); // "새 게시글이 있습니다!" — notificationService의 this 유지
    }, this.delay);
  },
 
  // ✅ bind — 명시적 고정
  startWithBind() {
    setTimeout(
      function () {
        console.log(this.message);
      }.bind(this),
      this.delay
    );
  },
};
 
notificationService.startWrong();    // undefined
notificationService.startRight();    // "새 게시글이 있습니다!"
notificationService.startWithBind(); // "새 게시글이 있습니다!"

// ❌ 화살표 함수를 객체 메서드로 — this 손실
const post = {
  title: "클로저 완전정복",
  getTitle: () => {
    return this.title; // this → 전역 (undefined)
  },
};
post.getTitle(); // undefined ← 의도와 다름!
 
// ✅ 객체 메서드는 일반 함수 (단축 메서드 사용 권장)
const post2 = {
  title: "클로저 완전정복",
  getTitle() {
    return this.title; // this → post2 객체
  },
};
post2.getTitle(); // "클로저 완전정복" ✅

// 영수네 커뮤니티 — 클래스 기반 컴포넌트에서 this 고정
 
class CommentForm {
  constructor(postId) {
    this.postId = postId;
    this.content = "";
 
    // 방법 1: bind로 이벤트 핸들러 this 고정
    this.handleSubmit = this.handleSubmit.bind(this);
    document.getElementById("submit-btn").addEventListener("click", this.handleSubmit);
  }
 
  handleSubmit(event) {
    event.preventDefault();
    console.log(`게시글 ${this.postId}에 댓글 전송: ${this.content}`);
    // bind 없으면 this.postId → undefined
  }
}
 
// 방법 2 (더 현대적): 클래스 필드 + 화살표 함수로 자동 바인딩
class CommentFormModern {
  constructor(postId) {
    this.postId = postId;
    this.content = "";
  }
 
  // 클래스 필드로 선언된 화살표 함수 → this가 인스턴스로 자동 고정
  handleSubmit = (event) => {
    event.preventDefault();
    console.log(`게시글 ${this.postId}에 댓글 전송: ${this.content}`);
  };
}
 
// React에서의 관용적 패턴
// function Component() {
//   const handleClick = () => { ... }; // 화살표 함수로 this 걱정 없음
//   return <button onClick={handleClick}>클릭</button>;
// }

const obj = {
  value: 42,
  getValue() {
    return this.value;
  },
  getValueArrow: () => {
    return this.value;
  },
};
 
console.log(obj.getValue());      // ?
console.log(obj.getValueArrow()); // ?
 
const extracted = obj.getValue;
console.log(extracted());         // ?

class PostList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { posts: [] };
  }
 
  fetchPosts() {
    // 클릭 시 this가 무엇인지가 문제
    fetch("/api/posts")
      .then((res) => res.json())
      .then((data) => this.setState({ posts: data })); // 여기서 에러
  }
 
  render() {
    return <button onClick={this.fetchPosts}>게시글 불러오기</button>;
  }
}