Published 2022. 12. 28. 14:46

[JavaScript] 예시를 통해 알아보는 this

JavaScript에서 this 는 함수 호출 방법에 의해 결정된다.

예시1) 객체 메소드의 this

const phone = {
  name: 'Galaxy Note 3',
  getName: function () {
    console.log("getName: ", this);
  },
}

phone.getName();
// output: getName: {name: 'Galaxy Note 3', getName: f}

getName 메소드의 호출자가 phone 객체이므로, getName 실행 시 this 는 phone 객체이다.

예시2) 전역 객체에서의 this

const phone = {
  name: 'Galaxy Note 3',
  getName: function () {
    console.log("getName: ", this);
  },
}

const globalPhone = phone.getName;
globalPhone();
// output: getName: Window

getName 메소드를 참조하는 globalPhone 의 호출자가 전역 객체이므로, globalPhone 실행 시 this 는 window 객체이다.

예시3) DOM 이벤트 핸들러에서의 this

<body>
  <button id="button">this란 무엇일까?</button>
</body>

const phone = {
  name: 'Galaxy Note 3',
  getName: function () {
    console.log("getName: ", this);
  },
}

const btn = document.getElementById("button");
btn.addEventListener("click", phone.getName);
// output: getName: btn요소

car 객체의 getName 메소드의 호출자가 btn 이므로, 여기서 this 는 btn DOM 객체이다.

예시4) bind 를 통해서 this 값 고정

const phone = {
  name: 'Galaxy Note 3',
  getName: function () {
    console.log("getName: ", this);
  },
}

phone.getName();
// output: getName: {name: 'Galaxy Note 3', getName: f}

const phone2 = {
  name: 'Iphone Mini',
  getName: function () {
    console.log("getName: ", this);
  },
}

phone2.getName();
// output: getName: {name: 'Iphone Mini', getName: f}

phone2.getName.bind(phone);
// output: getName: {name: 'Galaxy Note 3', getName: f}

bind 메소드로 호출자를 phone 객체로 지정한 채 getName 메소드 호출 시 this는 phone 객체이다.

예시5) 객체 메소드 내에 정의된 내부 함수에서의 this

const phone = {
  name: 'Galaxy Note 3',
  getName: function () {
    console.log("getName: ", this.name);
    const innerFunc = function () {
      console.log(this.name);
    };
    innerFunc();
  },
}

phone.getName();
// output:
// getName: Galaxy Note 3
// undefined

getName 의 호출자가 phone 객체이므로 getName 의 this 값은 phone 객체이다. 이어서 당연히 innerFunc은 getName 메소드 내에 정의되어 있기 때문에 innerFunc의 this 값 또한 phone 객체라고 생각할 지도 모른다.

그러나 이는 함수가 선언된 관점에서 바라보았기 때문에 틀린 말이다. 앞서 언급했다시피 this 값은 함수가 호출될 때 결정된다.

innerFunc 함수의 호출자는 전역 객체이므로 innerFunc 함수의 this 값은 전역 객체이다.

innerFunc 함수의 this 값을 부모 함수인 getName 과 일치시키고 싶다면 innerFunc 함수를 화살표 함수 형태로 선언하면 된다.

const phone = {
  name: 'Galaxy Note 3',
  getName: function () {
    console.log(this);
    const innerFunc = () => {
      console.log(this);
    };
    innerFunc();
  },
}

phone.getName();
// output:
// {name: 'Galaxy Note 3', getName: ƒ}
// {name: 'Galaxy Note 3', getName: ƒ}

화살표 함수에서의 this는 함수가 속해 있는 곳의 상위 this를 참조한다.

즉 위 코드에서 화살표 함수인 innerFunc의 this 는 함수가 속해 있는 곳인 getName의 this를 그대로 참조한다.

'프로그래밍 언어 > JavaScript' 카테고리의 다른 글

[JavaScript] 커링 (0)	2023.01.12
[JavaScript] iterable 객체 (0)	2023.01.11
[JavaScript] 문자열 자르기 (substr, substring, slice) (0)	2022.12.05
JavaScript 의 동작방식 (0)	2022.11.12
[JavaScript] 반복문 (0)	2022.11.05