[콜럼Vue스]this

자바스크립트의 this는 함수가 호출될 때 그 함수가 어떻게 호출되었는지에 따라 동적으로 결정되는 값임.

this는 자바스크립트의 실행 컨텍스트(Execution Context)에 따라 값이 달라지며, 상황에 따라 가리키는 대상이 달라짐. 이 때문에 this는 자바스크립트에서 종종 혼란을 일으키는 개념 중 하나임.

 

자바스크립트의 this 기본 개념

• 전역 컨텍스트에서의 this:
  • 브라우저 환경에서는 **전역 객체인 window**를 가리킴.

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

• 함수 내부에서의 this:
  • 일반 함수에서는 함수 호출 방식에 따라 this가 달라짐.
  • 기본적으로 전역 객체(window)를 가리킴.

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

showThis(); // window 객체

 

• 객체 메서드에서의 this:
  • 객체의 메서드 안에서 this는 해당 메서드를 호출한 객체를 가리킴.

const person = {
  name: "Jerry",
  greet: function () {
    console.log(this.name);
  }
};

person.greet(); // "Jerry"

 

여기서 this는 person 객체를 가리킴.

 

생성자 함수에서의 this:

• 생성자 함수에서의 this는 새로 생성된 객체 인스턴스를 가리킴.

function Person(name) {
  this.name = name;
}

const jerry = new Person("Jerry");
console.log(jerry.name); // "Jerry"

 

---

2. 화살표 함수에서의 this

**화살표 함수(Arrow Function)**에서의 this는 전통적인 함수와 다르게 동작함. 일반 함수는 호출된 방식에 따라 this가 결정되지만, 화살표 함수는 this가 정의될 때의 상위 스코프에서 this를 상속 받음. 즉, 화살표 함수는 this를 바인딩하지 않음.

화살표 함수에서 this의 특징:

• 상위 스코프의 this를 그대로 사용함.
• this가 호출되는 방식에 따라 달라지지 않고, **화살표 함수가 정의된 위치의 this**를 사용함.

const person = {
  name: "Jerry",
  greet: function () {
    const innerFunc = () => {
      console.log(this.name); // 화살표 함수의 this는 상위 스코프의 this를 상속받음
    };
    innerFunc();
  }
};

person.greet(); // "Jerry"

• 위 코드에서 innerFunc는 화살표 함수로 선언되었기 때문에, this는 person 객체를 가리킴. 일반 함수였다면 this는 전역 객체를 가리켰을 것임.

 

일반 함수에서의 차이점:

만약 위 코드에서 innerFunc가 일반 함수로 선언되었다면, 결과는 달라짐.

const person = {
  name: "Jerry",
  greet: function () {
    function innerFunc() {
      console.log(this.name); // 일반 함수의 this는 호출된 방식에 따라 다름
    }
    innerFunc();
  }
};

person.greet(); // undefined (전역 객체의 this를 가리킴)

• 일반 함수에서 this는 전역 객체(window)를 가리키므로, this.name은 undefined가 됨.

---

화살표 함수와 this의 용도

화살표 함수는 콜백 함수나 이벤트 핸들러에서 상위 스코프의 this를 유지하고 싶을 때 매우 유용함.

예를들어서, 타이머 함수에서 this 사용

function Timer() {
  this.seconds = 0;

  setInterval(() => {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}

const timer = new Timer();

 

화살표 함수에서 this의 한계

• 화살표 함수는 this를 자체적으로 바인딩하지 않으므로, 일반 함수처럼 동적으로 this를 변경할 수 없음.
• 즉, call(), apply(), bind() 메서드로 this를 변경하려 해도, 화살표 함수에서는 적용되지 않음.

const person = {
  name: "Jerry",
  greet: () => {
    console.log(this.name); // this는 전역 객체를 가리킴
  }
};

person.greet(); // undefined (전역 객체에 name이 없음)

화살표 함수는 객체의 메서드로 사용할 때 적합하지 않음. 이 경우 this는 전역 객체를 가리킴. 객체 메서드에서는 일반 함수가 더 적합함.

 

---

요약

 

• **일반 함수의 this**는 함수가 호출되는 방식에 따라 달라짐. 전역 객체, 객체, 생성자 함수에 따라 this가 달라질 수 있음.
• **화살표 함수의 this**는 **상위 스코프의 this**를 그대로 사용함. 화살표 함수는 this를 바인딩하지 않으며, 동적으로 변경할 수 없음.
• 화살표 함수는 콜백 함수나 이벤트 핸들러에서 유용하게 사용되며, 일반 함수와는 다른 동작을 함.