this 란?

자바스크립트에서 this는 실행 컨텍스트에 따라 동적으로 결정되는 키워드입니다. this는 함수를 호출할 때, 함수 내에서 현재 객체를 참조하는 데 사용됩니다. 자바스크립트에서 this의 동작 원리와 용법을 살펴봅시다.

1.전역 컨텍스트: 전역 컨텍스트에서 this는 전역 객체를 참조합니다. 웹 브라우저에서 전역 객체는 window 객체입니다.

console.log(this); // window 객체

2.함수 호출: 일반 함수를 호출할 때 this는 전역 객체를 참조합니다. 엄격 모드('use strict')에서는 this가 undefined로 설정됩니다.

function myFunction() {
  console.log(this);
}

myFunction(); // window 객체, 엄격 모드에서는 undefined

3.메서드 호출: 객체의 메서드를 호출할 때 this는 해당 메서드를 호출한 객체를 참조합니다.

const myObject = {
  myMethod: function() {
    console.log(this);
  }
};

myObject.myMethod(); // myObject 객체

4.생성자 함수: 생성자 함수를 호출할 때 (즉, new를 사용하여 객체를 생성할 때) this는 새로 생성된 객체를 참조합니다.

function MyConstructor() {
  this.myProperty = "Hello";
}

const newInstance = new MyConstructor();
console.log(newInstance.myProperty); // "Hello"

5.call, apply, bind를 사용한 명시적 바인딩: call, apply, bind 메서드를 사용하면 this를 원하는 객체에 명시적으로 바인딩할 수 있습니다.

function myFunction() {
  console.log(this.myProperty);
}

const myObject1 = { myProperty: "Object 1" };
const myObject2 = { myProperty: "Object 2" };

myFunction.call(myObject1); // "Object 1"
myFunction.apply(myObject2); // "Object 2"

const boundFunction = myFunction.bind(myObject1);
boundFunction(); // "Object 1"

코드에서 가장 큰 차이가 발생하는 부분은 다양한 실행 컨텍스트에 따라 this가 어떻게 결정되는지와 관련이 있습니다. 예를 들어, 함수를 호출하는 방식에 따라 this가 참조하는 객체가 달라질 수 있으므로 이러한 차이점을 이해하는 것이 중요합니다. 이를 제대로 이해하면 코드의 동작 원리를 더 잘 파악할 수 있으며, 예기치 않은 문제를 방지할 수 있습니다.