this 가 동작하는 원리와 용법

this는 코드 실행 시점에 가리키는 객체를 참조하는 역할을 합니다. 사용되는 상황에 따라 동적으로 바뀝니다.

전역함수 및 메소드 내부에서의 this: 전역 스코프에서 사용된 this는 전역 객체를 가리킵니다(Web 브라우저의 경우, window 객체). 일반 함수 내부에서 사용된 this도 전역 객체를 참조합니다.

// 일반 함수에서의 this
function globalFunction() {
  console.log(this);
}

globalFunction(); // window 객체 또는 전역 객체

 

객체 메소드 내부에서의 this: 객체의 메소드 내부에서 사용된 this는 메소드를 호출한 객체를 참조합니다.

// 객체 메소드에서의 this
const obj = {
  prop: "Hello,",
  method: function() {
    console.log(this.prop, "I'm this method!");
  }
};

obj.method(); // "Hello, I'm this method!"

 

생성자 함수에서의 this: new 키워드로 생성자 함수를 호출할 때 this는 생성하는 새로운 인스턴스를 가리킵니다.

// 생성자 함수에서의 this
function Person(name) {
  this.name = name;
}

const person1 = new Person("Alice");
console.log(person1.name); // "Alice"

 

이벤트 핸들러에서의 this: DOM 이벤트 핸들러의 경우, this는 이벤트를 발생시킨 DOM 요소를 참조합니다.

// 이벤트 핸들러에서의 this
const button = document.createElement("button");
button.textContent = "Click me";
button.addEventListener("click", function() {
  console.log(this.textContent); // "Click me"
});
document.body.appendChild(button);

---

평소 코드 중에서 가장 큰 차이가 생기는 부분은 아래와 같습니다.
화살표 함수(Arrow Function)에서의 this: 화살표 함수에서는 this가 바인딩 되지 않습니다. 따라서 화살표 함수 내부에서 this를 사용하면, 상위 스코프의 this를 참조하게 됩니다. 이 경우, 화살표 함수 내부에서 다른 this 값을 참조하려면 bind() 메소드를 사용할 수 없으므로 주의해야 합니다.

// 화살표 함수에서의 this
const arrowFunctionObj = {
  prop: "Hello,",
  method: () => {
    console.log(this.prop); // undefined, 화살표 함수 내부에서 this가 바인딩 되지 않음
  }
};

arrowFunctionObj.method(); // undefined

---

this를 사용할 때 주의해야 할 사항
일반 함수와 화살표 함수의 this 동작 원리의 차이점: 일반 함수와 화살표 함수 모두 this를 사용할 수 있지만, 각각 동작 원리가 다릅니다. 화살표 함수 내부에서 this를 사용하면, 상위 스코프의 this 값을 참조하게 됩니다. 따라서 this 바인딩에 대한 문제가 발생하지 않습니다. 하지만 일반 함수 내부에서 this를 사용할 때는, 함수를 호출한 객체에 따라 this가 참조하는 객체가 다를 수 있습니다.

함수 내부에서 this 값이 변경되는 경우: 함수 내부에서 this 값을 다른 객체로 변경하는 경우가 있습니다. 이러한 경우 this 값이 예상과 다르게 변경될 수 있으므로, 사용 시 주의해야 합니다.

this와 바인딩 메소드(bind, call, apply)의 사용: bind(), call(), apply() 메소드를 사용하면, this 값을 지정할 수 있습니다. 이때 지정된 this 값은 호출된 함수에서만 유효합니다. 이외에도, bind(), call(), apply() 메소드의 인자로 전달되는 값이 예상과 다를 경우, this 값이 의도치 않게 변경될 수 있습니다. 따라서 this 값을 지정하는 경우 주의해서 사용해야 합니다.

 

함수 내부에서 객체의 메소드를 호출하는 경우: 함수 내부에서 객체의 메소드를 호출하는 경우, 객체의 메소드 내부에서 this를 사용하면 예상치 못한 결과가 발생할 수 있습니다. 이 경우 메소드를 호출한 객체와 사용하는 객체가 다르기 때문입니다. 이 경우에는 객체 내부에서 this 대신 객체 자체를 참조할 수 있는 변수를 사용하는 것이 좋습니다.

 

JavaScript의 동작 원리를 모르는 경우: Java나 다른 언어와 같은 syntax를 갖고 있으며 이론적으로 비슷하지만 실제로 자바스크립트의 동작 원리는 다릅니다. 따라서 자바스크립트의 동작 원리를 모르고 있는 경우, this를 사용하면 예상치 못한 결과가 발생할 수 있습니다. 따라서, this를 사용할 때는 자바스크립트의 동작 원리에 대해 충분히 이해한 후 사용하는 것이 좋습니다.