⭐️ JS의 this

정의: 함수 실행 시 함수 내에서의 실행 맥락(context)을 참조하는 자동으로 할당되는 지역 변수.

• JS에서의 this의 바인딩은 함수나 메서드가 실행될 때 그 함수나 메서드가 어떤 객체를 참조해야 하는지를 결정하는 과정이다. 이는 함수의 실행 방식에 따라 **this**가 가리키는 대상(객체)이 결정되며, 함수가 어디서, 어떻게 호출되었는지에 기반하여 그 값이 달라진다.

바인딩(binding)이란, 프로그래밍에서 어떤 값을 특정 이름(변수, 상수 등)에 연결하는 과정을 의미한다. 즉, 변수나 상수에 값을 할당하는 것을 바인딩이라고 할 수 있다.

this는 함수가 호출될 때 결정되는 실행 컨텍스트를 가리킨다. 그 종류로는 1)전역 this, 2)함수 this, 3)arrow 함수 this

1. Global This(전역 this)

1. 상위 객체를 참조해서 보통 전역 번수를 가리킨다

2. Func This(함수 this)

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

1. 기본 바인딩: 함수 단독 호출 시에는 Global Binding,즉 전역 this와 동일
2. 암시적 바인딩: 객체 내에서 일단 메서드로 호출 될 때 그 객체 안에서 Binding, 일반 함수에서 this는 메서드를 호출한 객체를 가리킴.
3. apply / call: 함수 호출시 첫번째 인자로 this 로 사용할 객체를 전달

  function introduce(name, interest) {
  console.log(`Hello! My name is ${name} and I like ${interest}.`);
  console.log(`Hello! My name is ${this.name} and I like ${this.interest}.`);
  console.log(`this: ${JSON.stringify(this)}`); // user를 가리키고 있음
  console.log(`-----------------------------`);
}

const user = {
  name: 'Alice',
  interest: 'JavaScript',
};

introduce.call(user, user.name, user.interest);
introduce.apply(user, [user.name, user.interest]);

1. bind: 첫번째 인자값으로 전달된 객체에 this 를 고정한 새로운 함수(영구적)를 반환

function greet() {
  console.log(`Hi, I am ${this.name}.`);
}

const user = {
  name: 'Bob',
};

// bind
const userGreet = greet.bind(user); // 새로운 함수 선언,초기화
userGreet(); // 새로운 함수 사용

1. new 바인딩: 생성자 함수를 사용하여 새로운 객체를 생성시 발생하는 형태, 새로 생성한 객체에 자동으로 bind

3. Arrow Func This

1. 객체A내에서의 화살표 함수 안에서 this. 화살표 함수는 자신만의 this를 가지지 않고, 상위 스코프의 this를 그대로 사용한다. 그래서 상위 스토프가 객체A니까 이 this가 전역 객체를 참조한다. this 바인딩 자체가 없기 때문에 call, apply, bind 모두 사용 불가능

🧐 Arrow function과 일반 함수의 this 차이

1. Arrow function

const obj = {
    name: 'Kim',
    getName: () => {
        return this.name;
    }
}

console.log(obj.getName());

동작 방식: