자바스크립트 this 에 대하여

에구마·2023년 10월 4일

this

FrontEnd

목록 보기

23/25

this - JavaScript | MDN

this.. 이것.. 그래서 '이것'이 무엇인가에 대하여 알아보자 !
요약하면, 상황과 환경별로 this가 가리키는 것이 다르다 ! 각각을 잘 알고 있자 !

전역

전역 실행 맥락에서 this는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.

// 웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b); // "MDN"
console.log(b); // "MDN"

함수

함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우됩니다.

단순 호출에선 this의 값이 호출에 의해 설정되지 않았다. 즉 기본인 window

function f1() {
  return this;
}

// 브라우저
f1() === window; // true

// Node.js
f1() === global; // true

화살표 함수

화살표함수는 그 함수 자체로 함수스코프를 만들지 않는다. 해당 화살표함수의 상위에 있는 함수의 스코프를 찾아간다.

function RockBand(members){
  this.members = members;
  this.perform = function () {
    setTimeout (() => {
      console.log(this)
			// RockBand {members: Array(1), perform: ƒ}
// 생략

즉 이렇게 this.members나 this.perfrom에서의 this와 같은 this, 즉 new 키워드로 만들어진 객체 고유 this를 가진다

객체

함수를 어떤 객체의 메서드로 호출하면 this의 값은 해당 객체(메서드)를 호출한 그 객체를 사용합니다

var o = {
  prop: 37,
  f: function () {
    return this.prop;
  },
};

console.log(o.f()); // 37

var thisTest = {
  inFunc : function(){
    console.log(this)
  },
  inObj : {
    inObjFunc : function(){
      console.log(this)
    },
    ininObj : {
      ininObjFunc : function(){
        console.log(this)
      }
    }
  }
}

thisTest.inFunc()
// Object {inFunc: ƒ, inObj: {…}}
// inFunc()에서 this는 자신을 감싼 thisTest객체

thisTest.inObj.inObjFunc()
// Object {inObjFunc: ƒ, ininObj: {…}}
// inObjFunc()에서 this는 자신을 바로 위에서 감싼 inObj

thisTest.inObj.ininObj.ininObjFunc()
// Object {ininObjFunc: ƒ}
// ininObjFunc()에서 this는 자신을 바로 위에서 감싼 ininObj

DOM에서

이벤트 핸들러에서 사용할 경우 this는 이벤트가 걸린 HTML요소 입니다.

var btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
  console.log(this); //#btn
});

push! 버튼 클릭시 콘솔에 <button class="btn">push!</button> 출력됨

new 생성자함수

생성자 함수 안에서의 this는, new키워드와 함께 호출한 경우엔 그 생성자 함수가 생성한 객체입니다.

function Person(name) {
  this.name = name;
}
 
var kim = new Person('kim');
var lee = new Person('lee');
 
console.log(kim.name); //kim
console.log(lee.name); //lee