this에 대해

this는 자바스크립트에서 현재 실행 중인 코드에서 사용되는 특별한 키워드임.

this는 실행 문맥에 따라 다른 값을 가지며, 주로 메서드 내에서 객체에 접근할 때 사용됨.

this는 다음과 같은 경우에 다른 값을 가짐:

1. 전역 범위(Global Scope):

   전역 범위에서 this는 전역 객체를 가리킴.

   브라우저 환경에서는 window 객체를 가리킴.

2. 함수 내부:

   일반 함수 내부에서 this는 호출에 따라 결정됨.

   기본적으로는 전역 객체를 가리킴.

   엄격 모드(strict mode)에서는 함수 내부의 this는 undefined가 됨.

3. 메서드 내부(Methods):

   객체의 메서드 내부에서 this는 해당 메서드가 호출된 객체를 가리킴.

4. 생성자(Constructor):

   생성자 함수 내부에서 this는 새로 생성되는 인스턴스를 가리킴.

예를 들어:

const obj = {
  prop: 'value',
  method() {
    console.log(this.prop); // 'this'는 obj 객체를 가리킴
  }
};
obj.method(); // 출력: 'value'

function myFunction() {
  console.log(this === window); // true (브라우저 환경에서)
}
myFunction(); // 출력: true

this의 값은 실행 문맥에 따라 동적으로 결정되므로 주의해서 사용해야 함.

함부로 this를 사용하면 예기치 않은 결과를 초래할 수 있음.

call, apply, bind에 대해

call, apply, bind는 모두 함수의 this 값을 명시적으로 지정하거나 함수의 인수를 설정하는 데 사용되는 메서드임.

이들은 모두 함수 객체의 메서드로 사용되며,

주로 함수의 호출 컨텍스트를 변경하거나 함수를 호출할 때 인수를 전달하는 데 활용됨.

1. call:

   함수를 호출하면서 명시적으로 this 값과 함께 인수를 전달함.

   첫 번째 인수는 함수 내에서 사용할 this 값을 지정하고, 이후의 인수는 호출할 함수에 전달됨.

function greet(name) {
  console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const obj = { name: 'Alice' };
greet.call(obj, 'Bob'); // 출력: Hello, Bob! My name is Alice.

1. apply:

   call과 비슷하지만, 인수를 배열로 전달함.

function sum(a, b) {
  return a + b;
}

console.log(sum.apply(null, [1, 2])); // 출력: 3

1. bind:

   함수의 this 값을 영구적으로 설정하고, 원하는 시점에 호출할 수 있는 새로운 함수를 생성함.

   bind 메서드는 함수를 호출하지 않고 새로운 함수를 반환함.

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const obj = { name: 'Alice' };
const boundGreet = greet.bind(obj);
boundGreet(); // 출력: Hello, Alice!

이렇게 call, apply, bind 메서드를 사용하면 함수 호출 시점에 this 값을 명시적으로 지정할 수 있고,

인수를 유연하게 전달할 수 있음.

요약:

this는 자바스크립트에서 현재 실행 중인 코드에서 사용되는 특별한 키워드

실행 문맥에 따라 다른 값을 가짐.

주로 객체의 메서드 내에서 객체를 참조할 때 사용되며, 함수의 호출 컨텍스트를 명시적으로 지정하기 위해 call, apply, bind와 함께 사용됨.