[JavaScript] This

👉This

• 함수가 실행될 때 함수 내부에서 사용되는 값
• 함수를 호출한 컨텍스트를 가리킴.

👉👉Func This

• this는 부르는 상황마다 다르게 동작
• new 바인딩 → 암시적 바인딩 → 명시적 바인딩 → 기본 바인딩

화살표함수 -> 자신의 THIS X / 상위 스코프 THIS O

🔸 기본 바인딩(Default Binding)

• 함수 단독 호출 시에는 전역 Global Bindging
• 엄격 모드(strict mode)에서는 기본 바인딩이 'undefined'로 평가됨

✔ 예제1

function sayName() {
  console.log(this.name);
}
var name = "Alice";
sayName(); // 출력: Alice (브라우저 환경에서는 window.name)

🔸 암시적 바인딩(Implicit Binding)

• Object Binding
• 객체에 메서드로 호출 될 때

✔ 예제1

var person = {
  name: "Bob",
  sayName: function() {
    console.log(this.name);
  }
};
person.sayName(); // 출력: Bob

🔸 명시적 바인딩(Explicit Binding) - apply() / call()

• 함수를 호출
• 함수 호출 시 첫번째 인자로 this로 사용할 객체를 전달
• 두 방식은 동작 방식은 동일, 인수 전달의 차이

✔ 예제1 call()

function sayName() {
  console.log(this.name);
}
var person = {
  name: "Charlie"
};
sayName.call(person); // 출력: Charlie

✔ 예제1 apply()

function sayName() {
  console.log(this.name);
}
var person = {
  name: "David"
};
sayName.apply(person); // 출력: David

🔶 명시적 바인딩 - bind()

첫번째 인자값으로 전달된 객체에 this를 고정한 새로운 함수를 반환

✔ 예제1

function sayName() {
  console.log(this.name);
}
var person = {
  name: "Eve"
};
var boundFunc = sayName.bind(person);
boundFunc(); // 출력: Eve

🔸 new 바인딩

• 생성자 함수를 사용하여 새로운 객체를 생성 시 발생하는 형태
• 새로 생성한 객체에 자동으로 bind

✔ 예제1

function Person(name) {
  this.name = name;
}
var alice = new Person("Alice");
console.log(alice.name); // 출력: Alice

👉👉👉 Arrow Func This

• 함수가 호출되는 방식에 따라 this가 결
• 선언될 당시의 상위 Scope의 this를 참조.
• this 바인딩 자체가 없으므로 call, apply, bind 모두 사용 불가능

✔ 예제1

const obj = {
  name: 'Alice',
  sayName: function() {
    console.log(this.name);
  },
  sayNameArrow: () => {
    console.log(this.name);
  }
};
obj.sayName();        // 출력: Alice
obj.sayNameArrow();   // 출력: undefined

---